对接

shj

2022-07-27 2b4328392746fc59f5edf98fed629f8db2804e18

 src/views/goalManagement/targetSettings/index.vue

@@ -1,16 +1,31 @@
<template>
<div>
        <search></search>
      <el-form :model="ruleForm" status-icon label-width="20px" class="topTitle">
         <el-row>
            <el-col :span="4">
               <el-form-item>
                  <el-input v-model="ruleForm.searchParams.qName" size="default" placeholder="安全目标指标" />
               </el-form-item>
            </el-col>
            <el-col :span="4">
               <el-form-item>
                  <el-input v-model="ruleForm.searchParams.indexNum" size="default" placeholder="目标指标编号" />
               </el-form-item>
            </el-col>
            <el-col :span="16">
               <el-form-item>
                  <el-button type="primary" size="default" @click="listApi">查询</el-button>
                  <el-button size="default" @click="resetForm">重置</el-button>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
        <div class="minCenter">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
         <el-tabs v-model="ruleForm.searchParams.targetType" class="demo-tabs" @tab-click="handleClick">
            <div class="btns">
              <div>
                <el-button type="primary" size="default" :icon="Plus" @click="openD('新建')">新建</el-button>
                <el-button type="danger" size="default" :icon="Delete" plain>删除</el-button>
                  <el-button type="danger" :disabled="danger" size="default" @click="onDeleteAll" :icon="Delete" plain>删除</el-button>
              </div>
              <div>
                <!-- <el-button size="default" :icon="Upload" @click="upButton"></el-button>
@@ -21,80 +36,27 @@
            <el-tab-pane label="目标定制(年)" name="1"> </el-tab-pane>
            <el-tab-pane label="目标定制(月)" name="2"></el-tab-pane>
          </el-tabs>
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="70"
            />
         <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column label="序号" align="center" type="index" width="70" />
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column label="安全目标指标" align="center" sortable>
              <template #default="scope">{{ scope.row.date }}</template>
            <el-table-column label="安全目标指标" align="center" property="qName" sortable />
            <el-table-column property="indexNum" align="center" label="目标指标编号" sortable />
            <el-table-column property="year" label="年度" align="center" sortable show-overflow-tooltip />
            <el-table-column property="value" label="指标值" align="center" sortable show-overflow-tooltip />
            <el-table-column property="level" label="指标级别" align="center" sortable show-overflow-tooltip />
            <el-table-column property="completeDate" label="完成期限" align="center" sortable show-overflow-tooltip />
            <el-table-column label="状态" align="center" sortable show-overflow-tooltip>
               <template #default="scope">
                  <span v-if="scope.row.divideStatus == 1">已分解</span>
                  <span v-if="scope.row.divideStatus == 2">未分解</span>
               </template>
            </el-table-column>
            <el-table-column
              property="name"
              align="center"
              label="目标指标编号"
              sortable
            />
            <el-table-column
              property="address"
              label="年度"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="指标值"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="指标级别"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="完成期限"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="状态"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              property="address"
              label="备注信息"
              align="center"
              sortable
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              align="center"
              sortable
              show-overflow-tooltip
            >
              <template #default>
                <el-button link type="primary" size="default" :icon="View" @click="handleClick"
                  >查看</el-button
                >
                <el-button link type="primary" size="default" :icon="Delete">删除</el-button>
            <el-table-column property="memo" label="备注信息" align="center" sortable show-overflow-tooltip />
            <el-table-column label="操作" align="center" width="300" sortable show-overflow-tooltip>
               <template #default="scope">
                  <el-button link type="primary" size="default" :icon="View" @click="openD('查看', scope.row.id)">查看</el-button>
                  <el-button link type="primary" size="default" :icon="View" @click="openD('修改', scope.row.id)">修改</el-button>
                  <el-button link type="primary" size="default" :icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
@@ -102,134 +64,189 @@
            <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[100, 200, 300, 400]"
              :small="small"
              :disabled="disabled"
              :background="background"
               :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
               :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <dailogAdd ref="openAdd"></dailogAdd>
         <dailogAdd ref="openAdd" @navAddorUpdata="onAddorUpdata"></dailogAdd>
        <upData ref="upShow"></upData>
        </div>
        </div>
