添加细分小条页面

src/router/index.js

                         component: () => import('@/views/list/card/article'),
                         meta: {hide: true, title: '文章', uid: '/list/card'}
                     }
+
                 ]
             }
         ]
-    }
+    },
+    {
+        path: '/segmentation',
+        component: EleLayout,
+        meta: {hide: true, title: '分项信息'},
+        children: [
+            {
+                path: '',
+                component: () => import('@/views/second/segmentation/contentDetail'),
+                meta: {title: '分项'},
+                name:"segmentation",
+                props:true
+            }
+        ],
+        
+    },
 ];
 
 // 404路由在动态路由后面加

src/views/second/segmentation/basicTable.vue

 <template>
   <div class="assessing-content ele-body">
     <el-card shadow="never" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
-    <search :search-params="searchParams" />
+    <search :type="1" :search-params="searchParams" />
     <div class="operating">
-        <el-button size="small" type="warning">新增</el-button>
-        <el-button size="small" type="default">批量删除</el-button>
-        <el-button size="small" type="default">批量导入</el-button>
+        <el-button size="small" type="primary">导出</el-button>
     </div>
     <el-table highlight-current-row :data="dataList" :height="tableHeight" border>
+      <el-table-column type="index" width="50" align="center" label="编号"></el-table-column>
+      <el-table-column label="一级指标" min-width="150" align="center" prop="quota1"></el-table-column>
+      <el-table-column label="二级指标" min-width="150" align="center" prop="quota2"></el-table-column>
+      <el-table-column label="考核内容和计分细则" min-width="200" align="center" prop="content"></el-table-column>
+      <el-table-column label="小条内容" min-width="150" align="center" prop="littleContent"></el-table-column>
+      <el-table-column label="分值" min-width="60" align="center" prop="points"></el-table-column>
+      <el-table-column label="区牵头单位" min-width="80" align="center" prop="leaderUnit"></el-table-column>
+      <el-table-column label="牵头部门" min-width="80" align="center" prop="leaderDeptList"></el-table-column>
+      <el-table-column label="责任领导" min-width="80" align="center"></el-table-column>
+      <el-table-column label="配合部门" min-width="80" align="center" prop="cooperateDept"></el-table-column>
+      <el-table-column label="责任领导" min-width="80" align="center" prop="cooperateDeptList"></el-table-column>
       <el-table-column
-        type="selection"
-        width="50"
+        label="操作"
+        width="125"
         align="center"
-      ></el-table-column>
-      <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
-      <el-table-column label="一级指标" min-width="150" align="center"></el-table-column>
-      <el-table-column label="二级指标" min-width="150" align="center"></el-table-column>
-      <el-table-column label="考核内容和计分细则" min-width="200" align="center"></el-table-column>
-      <el-table-column label="分值" min-width="60" align="center"></el-table-column>
-      <el-table-column label="区牵头单位" min-width="80" align="center"></el-table-column>
-      <el-table-column label="牵头部门" min-width="80" align="center"></el-table-column>
-      <el-table-column label="责任领导" min-width="80" align="center"></el-table-column>
-      <el-table-column label="配合部门" min-width="80" align="center"></el-table-column>
-      <el-table-column label="责任领导" min-width="80" align="center"></el-table-column>
+        :key="Math.random()"
+      >
+        <template slot-scope="{ row }">
+          <router-link
+            :to="{name:'segmentation', params:{row, type: 1}}"
+            >分项</router-link
+          >
+        </template>
+      </el-table-column>
     </el-table>
-
      <el-pagination
         :current-page.sync="page.page"
         :page-size="page.limit"
 </template>
 
 <script>
