修改

src/views/second/taskSummary/basicTable.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="assessing-content ele-body">
-    <el-card shadow="never" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
-    <search :type="1" @search:task="updateParams($event)" />
-    <div class="operating">
+    <el-card
+      shadow="never"
+      v-loading="loading"
+      element-loading-background="rgba(255, 255, 255, 1)"
+    >
+      <search :type="1" @search:task="updateParams($event)" />
+      <div class="operating">
         <el-button size="small" type="primary">导出</el-button>
-    </div>
-     <el-table
+      </div>
+      <el-table
         highlight-current-row
         :data="dataList"
         :height="tableHeight"
@@ -84,11 +88,7 @@
             <pre>{{ row.cooperatePrincipalList | formatList }}</pre>
           </template>
         </el-table-column>
-        <el-table-column
-          label="操作"
-          width="80"
-          align="center"
-        >
+        <el-table-column label="操作" width="80" align="center">
           <template slot-scope="{ row }">
             <el-link
               slot="reference"
@@ -101,7 +101,7 @@
         </el-table-column>
       </el-table>
 
-     <el-pagination
+      <el-pagination
         :current-page.sync="page.page"
         :page-size="page.limit"
         :total="count"
@@ -113,126 +113,175 @@
         @current-change="getDataList()"
       />
       <el-dialog
-      title="编辑考核内容"
-      :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"
-        custom-class="editForm"
-        @keyup.enter.native="save"
-        @submit.native.prevent
-        ref="editForm"
+        title="编辑考核内容"
+        :visible.sync="showEdit"
+        width="650px"
+        custom-class="ele-dialog-form"
+        :lock-scroll="false"
+        :destroy-on-close="true"
+        @closed="form = {}"
       >
