绘制链长制页面

src/views/assessingTarget/basicTarget.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="basic-target ele-body">
-    <el-card shadow="never" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
+    <el-card
+      shadow="never"
+      v-loading="loading"
+      element-loading-background="rgba(255, 255, 255, 1)"
+    >
       <tab @update:type="updateType($event)" />
       <search :type="1" @search:task="updateParams($event)" />
       <el-table
@@ -11,19 +15,14 @@
         :span-method="arraySpanMethod"
         ref="table"
       >
-        <el-table-column
-          type="index"
-          label="序号"
-          align="center"
-          min-width="50"
-        >
+        <el-table-column type="index" label="序号" align="center" width="50">
         </el-table-column>
         <el-table-column
           label="一级指标"
           min-width="80"
           align="center"
           prop="quota1"
-          :key="Math.random()"
+          :key="1"
         ></el-table-column>
 
         <el-table-column
@@ -31,7 +30,7 @@
           min-width="80"
           align="center"
           prop="quota2"
-          :key="Math.random()"
+          :key="2"
         ></el-table-column>
 
         <el-table-column
@@ -39,7 +38,7 @@
           align="center"
           min-width="400"
           prop="content"
-          :key="Math.random()"
+          :key="3"
         ></el-table-column>
 
         <el-table-column
@@ -47,7 +46,7 @@
           min-width="60"
           align="center"
           prop="points"
-          :key="Math.random()"
+          :key="4"
         ></el-table-column>
 
         <el-table-column
@@ -55,7 +54,7 @@
           min-width="80"
           align="center"
           v-if="type.type == 1"
-          :key="Math.random()"
+          :key="5"
         >
           <template slot-scope="{ row, $index }">
             <div @dblclick="showText($index, true)" style="height: 100%">
@@ -77,14 +76,14 @@
           min-width="95 "
           align="center"
           prop="leaderUnit"
-          :key="Math.random()"
+          :key="6"
         ></el-table-column>
 
         <el-table-column
           label="牵头部门"
           min-width="80"
           align="center"
-          :key="Math.random()"
+          :key="7"
         >
           <template slot-scope="{ row }">
             <span>{{ row.leaderDeptList | formatList }}</span>
@@ -95,7 +94,7 @@
           label="责任领导"
           min-width="80"
           align="center"
-          :key="Math.random()"
+          :key="8"
         >
           <template slot-scope="{ row }">
             {{ row.leaderPrincipalList | formatList }}
@@ -108,15 +107,10 @@
           min-width="100"
           prop="note"
           v-if="type.type == 1"
-          :key="Math.random()"
+          :key="9"
         ></el-table-column>
 
-        <el-table-column
-          label="操作"
-          width="125"
-          align="center"
-          :key="Math.random()"
-        >
+        <el-table-column label="操作" width="125" align="center" :key="10">
           <template slot-scope="{ row }">
             <el-link
               slot="reference"
@@ -191,10 +185,12 @@ export default {
     search,
     Treeselect,
   },
-  mixins: [mergeSpan([
-    {name: 'quota1', col: [1]},
-    {name: 'quota2', col: [2]},
-  ])],
+  mixins: [
+    mergeSpan([
+      { name: "quota1", col: [1] },
+      { name: "quota2", col: [2] },
+    ]),
+  ],
   data() {
     return {
       dataList: [],
@@ -258,14 +254,14 @@ export default {
           this.getDataList();
         });
     },
-    showLeaderDept(data) {
+    showLeaderDept(row) {
+      let data = JSON.parse(JSON.stringify(row));
       this.showDep = true;
       data.leaderDept = (data.leaderDept && data.leaderDept.split(",")) || [];
       data.leaderDept = data.leaderDept.map((item) => {
         return parseInt(item);
       });
       this.updateData = data;
-      console.log(this.formatDep, data);
     },
     updateParams(data) {
       this.searchParams = data;
@@ -287,7 +283,10 @@ export default {
         row.deptPoints > row.points ||
         !row.deptPoints.trim()
       ) {
-        this.$message({ type: "warning", message: "请输入数值0~" + row.points });
+        this.$message({
+          type: "warning",
+          message: "请输入数值0~" + row.points,
+        });
         let data = this.dataList;
         data[index].deptPoints = this.preValue;
         this.dataList = data;
@@ -332,20 +331,12 @@ export default {
           this.dataList = this.reduceData(data);
           console.log(this.dataList);
           this.count = res.data.data.total;
-          this.$nextTick(() => {
-            setTimeout(() => {
-              this.loading = false;
-            }, 300);
-          });
+          this.loading = false;
         })
         .catch(() => {
           this.dataList = [];
           this.count = 0;
-          this.$nextTick(() => {
-            setTimeout(() => {
-              this.loading = false;
-            }, 300);
-          });
+          this.loading = false;
         });
     },
   },