-import search from "../../assessingTarget/search";
+import search from "../search";
+
 export default {
   components: {
     search,
   data() {
     return {
       searchParams: {},
-      dataList: [],
+      dataList: [
+        {quota1:'sdewfdewd',quota2: 'xsuifewhdnix'}
+      ],
       loading: false,
+      form: {},
+      quota1List:[],
+      quota2List:[],
       count: 0,
-      tableHeight: document.documentElement.clientHeight - 305,
+      tableHeight: document.documentElement.clientHeight - 355,
       page: {
         page: 1,
         limit: Math.floor(
-          (document.documentElement.clientHeight - 305 - 45) / 45
+          (document.documentElement.clientHeight - 355 - 45) / 45
         ),
       },
     };
 </script>
 
 <style scoped>
+  a {
+    text-decoration:none;
+    color:#66B1FF;  
+  }
 </style>

src/views/second/segmentation/constraint.vue

+<template>
+  <div class="assessing-content ele-body">
+    <el-card shadow="never" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
+    <search :type="3" :search-params="searchParams" />
+    <div class="operating">
+        <el-button size="small" type="primary">导出</el-button>
+    </div>
+    <el-table highlight-current-row :data="dataList" :height="tableHeight" border>
+      <el-table-column type="index" width="50" align="center" label="编号"></el-table-column>
+      <el-table-column label="考核指标" min-width="150" align="center"></el-table-column>
+      <el-table-column label="考核内容和计分细则" min-width="200" align="center" prop="content"></el-table-column>
+      <el-table-column label="小条内容" min-width="150" align="center" prop="littleContent"></el-table-column>
+      <el-table-column label="分值" min-width="60" align="center" prop="points"></el-table-column>
+      <el-table-column label="区牵头单位" min-width="80" align="center" prop="leaderUnit"></el-table-column>
+      <el-table-column label="牵头部门" min-width="80" align="center" prop="leaderDeptList"></el-table-column>
+      <el-table-column label="责任领导" min-width="80" align="center"></el-table-column>
+      <el-table-column label="配合部门" min-width="80" align="center" prop="cooperateDept"></el-table-column>
+      <el-table-column label="责任领导" min-width="80" align="center" prop="cooperateDeptList"></el-table-column>
+      <el-table-column
+        label="操作"
+        width="125"
+        align="center"
+        :key="Math.random()"
+      >
+        <template slot-scope="{ row }">
+          <router-link
+            :to="{name:'segmentation', params:{row, type: 3}}"
+            >分项</router-link
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+     <el-pagination
+        :current-page.sync="page.page"
+        :page-size="page.limit"
+        :total="count"
+        :background="true"
+        layout="total, prev, pager, next, jumper"
+        :pager-count="5"
+        class="ele-pagination-circle"
+        :flat="true"
+        @current-change="getDataList()"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import search from "../search";
+
+export default {
+  components: {
+    search,
+  },
+  data() {
+    return {
+      searchParams: {},
+      dataList: [
+        {quota1:'sdewfdewd',}
+      ],
+      loading: false,
+      form: {},
+      quota1List:[],
+      quota2List:[],
+      count: 0,
+      tableHeight: document.documentElement.clientHeight - 355,
+      page: {
+        page: 1,
+        limit: Math.floor(
+          (document.documentElement.clientHeight - 355 - 45) / 45
+        ),
+      },
+    };
+  },
+  created() {
+    this.getDataList();
+  },
+  methods: {
+    getDataList() {},
+  }
+};
+</script>
+
+<style scoped>
+  a {
+    text-decoration:none;
+    color:#66B1FF;  
+  }
+</style>

src/views/assessingTarget/assessingContent/contentDetail.vue → src/views/second/segmentation/contentDetail.vue

 <template>
-  <div class="content-detail content-box">
-    <div class="base-info">
+  <div class="content-detail content-box ele-body">
+    <el-card shadow="never" element-loading-background="rgba(255, 255, 255, 1)">
+       <div class="base-info">
       <div class="title">基础信息:</div>
       <div class="body">
-        <el-row>
+        <el-row v-if="type==1 || type == 2">
           <el-col :span="5" class="grey">一级指标</el-col>
           <el-col :span="7"></el-col>
           <el-col :span="5" class="grey">二级指标</el-col>
           <el-col :span="7"></el-col>
+        </el-row>
+         <el-row v-if="type==3">
+          <el-col :span="5" class="grey">考核指标</el-col>
+          <el-col :span="19"></el-col>
         </el-row>
         <el-row>
           <el-col :span="5" class="grey">区牵头单位</el-col>
             label="小项内容"
             align="center"
             min-width="150"
-            max-width="250"
+            max-width="200"
           ></el-table-column>
           <el-table-column
             label="分值"
           <el-table-column
             label="牵头部门"
             align="center"
-            width="100"
-          ></el-table-column>
+            width="180"
+          >
+            <treeselect
+            v-model="dataList.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-table-column>
           <el-table-column
             label="责任领导"
             align="center"
           <el-table-column
             label="配合部门"
             align="center"
-            width="100"
-          ></el-table-column>
+            width="180"
+          >
+          <template>
+            <treeselect
+              v-model="dataList.cooperateDept"
+              :options="formatDep"
+              placeholder="请选择配合部门"
+              :defaultExpandLevel="1"
+              :normalizer="
+                (d) => {
+                  return {
+                    id: d.id,
+                    label: d.name,
+                    children:
+                      d.children && d.children.length > 0 ? d.children : undefined,
+                  };
+                }
+              "
+            />
+            </template>
+          </el-table-column>
           <el-table-column
             label="责任领导"
             align="center"
           </el-table-column>
         </el-table>
       </div>
+      <div slot="footer" class="footer">
+        <el-button type="primary" @click="save">确定</el-button>
+        <el-button @click="close">取消</el-button>&nbsp;
+      </div>
     </div>
+    </el-card>
   </div>
 </template>
 
 <script>
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import Treeselect from "@riophae/vue-treeselect";
+import { mapGetters } from "vuex";
 export default {
+  props:{
+    row:{
+      type: Object
+    },
+    type: {
+      type: Number
+    }
+  },
+  components: {
+    Treeselect
+  },
   data() {
     return {
-      dataList: [],
+      dataList: [
+        {}
+      ],
     };
   },
+  computed: {
+    ...mapGetters(["formatDep"]),
+  },
+  created() {
+    
+  },
+  methods: {
+    save() {
+      this.$router.back(-1)
+    },
+    close() {
+      this.$router.back(-1)
+    }
+  }
 };
 </script>
 
   text-align: center;
 }
 .grey {
-  background: #e0e0e0;
+  background: #eeeeee;
+}
+.footer {
+  margin-top: 20px;
+  text-align: center;
 }
 </style>

src/views/second/segmentation/reward.vue

+<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-params="searchParams" />
+    <div class="operating">
+        <el-button size="small" type="primary">导出</el-button>
+    </div>
+    <el-table highlight-current-row :data="dataList" :height="tableHeight" border>
+      <el-table-column type="index" width="50" align="center" label="编号"></el-table-column>
+      <el-table-column label="一级指标" min-width="150" align="center" prop="quota1"></el-table-column>
+      <el-table-column label="二级指标" min-width="150" align="center" prop="quota2"></el-table-column>
+      <el-table-column label="考核内容和计分细则" min-width="200" align="center" prop="content"></el-table-column>
+      <el-table-column label="小条内容" min-width="150" align="center" prop="littleContent"></el-table-column>
+      <el-table-column label="分值" min-width="60" align="center" prop="points"></el-table-column>
+      <el-table-column label="区牵头单位" min-width="80" align="center" prop="leaderUnit"></el-table-column>
+      <el-table-column label="牵头部门" min-width="80" align="center" prop="leaderDeptList"></el-table-column>
+      <el-table-column label="责任领导" min-width="80" align="center"></el-table-column>
+      <el-table-column label="配合部门" min-width="80" align="center" prop="cooperateDept"></el-table-column>
+      <el-table-column label="责任领导" min-width="80" align="center" prop="cooperateDeptList"></el-table-column>
+      <el-table-column
+        label="操作"
+        width="125"
+        align="center"
+        :key="Math.random()"
+      >
+        <template slot-scope="{ row }">
+          <router-link
+            :to="{name:'segmentation', params:{row, type: 2}}"
+            >分项</router-link
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+     <el-pagination
+        :current-page.sync="page.page"
+        :page-size="page.limit"
+        :total="count"
+        :background="true"
+        layout="total, prev, pager, next, jumper"
+        :pager-count="5"
+        class="ele-pagination-circle"
+        :flat="true"
+        @current-change="getDataList()"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import search from "../search";
+
+export default {
+  components: {
+    search,
+  },
+  data() {
+    return {
+      searchParams: {},
+      dataList: [
+        {quota1:'sdewfdewd',}
+      ],
+      loading: false,
+      form: {},
+      quota1List:[],
+      quota2List:[],
+      count: 0,
+      tableHeight: document.documentElement.clientHeight - 355,
+      page: {
+        page: 1,
+        limit: Math.floor(
+          (document.documentElement.clientHeight - 355 - 45) / 45
+        ),
+      },
+    };
+  },
+  created() {
+    this.getDataList();
+  },
+  methods: {
+    getDataList() {},
+  }
+};
+</script>
+
+<style scoped>
+  a {
+    text-decoration:none;
+    color:#66B1FF;  
+  }
+</style>

src/views/second/taskSummary/basicTable.vue

         <el-button size="small" type="primary">导出</el-button>
     </div>
     <el-table highlight-current-row :data="dataList" :height="tableHeight" border>
-      <el-table-column
-        type="selection"
-        width="50"
-        align="center"
-      ></el-table-column>
-      <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
+      <el-table-column type="index" width="50" align="center" label="编号"></el-table-column>
       <el-table-column label="一级指标" min-width="150" align="center" prop="quota1"></el-table-column>
       <el-table-column label="二级指标" min-width="150" align="center" prop="quota2"></el-table-column>
       <el-table-column label="考核内容和计分细则" min-width="200" align="center" prop="content"></el-table-column>
       />
     </el-card>
 
-     <el-dialog
+    <el-dialog
       title="编辑考核内容"
       :visible.sync="showEdit"
       width="400px"
         @submit.native.prevent
         ref="editForm"
       >
+        <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>
 </template>
 
 <script>
-import search from "./search";
+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: [],
+      dataList: [
+        {quota1:'sdewfdewd',}
+      ],
       loading: false,
       showEdit: false,
-      form: {
-        quota1: "",
-        quota2: "",
-        leaderDept: undefined,
-        cooperateDept: undefined,
-        quota: "",
-        content: "",
-        leaderUnit: "",
-      },
+      form: {},
       quota1List:[],
       quota2List:[],
       count: 0,
   created() {
     this.getDataList();
   },
+  computed: {
+    ...mapGetters(["formatDep"]),
+  },
   methods: {
     getDataList() {},
     edit(row) {
-
+      this.showEdit = true
     },
     save() {
-
+      this.showEdit = false
     }
   }
 };

src/views/second/taskSummary/constraint.vue

         <el-button size="small" type="primary">导出</el-button>
     </div>
     <el-table highlight-current-row :data="dataList" :height="tableHeight" border>
-      <el-table-column
-        type="selection"
-        width="50"
-        align="center"
-      ></el-table-column>
-      <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
+      <el-table-column type="index" width="50" align="center" label="编号"></el-table-column>
       <el-table-column label="考核指标" min-width="150" align="center"></el-table-column>
       <el-table-column label="考核内容和计分细则" min-width="200" align="center"></el-table-column>
       <el-table-column label="小条内容" min-width="150" align="center"></el-table-column>
         @current-change="getDataList()"
       />
     </el-card>
+    <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"
+      >
+        <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>
   </div>
 </template>
 
 <script>
-import search from "./search";
+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: [],
+      dataList: [
+        {}
+      ],
       loading: false,
+      showEdit: false,
+      form: {},
       count: 0,
       tableHeight: document.documentElement.clientHeight - 305,
       page: {
   created() {
     this.getDataList();
   },
+  computed: {
+    ...mapGetters(["formatDep"]),
+  },
   methods: {
     getDataList() {},
     edit(row) {
-
+      this.showEdit = true
+    },
+    save() {
+      this.showEdit = false
     }
   }
 };

src/views/second/taskSummary/reward.vue

         <el-button size="small" type="primary">导出</el-button>
     </div>
     <el-table highlight-current-row :data="dataList" :height="tableHeight" border>
-      <el-table-column
-        type="selection"
-        width="50"
-        align="center"
-      ></el-table-column>
-      <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
-      <el-table-column label="一级指标" min-width="150" align="center" prop=""></el-table-column>
+      <el-table-column type="index" width="50" align="center" label="编号"></el-table-column>
+      <el-table-column label="一级指标" min-width="150" align="center" prop="quota1"></el-table-column>
       <el-table-column label="二级指标" min-width="150" align="center" prop=""></el-table-column>
       <el-table-column label="考核内容和计分细则" min-width="200" align="center" prop=""></el-table-column>
       <el-table-column label="小条内容" min-width="150" align="center" prop=""></el-table-column>
         :flat="true"
         @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"
+      >
+        <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 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: [],
+      dataList: [
+        {quota1:'sdewfdewd',}
+      ],
+      showEdit: false,
+      form: {},
       loading: false,
       count: 0,
       tableHeight: document.documentElement.clientHeight - 355,
   created() {
     this.getDataList();
   },
+  computed: {
+    ...mapGetters(["formatDep"]),
+  },
   methods: {
     getDataList() {},
-    edit (row) {
-
+    edit(row) {
+      this.showEdit = true
+    },
+    save() {
+      this.showEdit = false
     }
   }
 };