-        <el-form-item label="小条内容：">
-          <el-input
-            type="textarea"
-            :rows="5"
-            placeholder="请输入考核内容"
-            v-model="form.itemContent"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="分值：">
-          <el-input placeholder="请输入分值" v-model="form.points"></el-input>
-        </el-form-item>
-
-        <el-form-item label="牵头部门：">
-          <treeselect
-           v-model="form.leaderDept"
-            :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="责任领导：">
-           <treeselect
-            :multiple="true"
-            v-model="form.leaderPrincipal"
-            :options="principalList"
-            placeholder="请选择牵头部门责任领导"
-            :defaultExpandLevel="1"
-            :normalizer="
-              (d) => {
-                return {
-                  id: d.id,
-                  label: d.realname,
-                  children:
-                    d.children && d.children.length > 0
-                      ? d.children
-                      : undefined,
-                };
-              }
-            "
-          />
-        </el-form-item>
-        <el-form-item label="配合部门：">
-          <treeselect
-            v-model="form.cooperateDept"
-            :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="责任领导：">
-           <treeselect
-            :multiple="true"
-            v-model="form.cooperatePrincipal"
-            :options="principalList"
-            placeholder="请选择配合部门责任领导"
-            :defaultExpandLevel="1"
-            :normalizer="
-              (d) => {
-                return {
-                  id: d.id,
-                  label: d.realname,
-                  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-row>
+          <el-col :span="4" class="title">考核内容：</el-col>
+          <el-col :span="18"
+            ><el-input
+              type="textarea"
+              :rows="4"
+              placeholder="请输入考核内容"
+              v-model="form.itemContent"
+            ></el-input
+          ></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="4" class="title"> 牵头部门： </el-col>
+          <el-col :span="7">
+            <treeselect
+              v-model="form.leaderDept"
+              :flat="true"
+              :options="formatDep"
+              placeholder="请选择牵头部门"
+              :defaultExpandLevel="2"
+              :normalizer="
+                (d) => {
+                  return {
+                    id: d.id,
+                    label: d.name,
+                    children:
+                      d.children && d.children.length > 0
+                        ? d.children
+                        : undefined,
+                  };
+                }
+              "
+            />
+          </el-col>
+          <el-col :span="4" class="title"> 责任领导： </el-col>
+          <el-col :span="7">
+            <treeselect
+              v-model="form.leaderPrincipal"
+              :options="principalList"
+              placeholder="请选择牵头部门责任领导"
+              :defaultExpandLevel="1"
+              :normalizer="
+                (d) => {
+                  return {
+                    id: d.id,
+                    label: d.realname,
+                    children:
+                      d.children && d.children.length > 0
+                        ? d.children
+                        : undefined,
+                  };
+                }
+              "
+            />
+          </el-col>
+        </el-row>
+        <div class="leader">
+          <span class="el-icon-circle-plus-outline add"></span>
+          <el-row>
+            <el-col :span="4" class="title"> 其他牵头部门： </el-col>
+            <el-col :span="7">
+              <treeselect
+                v-model="form.leaderDept"
+                :flat="true"
+                :options="formatDep"
+                placeholder="请选择其他牵头部门"
+                :defaultExpandLevel="2"
+                :normalizer="
+                  (d) => {
+                    return {
+                      id: d.id,
+                      label: d.name,
+                      children:
+                        d.children && d.children.length > 0
+                          ? d.children
+                          : undefined,
+                    };
+                  }
+                "
+              />
+            </el-col>
+            <el-col :span="4" class="title"> 责任领导： </el-col>
+            <el-col :span="7">
+              <treeselect
+                v-model="form.leaderPrincipal"
+                :options="principalList"
+                placeholder="请选择其他牵头部门责任领导"
+                :defaultExpandLevel="1"
+                :normalizer="
+                  (d) => {
+                    return {
+                      id: d.id,
+                      label: d.realname,
+                      children:
+                        d.children && d.children.length > 0
+                          ? d.children
+                          : undefined,
+                    };
+                  }
+                "
+              />
+            </el-col>
+          </el-row>
+        </div>
+        <div class="cooperate">
+          <span class="el-icon-circle-plus-outline add"></span>
+          <el-row>
+            <el-col :span="4" class="title">配合部门： </el-col>
+            <el-col :span="7">
+              <treeselect
+                v-model="form.leaderDept"
+                :flat="true"
+                :options="formatDep"
+                placeholder="请选择配合部门"
+                :defaultExpandLevel="2"
+                :normalizer="
+                  (d) => {
+                    return {
+                      id: d.id,
+                      label: d.name,
+                      children:
+                        d.children && d.children.length > 0
+                          ? d.children
+                          : undefined,
+                    };
+                  }
+                "
+              />
+            </el-col>
+            <el-col :span="4" class="title"> 责任领导： </el-col>
+            <el-col :span="7">
+              <treeselect
+                v-model="form.leaderPrincipal"
+                :options="principalList"
+                placeholder="请选择牵头部门责任领导"
+                :defaultExpandLevel="1"
+                :normalizer="
+                  (d) => {
+                    return {
+                      id: d.id,
+                      label: d.realname,
+                      children:
+                        d.children && d.children.length > 0
+                          ? d.children
+                          : undefined,
+                    };
+                  }
+                "
+              />
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="4" class="title">分值：</el-col>
+            <el-col :span="7"><el-input placeholder="请输入分值"></el-input></el-col>
+          </el-row>
+        </div>
+        <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>
@@ -279,7 +328,7 @@ export default {
     this.$store.dispatch("base/getPrincipalList");
   },
   computed: {
-    ...mapGetters(["formatDep", "principalList" ]),
+    ...mapGetters(["formatDep", "principalList"]),
   },
   filters: {
     formatList(val) {
@@ -317,21 +366,21 @@ export default {
         });
     },
     edit(row) {
-      this.showEdit = true
+      this.showEdit = true;
       let form = JSON.parse(JSON.stringify(row));
-        form.leaderDept = form.leaderDept
-          .split(",")
-          .map((item) => parseInt(item));
-        form.cooperateDept = form.cooperateDept
-          .split(",")
-          .map((item) => parseInt(item));
-        form.leaderPrincipal = form.leaderPrincipal
-          .split(",")
-          .map((item) => parseInt(item));
-        form.cooperatePrincipal = form.cooperatePrincipal
-          .split(",")
-          .map((item) => parseInt(item));
-        this.form = form;
+      form.leaderDept = form.leaderDept
+        .split(",")
+        .map((item) => parseInt(item));
+      form.cooperateDept = form.cooperateDept
+        .split(",")
+        .map((item) => parseInt(item));
+      form.leaderPrincipal = form.leaderPrincipal
+        .split(",")
+        .map((item) => parseInt(item));
+      form.cooperatePrincipal = form.cooperatePrincipal
+        .split(",")
+        .map((item) => parseInt(item));
+      this.form = form;
     },
     save() {
       let form = this.form;
@@ -341,31 +390,54 @@ export default {
         form.leaderPrincipal && form.leaderPrincipal.join(",");
       form.cooperatePrincipal =
         form.cooperatePrincipal && form.cooperatePrincipal.join(",");
-      editApi.editItem(Object.assign({}, form)) 
-      .then((res)=> {
-        this.showEdit = false;
-        this.$message({
-          type:'success',
-          message: '提交申请成功'
+      editApi
+        .editItem(Object.assign({}, form))
+        .then((res) => {
+          this.showEdit = false;
+          this.$message({
+            type: "success",
+            message: "提交申请成功",
+          });
+          this.getDataList();
         })
-        this.getDataList()
-      })
-      .catch((e)=>{
-        this.showEdit = false;
-        this.$message({
-          type:'error',
-          message: '提交申请失败'
+        .catch((e) => {
+          this.showEdit = false;
+          this.$message({
+            type: "error",
+            message: "提交申请失败",
+          });
         })
-      })
-      .finally(() => {
-        this.form = {}
-        this.loading = false;
-      });
-      
+        .finally(() => {
+          this.form = {};
+          this.loading = false;
+        });
     },
   },
 };
 </script>
 
 <style scoped>
+.el-row {
+  margin-bottom: 20px;
+  display: flex;
+  align-content: center;
+}
+.el-col {
+  text-align: right;
+}
+.title {
+  margin-right: 10px;
+  line-height: 36px;
+}
+.leader,
+.cooperate {
+  position: relative;
+}
+.add {
+  font-size: 20px;
+  position: absolute;
+  right: 0px;
+  top: 8px;
+  color:#4d9efc;
+}
 </style>