src/views/assessingTarget/constraint.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="reward ele-body">
-    <el-card shadow="never" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
+    <el-card
+      shadow="never"
+      v-loading="loading"
+      element-loading-background="rgba(255, 255, 255, 1)"
+    >
       <tab @update:type="updateType($event)" />
       <search :type="3" @search:task="updateParams($event)" />
       <el-table
@@ -18,21 +22,21 @@
           min-width="80"
           align="center"
           prop="quota"
-          :key="Math.random()"
+          :key="1"
         ></el-table-column>
         <el-table-column
           label="考核内容和计分细则"
           min-width="550"
           align="center"
           prop="content"
-          :key="Math.random()"
+          :key="2"
         ></el-table-column>
         <el-table-column
           label="预计扣分"
           width="80"
           align="center"
           v-if="type.type == 1"
-          :key="Math.random()"
+          :key="3"
         >
           <template slot-scope="{ row, $index }">
             <div @dblclick="showText($index, true)" style="height: 100%">
@@ -53,13 +57,13 @@
           min-width="95"
           align="center"
           prop="leaderUnit"
-          :key="Math.random()"
+          :key="4"
         ></el-table-column>
         <el-table-column
           label="牵头部门"
           min-width="80"
           align="center"
-          :key="Math.random()"
+          :key="5"
         >
           <template slot-scope="{ row }">
             <span>{{ row.leaderDeptList | formatList }}</span>
@@ -70,7 +74,7 @@
           min-width="80"
           align="center"
           prop="leaderPrincipal"
-          :key="Math.random()"
+          :key="6"
         >
           <template slot-scope="{ row }">
             {{ row.leaderPrincipalList | formatList }}
@@ -82,14 +86,9 @@
           min-width="100"
           prop="note"
           v-if="type.type == 1"
-          :key="Math.random()"
+          :key="7"
         ></el-table-column>
-        <el-table-column
-          label="操作"
-          width="125"
-          align="center"
-          :key="Math.random()"
-        >
+        <el-table-column label="操作" width="125" align="center" :key="8">
           <template slot-scope="{ row }">
             <el-link
               slot="reference"
@@ -160,9 +159,7 @@ export default {
     search,
     Treeselect,
   },
-  mixins: [mergeSpan([
-    {name: 'quota', col: [1]}
-  ])],
+  mixins: [mergeSpan([{ name: "quota", col: [1] }])],
   data() {
     return {
       dataList: [],
@@ -226,7 +223,8 @@ export default {
           this.getDataList();
         });
     },