</template>
<script lang="ts">
import dailogAdd from './component/dailogAdd.vue'
import upData from '../../../components/updata/updata.vue'
import search from './component/search.vue'
import { ref, toRefs, reactive, onMounted, defineComponent } from "vue";
import {
  ElMessageBox,
  ElMessage,
  ElButton,
  ElInput,
  TabsPaneContext,
  FormInstance,
} from "element-plus";
import {
  Plus,
  Delete,
  Upload,
  Download,
  Refresh,
  View
} from "@element-plus/icons-vue";
interface User {
  date: string;
  name: string;
  address: string;
}
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import dailogAdd from './component/dailogAdd.vue';
import upData from '../../../components/updata/updata.vue';
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue';
import { goalManagementApi } from '/@/api/goalManagement';
export default defineComponent({
  components: { ElButton, ElInput,dailogAdd,upData,search},
   components: { ElButton, ElInput, dailogAdd, upData },
  setup() {


    // 下方导航与表格
    const activeName = ref("1");
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event);
      // 搜索条件
      const ruleForm = reactive({
         pageSize: 10,
         pageIndex: 1,
         searchParams: {
            qName: '', ////安全目标指标
            indexNum: '', ////目标指标编号
            targetType: '1', ////指标类型 1:年指标 2:月指标
            divideStatus: '', ////分解状态 1:已分解 2:未分解
         },
      });
      // 重置
      const resetForm = () => {
         ruleForm.searchParams.qName = '';
         ruleForm.searchParams.indexNum = '';
    };
    const formatter = (row: User, column: TableColumnCtx<User>) => {
      return row.address;
      const listApi = () => {
         goalManagementApi()
            .getTargetMngList(ruleForm)
            .then((res) => {
               if (res.data.code == 200) {
                  tableData.value = res.data.data;
                  currentPage4.value = res.data.pageIndex;
                  pageSize4.value = res.data.pageSize;
                  total.value = res.data.total;
               } else {
                  ElMessage.error(res.data.msg);
               }
            });
    };

    const tableData: User[] = [
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-08",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-06",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-07",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ];
    const currentPage4 = ref(4);
    const pageSize4 = ref(100);
    const small = ref(false)
    const disabled = ref(false)
    const background = ref(false)
      //
      const handleClick = (val: any) => {
         let targetType = JSON.parse(JSON.stringify(val));
         ruleForm.searchParams.targetType = targetType.paneName;
         listApi();
      };
      onMounted(() => {
         listApi();
      });
      const onAddorUpdata = () => {
         listApi();
      };
      // 表格
      const tableData = ref();
      const currentPage4 = ref();
      const pageSize4 = ref();
      const total = ref();
      const small = ref(false);
      const disabled = ref(false);
      const background = ref(false);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
         // console.log(`${val} items per page`);
         ruleForm.pageSize = val;
         listApi();
    };
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
         // console.log(`current page: ${val}`);
         ruleForm.pageIndex = val;
         listApi();
    };
    // 弹窗
   const openAdd=ref()
   const openD=(type:String,value:any)=>{
     openAdd.value.openDialog(type,value)
      const openAdd = ref();
      const openD = (title: String, id: number) => {
         openAdd.value.openDialog(title, ruleForm.searchParams.targetType, id);
      };
      // 删除
      const onDelete = (id: number) => {
         ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
         })
            .then(() => {
               goalManagementApi()
                  .getTargetMngDelete(id)
                  .then((res) => {
                     if (res.data.code == 200) {
                        ElMessage({
                           message: res.data.msg,
                           type: 'success',
                        });
                        listApi();
                     } else {
                        ElMessage.error(res.data.msg);
   }

                  });
            })
            .catch(() => {
               ElMessage({
                  type: 'info',
                  message: 'Delete canceled',
               });
            });
      };
      // 批量删除
      // const warning = ref(true);
      const danger = ref(true);
      const deletAll = ref();
      const handleSelectionChange = (val: any) => {
         let valId = JSON.parse(JSON.stringify(val));
         let arr = [];
         for (let i = 0; i < valId.length; i++) {
            arr.push(valId[i].id);
         }
         deletAll.value = arr.toString();
         if (val.length == 1) {
            // warning.value = false;
            danger.value = false;
         } else if (val.length == 0) {
            // warning.value = true;
            danger.value = true;
         } else {
            // warning.value = true;
            danger.value = false;
         }
      };
      const onDeleteAll = () => {
         ElMessageBox.confirm('确定删除所选项吗?', 'Warning', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
         })
            .then(() => {
               goalManagementApi()
                  .getTargetMngDelete(deletAll.value)
                  .then((res) => {
                     if (res.data.code == 200) {
                        ElMessage({
                           message: res.data.msg,
                           type: 'success',
                        });
                        listApi();
                     } else {
                        ElMessage.error(res.data.msg);
                     }
                  });
            })
            .catch(() => {
               // ElMessage({
               //    type: 'info',
               //    message: 'Delete canceled',
               // });
            });
      };
    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
      // const upShow = ref();
      // const upButton = () => {
      //    upShow.value.openDialog();
      // };
    return {
      activeName,
      handleClick,
      tableData,
      formatter,
      currentPage4,
      pageSize4,
         total,
      handleSizeChange,
      handleCurrentChange,
         handleClick,
      openAdd,
      openD,
      upShow,
      upButton,
         // upShow,
         // upButton,
      small,
      disabled,
      background,
@@ -238,12 +255,25 @@
      Upload,
      Download,
      Refresh,
      View
         View,
         listApi,
         ruleForm,
         resetForm,
         onAddorUpdata,
         onDelete,
         handleSelectionChange,
         deletAll,
         danger,
         onDeleteAll,
    };
  },
});
</script>
<style scoped>
.topTitle {
   background-color: #fff;
   padding: 20px 0px 20px 0px;
}
.minCenter {
  width: 100%;
  background-color: #fff;