-    showLeaderDept(data) {
+    showLeaderDept(row) {
+      let data = JSON.parse(JSON.stringify(row));
       this.showDep = true;
       data.leaderDept = (data.leaderDept && data.leaderDept.split(",")) || [];
       data.leaderDept = data.leaderDept.map((item) => {
@@ -248,10 +246,7 @@ export default {
       if (row.deptPoints == this.preValue) {
         return;
       }
-      if (
-        row.deptPoints < 0 ||
-        !row.deptPoints.trim()
-      ) {
+      if (row.deptPoints < 0 || !row.deptPoints.trim()) {
         this.$message({ type: "warning", message: "请输入数值0~" });
         let data = this.dataList;
         data[index].deptPoints = this.preValue;
@@ -295,20 +290,12 @@ export default {
           });
           this.dataList = this.reduceData(data);
           this.count = res.data.data.total;
-          this.$nextTick(() => {
-            setTimeout(() => {
-              this.loading = false;
-            }, 300);
-          });
+          this.loading = false;
         })
         .catch(() => {
           this.dataList = [];
           this.count = 0;
-          this.$nextTick(() => {
-            setTimeout(() => {
-              this.loading = false;
-            }, 300);
-          });
+          this.loading = false;
         });
     },
   },

src/views/assessingTarget/reward.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="reward ele-body">
-    <el-card shadow="never" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
+    <el-card
+      shadow="never"
+      v-loading="loading"
+      element-loading-background="rgba(255, 255, 255, 1)"
+    >
       <tab @update:type="updateType($event)" />
       <search :type="2" @search:task="updateParams($event)" />
       <el-table
@@ -19,14 +23,14 @@
             min-width="80"
             align="center"
             prop="quota1"
-            :key="Math.random()"
+            :key="1"
           ></el-table-column>
           <el-table-column
             label="二级指标"
             min-width="80"
             align="center"
             prop="quota2"
-            :key="Math.random()"
+            :key="2"
           ></el-table-column>
         </template>
         <el-table-column
@@ -34,21 +38,21 @@
           align="center"
           min-width="400"
           prop="content"
-          :key="Math.random()"
+          :key="3"
         ></el-table-column>
         <el-table-column
           label="封顶分值"
           min-width="80"
           align="center"
           prop="points"
-          :key="Math.random()"
+          :key="4"
         ></el-table-column>
         <el-table-column
           label="预计加分"
           min-width="80"
           align="center"
           v-if="type.type == 1"
-          :key="Math.random()"
+          :key="5"
         >
           <template slot-scope="{ row, $index }">
             <div @dblclick="showText($index, true)" style="height: 100%">
@@ -69,13 +73,13 @@
           min-width="95"
           align="center"
           prop="leaderUnit"
-          :key="Math.random()"
+          :key="6"
         ></el-table-column>
         <el-table-column
           label="牵头部门"
           min-width="80"
           align="center"
-          :key="Math.random()"
+          :key="7"
         >
           <template slot-scope="{ row }">
             <span>{{ row.leaderDeptList | formatList }}</span>
@@ -86,7 +90,7 @@
           min-width="80"
           align="center"
           prop="leaderPrincipal"
-          :key="Math.random()"
+          :key="8"
         >
           <template slot-scope="{ row }">
             {{ row.leaderPrincipalList | formatList }}
@@ -97,15 +101,10 @@
           align="center"
           min-width="100"
           prop="note"
-          :key="Math.random()"
+          :key="9"
           v-if="type.type == 1"
         ></el-table-column>
-        <el-table-column
-          label="操作"
-          width="125"
-          align="center"
-          :key="Math.random()"
-        >
+        <el-table-column label="操作" width="125" align="center" :key="10">
           <template slot-scope="{ row }">
             <el-link
               slot="reference"
@@ -176,10 +175,12 @@ export default {
     search,
     Treeselect,
   },
-  mixins: [mergeSpan([
-    {name: 'quota1', col: [1]},
-    {name: 'quota2', col: [2]},
-  ])],
+  mixins: [
+    mergeSpan([
+      { name: "quota1", col: [1] },
+      { name: "quota2", col: [2] },
+    ]),
+  ],
   data() {
     return {
       dataList: [],
@@ -243,7 +244,8 @@ export default {
           this.getDataList();
         });
     },
-    showLeaderDept(data) {
+    showLeaderDept(row) {
+      let data = JSON.parse(JSON.stringify(row));
       this.showDep = true;
       data.leaderDept = (data.leaderDept && data.leaderDept.split(",")) || [];
       data.leaderDept = data.leaderDept.map((item) => {
@@ -270,7 +272,10 @@ export default {
         row.deptPoints > row.points ||
         !row.deptPoints.trim()
       ) {
-        this.$message({ type: "warning", message: "请输入数值0~" + row.points });
+        this.$message({
+          type: "warning",
+          message: "请输入数值0~" + row.points,
+        });
         let data = this.dataList;
         data[index].deptPoints = this.preValue;
         this.dataList = data;
@@ -314,20 +319,12 @@ export default {
           this.dataList = this.reduceData(data);
           console.log(this.dataList);
           this.count = res.data.data.total;
-          this.$nextTick(() => {
-            setTimeout(() => {
-              this.loading = false;
-            }, 300);
-          });
+          this.loading = false;
         })
         .catch(() => {
           this.dataList = [];
           this.count = 0;
-          this.$nextTick(() => {
-            setTimeout(() => {
-              this.loading = false;
-            }, 300);
-          });
+          this.loading = false;
         });
     },
   },

src/views/chain/assessmentContent/index.vue

@@ -1,13 +0,0 @@
-<template>
-  
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-
-</style>

src/views/chain/assessmentContent/search.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="search">
+    <el-form :inline="true" :model="searchParams" size="small">
+      <el-form-item label="考核指标">
+        <el-select v-model="searchParams.quota">
+          <el-option></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="考核内容:">
+        <el-input
+          placeholder="请输入考核内容"
+          clearable
+          v-model="searchParams.content"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="参与部门:">
+        <treeselect
+          v-model="searchParams.leaderDept"
+          :options="formatDep"
+          placeholder="请选择参与部门"
+          :defaultExpandLevel="1"
+          :normalizer="
+            (d) => {
+              return {
+                id: d.id,
+                label: d.name,
+                children:
+                  d.children && d.children.length > 0 ? d.children : undefined,
+              };
+            }
+          "
+        />
+      </el-form-item>
+      <el-button type="primary" size="small" @click="search">查询</el-button>
+      <el-button
+        type="default"
+        size="small"
+        @click="
+          clear();
+          search();
+        "
+        >清空</el-button
+      >
+    </el-form>
+  </div>
+</template>
+
+<script>
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import Treeselect from "@riophae/vue-treeselect"; // 下拉树
+import { mapGetters, mapActions } from "vuex";
+export default {
+  props: {
+    type: {
+      type: Number,
+      default() {
+        return 1;
+      },
+    },
+  },
+  components: {
+    Treeselect,
+  },
+  data() {
+    return {
+      searchParams: {
+        department:'',
+        quota: "",
+        content: "",
+      },
+    };
+  },
+  created() {
+    this.getDepartment(1);
+  },
+  methods: {
+    ...mapActions({
+      getDepartment: "base/getDepartment",
+    }),
+    clear() {
+      this.searchParams = {
+        quota: "",
+        content: "",
+        department: "",
+      };
+    },
+    search() {
+      this.$emit("search:task", this.searchParams);
+    },
+  },
+  computed: {
+    ...mapGetters(["formatDep"]),
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/chain/assessmentContent/software.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="software ele-body">
+    <el-card
+      shadow="never"
+      v-loading="loading"
+      element-loading-background="rgba(255, 255, 255, 1)"
+    >
+      <search @search:task="updateParams($event)" />
+      <div class="operating">
+        <el-button size="small" type="primary" @click="edit()"
+          >新增考核内容</el-button
+        >
+      </div>
+      <div class="table">
+        <div class="header">
+          <el-row type="flex">
+            <el-col :span="2" align="center" class="thead td"
+              ><span class="cell">编号</span></el-col
+            >
+            <el-col :span="5" align="center" class="thead td"
+              ><span class="cell">指标名称与全年目标</span></el-col
+            >
+            <el-col :span="2" align="center" class="thead td"
+              ><span class="cell">分值</span></el-col
+            >
+            <el-col :span="2" align="center" class="thead td"
+              ><span class="cell">得分</span></el-col
+            >
+            <el-col :span="3" align="center" class="thead td"
+              ><span class="cell">牵头部门</span></el-col
+            >
+            <el-col :span="3" align="center" class="thead td"
+              ><span class="cell">配合部门</span></el-col
+            >
+            <el-col :span="3" align="center" class="thead td"
+              ><span class="cell">打分操作记录</span></el-col
+            >
+            <el-col :span="4" align="center" class="thead td"
+              ><span class="cell">操作</span></el-col
+            >
+          </el-row>
+        </div>
+        <div class="body" :style="{ height: tableHeight + 'px' }">
+          <div v-for="(data, index) of dataList" :key="index">
+            <div class="title">121212</div>
+            <el-row
+              type="flex"
+              style="border-left: 1px solid rgb(237, 237, 237)"
+              v-for="(item, ind) of data"
+              :key="ind"
+            >
+              <el-col :span="2" align="center" class="td"
+                ><span class="cell">编号</span></el-col
+              >
+              <el-col :span="5" align="center" class="td"
+                ><span class="cell">指标名称与全年目标</span></el-col
+              >
+              <el-col :span="2" align="center" class="td"
+                ><span class="cell">分值</span></el-col
+              >
+              <el-col :span="2" align="center" class="td"
+                ><span class="cell">得分</span></el-col
+              >
+              <el-col :span="3" align="center" class="td"
+                ><span class="cell">牵头部门</span></el-col
+              >
+              <el-col :span="3" align="center" class="td"
+                ><span class="cell">配合部门</span></el-col
+              >
+              <el-col :span="3" align="center" class="td"
+                ><span class="cell">打分操作记录</span></el-col
+              >
+              <el-col :span="4" align="center" class="td"
+                ><span class="cell"
+                  ><el-link
+                    @click="edit(index, ind)"
+                    icon="el-icon-edit"
+                    type="primary"
+                    :underline="false"
+                    >修改</el-link
+                  >
+                  <el-link
+                    slot="reference"
+                    icon="el-icon-delete"
+                    type="danger"
+                    :underline="false"
+                    >删除</el-link
+                  ></span
+                ></el-col
+              >
+            </el-row>
+          </div>
+        </div>
+        <div class="line"></div>
+      </div>
+      <el-dialog
+        :title="dialogTitle"
+        :visible.sync="showEdit"
+        width="400px"
+        custom-class="ele-dialog-form"
+        :lock-scroll="false"
+        :destroy-on-close="true"
+        @closed="form = {}"
+      >
+        <el-form
+          :model="form"
+          label-width="82px"
+          @keyup.enter.native="save"
+          @submit.native.prevent
+          :rules="rules"
+        >
+          <el-form-item label="考核指标：" prop="">
+            <el-select placeholder="请选择考核指标">
+              <el-option></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="指标内容：" prop="">
+            <el-input
+              type="textarea"
+              :rows="5"
+              placeholder="请输入考核内容"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="分值：" prop="">
+            <el-input placeholder="请输入分值"></el-input>
+          </el-form-item>
+          <el-form-item label="牵头部门：" prop="">
+            <treeselect
+              :flat="true"
+              :options="formatDep"
+              :multiple="true"
+              placeholder="请选择牵头部门"
+              :defaultExpandLevel="2"
+              :normalizer="
+                (d) => {
+                  return {
+                    id: d.id,
+                    label: d.name,
+                    children:
+                      d.children && d.children.length > 0
+                        ? d.children
+                        : undefined,
+                  };
+                }
+              "
+            />
+          </el-form-item>
+          <el-form-item label="配合部门：" prop="">
+            <treeselect
+              :flat="true"
+              :options="formatDep"
+              :multiple="true"
+              placeholder="请选择牵头部门"
+              :defaultExpandLevel="2"
+              :normalizer="
+                (d) => {
+                  return {
+                    id: d.id,
+                    label: d.name,
+                    children:
+                      d.children && d.children.length > 0
+                        ? d.children
+                        : undefined,
+                  };
+                }
+              "
+            />
+          </el-form-item>
+        </el-form>
+        <div slot="footer">
+          <el-button type="primary" @click="save">保存</el-button>
+          <el-button @click="showEdit = false">取消</el-button>&nbsp;
+        </div>
+      </el-dialog>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import search from "./search";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import Treeselect from "@riophae/vue-treeselect"; // 下拉树
+import { mapGetters } from "vuex";
+export default {
+  components: {
+    search,
+    Treeselect,
+  },
+  data() {
+    return {
+      searchParams: {},
+      dataList: [
+        [[], [], [], [], [], [], []],
+        [[], [], [], [], [], []],
+        [[], [], [], []],
+      ],
+      tableHeight: document.documentElement.clientHeight - 310,
+      showEdit: false,
+      title: "",
+      form: {},
+      rules: {},
+      loading: false,
+    };
+  },
+  methods: {
+    edit(index, ind) {
+      this.showEdit = true;
+      let title = "新增考核内容";
+      if (index && ind) {
+        console.log("编辑");
+        title = "编辑考核内容";
+      }
+      this.dialogTitle = title;
+    },
+  },
+  computed: {
+    ...mapGetters(["formatDep"]),
+  },
+};
+</script>
+
+<style scoped>
+/* .table {
+  border-bottom: 1px solid rgb(237, 237, 237);
+  position: relative;
+} */
+.el-row {
+  align-items: stretch;
+}
+.header {
+  border-top: 1px solid rgb(237, 237, 237);
+  border-left: 1px solid rgb(237, 237, 237);
+  margin-right: 8px;
+}
+.title {
+  padding: 10px;
+  font-weight: 700;
+}
+.td {
+  padding: 10px;
+  font-size: 14px;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  border-bottom: 1px solid rgb(237, 237, 237);
+  border-right: 1px solid rgb(237, 237, 237);
+  vertical-align: middle;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.thead {
+  font-weight: 700;
+  color: #262626;
+  background-color: #fafafa;
+}
+.cell {
+  cursor: default;
+}
+.title {
+  border-bottom: 1px solid rgb(237, 237, 237);
+  border-right: 1px solid rgb(237, 237, 237);
+  border-left: 1px solid rgb(237, 237, 237);
+}
+.body {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  position: relative;
+  width: calc(100%+16px);
+  box-sizing: border-box;
+}
+.body::-webkit-scrollbar {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.line {
+  height: 1px;
+  background: rgb(237, 237, 237);
+  margin-top: -1px;
+  margin-right: 8px;
+}
+/deep/ .vue-treeselect__multi-value-label , /deep/ .vue-treeselect__input{
+  line-height: 25px;
+}
+/deep/ .vue-treeselect__multi-value{
+    margin-bottom:0;
+}
+</style>