From 5e6ed09fe5150087e13ea591a33d5a24813e2c27 Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Wed, 3 Jul 2024 16:55:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E7=BB=86=E5=88=86=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8+=E5=AD=97=E6=AE=B5=E4=BF=A1=E6=81=AF=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/manage/labelfieldinfo.js          |   8 +
 src/views/manage/labelfieldinfo/index.vue | 543 ++++++++++++++--------
 src/views/system/partition/index.vue      | 424 +++++++++++++----
 3 files changed, 709 insertions(+), 266 deletions(-)

diff --git a/src/api/manage/labelfieldinfo.js b/src/api/manage/labelfieldinfo.js
index 021ad52..afc46f4 100644
--- a/src/api/manage/labelfieldinfo.js
+++ b/src/api/manage/labelfieldinfo.js
@@ -8,6 +8,14 @@ export function listLabelfieldinfo(query) {
         params: query
     })
 }
+// 左侧查询
+export function taskTypeGrouping(query) {
+    return request({
+        url: '/manage/labelfieldinfo/taskTypeGrouping ',
+        method: 'get',
+        params: query
+    })
+}
 
 // 查询标签字段信息详细
 export function getLabelfieldinfo(id) {
diff --git a/src/views/manage/labelfieldinfo/index.vue b/src/views/manage/labelfieldinfo/index.vue
index 3c27864..fcefa55 100644
--- a/src/views/manage/labelfieldinfo/index.vue
+++ b/src/views/manage/labelfieldinfo/index.vue
@@ -1,185 +1,204 @@
 <template>
   <div class="app-container" ref="layout">
-    <div ref="topform" class="form">
-      <el-form
-        :model="queryParams"
-        ref="queryForm"
-        size="small"
-        :inline="true"
-        v-show="showSearch"
-        label-width="68px"
-      >
-        <el-form-item label="字段名称" prop="fieldName">
-          <el-input
-            v-model="queryParams.fieldName"
-            placeholder="请输入字段名称"
-            clearable
-            @keyup.enter.native="handleQuery"
-          />
-        </el-form-item>
-        <el-form-item label="字段类型" label-width="100px" prop="fieldType">
-          <el-select
-            v-model="queryParams.fieldType"
-            placeholder="请选择字段类型"
-            clearable
+    <el-row :gutter="20">
+      <el-col :span="5" :xs="24">
+        <div class="left" ref="box">
+          <el-collapse
+            v-model="activeNames"
+            @change="handleChange"
+            v-for="(item, index) in list"
+            :key="index"
           >
-            <el-option
-              v-for="item in options"
-              :key="item.dictValue"
-              :label="item.dictLabel"
-              :value="item.dictValue"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="字段编码" prop="fieldCode">
-        <el-input
-          v-model="queryParams.fieldCode"
-          placeholder="请输入字段编码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="字段排序" prop="fieldSort">
-        <el-input
-          v-model="queryParams.fieldSort"
-          placeholder="请输入字段排序"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="字段备注信息" prop="fieldRemark">
-        <el-input
-          v-model="queryParams.fieldRemark"
-          placeholder="请输入字段备注信息"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item> -->
-        <el-form-item>
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            size="mini"
-            @click="handleQuery"
-            >搜索</el-button
+            <el-collapse-item :name="item.taskTypeId">
+              <template slot="title">
+                {{ item.taskTypeName }}
+                <!-- {{item}} -->
+              </template>
+              <el-table :data="item.taskPartitionDictList" style="width: 100%" :show-header="false"   >
+                <el-table-column prop="" label="">
+                  <template slot-scope="scope">
+                    <!-- <div
+                      class="zljcard"
+                      v-for="(aitem, aindex) in scope.row.items"
+                      :key="aindex"
+                    > -->
+                    <div @click="clickitem(scope.row)" :class="itemid == scope.row.id ? 'allactive' : 'collitem'" highlight-current-row>
+                      {{ scope.row.taskPartitionName }}
+                    </div>
+                    <!-- </div> -->
+                  </template>
+                </el-table-column>
+                <!-- <template slot="title">
+                  {{ item.name }}
+                </template>
+                <div v-for="(aitem, aindex) in item.items" :key="aindex">
+                  <div class="collitem">{{ aitem.keyname }}</div>
+                </div> -->
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </el-col>
+      <el-col :span="19" :xs="24">
+        <div ref="topform" class="form">
+          <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+            label-width="68px"
           >
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-            >重置</el-button
-          >
-        </el-form-item>
-      </el-form>
-    </div>
-    <div ref="mb8" class="mb8">
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="handleAdd"
-            v-hasPermi="['manage:labelfieldinfo:add']"
-            >新增</el-button
-          >
-        </el-col>
-        <el-col :span="1.5">
-          <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['manage:labelfieldinfo:edit']"
-            >修改</el-button
-          >
-        </el-col>
-        <el-col :span="1.5">
-          <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['manage:labelfieldinfo:remove']"
-            >删除</el-button
-          >
-        </el-col>
-        <right-toolbar
-          :showSearch.sync="showSearch"
-          @queryTable="getList"
-        ></right-toolbar>
-      </el-row>
-    </div>
-    <div ref="table">
-      <el-table
-        :max-height="maxTableHeight"
-        v-loading="loading"
-        :data="labelfieldinfodata"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="字段名称" align="center" prop="fieldName" />
-        <el-table-column label="字段编码" align="center" prop="fieldCode" />
-        <el-table-column label="字段类型" align="center" prop="fieldType">
-          <template slot-scope="scope">
-            {{ scope.row.fieldType == "STRING" ? "默认字符串" : "" }}
-            {{ scope.row.fieldType == "INT" ? "整型" : "" }}
-            {{ scope.row.fieldType == "DECIMAL" ? "数值" : "" }}
-            {{ scope.row.fieldType == "ENUM" ? "枚举" : "" }}
-          </template>
-        </el-table-column>
-        <el-table-column label="字段排序" align="center" prop="fieldSort" />
-        <el-table-column
-          label="字段备注信息"
-          align="center"
-          prop="fieldRemark"
-          :show-overflow-tooltip="true"
-        />
+            <el-form-item label="字段名称" prop="fieldName">
+              <el-input
+                v-model="queryParams.fieldName"
+                placeholder="请输入字段名称"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="字段类型" label-width="100px" prop="fieldType">
+              <el-select
+                v-model="queryParams.fieldType"
+                placeholder="请选择字段类型"
+                clearable
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.dictValue"
+                  :label="item.dictLabel"
+                  :value="item.dictValue"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
 
-        <el-table-column
-          label="任务细分"
-          align="center"
-          prop="taskPartitionDictName"
-          :show-overflow-tooltip="true"
-        />
-        <el-table-column
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(scope.row)"
-              v-hasPermi="['manage:labelfieldinfo:edit']"
-              >修改</el-button
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQuery"
+                >搜索</el-button
+              >
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div ref="mb8" class="mb8">
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['manage:labelfieldinfo:add']"
+                >新增</el-button
+              >
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="success"
+                plain
+                icon="el-icon-edit"
+                size="mini"
+                :disabled="single"
+                @click="handleUpdate"
+                v-hasPermi="['manage:labelfieldinfo:edit']"
+                >修改</el-button
+              >
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="danger"
+                plain
+                icon="el-icon-delete"
+                size="mini"
+                :disabled="multiple"
+                @click="handleDelete"
+                v-hasPermi="['manage:labelfieldinfo:remove']"
+                >删除</el-button
+              >
+            </el-col>
+            <right-toolbar
+              :showSearch.sync="showSearch"
+              @queryTable="getList"
+            ></right-toolbar>
+          </el-row>
+        </div>
+        <div ref="table">
+          <el-table
+            :max-height="maxTableHeight"
+            v-loading="loading"
+            :data="labelfieldinfodata"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="字段名称" align="center" prop="fieldName" />
+            <el-table-column label="字段编码" align="center" prop="fieldCode" />
+            <el-table-column label="字段类型" align="center" prop="fieldType">
+              <template slot-scope="scope">
+                {{ scope.row.fieldType == "STRING" ? "默认字符串" : "" }}
+                {{ scope.row.fieldType == "INT" ? "整型" : "" }}
+                {{ scope.row.fieldType == "DECIMAL" ? "数值" : "" }}
+                {{ scope.row.fieldType == "ENUM" ? "枚举" : "" }}
+              </template>
+            </el-table-column>
+            <el-table-column label="字段排序" align="center" prop="fieldSort" />
+            <el-table-column
+              label="字段备注信息"
+              align="center"
+              prop="fieldRemark"
+              :show-overflow-tooltip="true"
+            />
+
+            <el-table-column
+              label="任务细分"
+              align="center"
+              prop="taskPartitionDictName"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="操作"
+              align="center"
+              class-name="small-padding fixed-width"
             >
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-              v-hasPermi="['manage:labelfieldinfo:remove']"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['manage:labelfieldinfo:edit']"
+                  >修改</el-button
+                >
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['manage:labelfieldinfo:remove']"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
-    <myPagination
-      v-show="total > 0"
-      :total="total"
-      :pageSize="queryParams.pageSize"
-      :indexFromWrap="queryParams.pageNum"
-      @updateCPage="updateCPage"
-    ></myPagination>
+        <myPagination
+          v-show="total > 0"
+          :total="total"
+          :pageSize="queryParams.pageSize"
+          :indexFromWrap="queryParams.pageNum"
+          @updateCPage="updateCPage"
+        ></myPagination>
+      </el-col>
+    </el-row>
 
     <!-- 添加标签字段信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
@@ -511,8 +530,7 @@
         :max-height="maxTableHeight"
         v-loading="loading"
         :data="partitionList"
-        @cell-dblclick="nurseclickzx" 
-
+        @cell-dblclick="nurseclickzx"
         @selection-change="handleSelectionChange"
       >
         <el-table-column label="请选择" width="100" align="center">
@@ -624,7 +642,7 @@
         :max-height="maxTableHeight"
         v-loading="loading"
         :data="taskTypeList"
-        @cell-dblclick="nurseclicktype" 
+        @cell-dblclick="nurseclicktype"
         @selection-change="handleSelectionChange"
       >
         <el-table-column label="请选择" width="100" align="center">
@@ -678,7 +696,7 @@
 </template>
 
 <script>
-import { listLabelfieldinfo, getLabelfieldinfo, delLabelfieldinfo, addLabelfieldinfo, updateLabelfieldinfo } from "@/api/manage/labelfieldinfo";
+import { listLabelfieldinfo, getLabelfieldinfo, delLabelfieldinfo, addLabelfieldinfo, updateLabelfieldinfo,taskTypeGrouping } from "@/api/manage/labelfieldinfo";
 import { listPartition } from "@/api/system/partition";
 import { getAgencytype } from "@/api/system/agency";
 import { listTaskType } from "@/api/system/taskType";
@@ -688,6 +706,80 @@ export default {
   name: "Labelfieldinfo",
   data() {
     return {
+      itemid:null,
+
+      list:[],
+      // listdata: {
+      //   list: [
+      //     {
+      //       name: '一致性 Consistency',
+      //       id: '1',
+      //       items: [{
+      //         lable: '1',
+      //         keyname: '与现实生活一致'
+      //       },
+      //       {
+      //         lable: '2',
+      //         keyname: '在界面中一致'
+      //       }
+      //       ]
+      //     },
+      //     {
+      //       name: '一致性',
+      //       id: '2',
+
+      //       items: [{
+      //         lable: '3',
+      //         keyname: '与现实生活一致'
+      //       },
+      //       {
+      //         lable: '4',
+      //         keyname: '在界面中一致'
+      //       }, {
+      //         lable: '5',
+      //         keyname: '在界面中一致'
+      //       }
+      //       ]
+      //     },
+      //     {
+      //       name: '一致性',
+      //       id: '3',
+
+      //       items: [{
+      //         lable: '6',
+      //         keyname: '与现实生活一致'
+      //       },
+      //       {
+      //         lable: '7',
+      //         keyname: '在界面中一致'
+      //       }, {
+      //         lable: '8',
+      //         keyname: '在界面中一致'
+      //       }
+      //       ]
+      //     },
+      //     {
+      //       name: '一致性',
+      //       id: '4',
+
+      //       items: [{
+      //         lable: '6',
+      //         keyname: '与现实生活一致'
+      //       },
+      //       {
+      //         lable: '7',
+      //         keyname: '在界面中一致'
+      //       }, {
+      //         lable: '8',
+      //         keyname: '在界面中一致'
+      //       }
+      //       ]
+      //     },
+
+      //   ]
+
+      // },
+      activeNames: [],
       innerVisible: false,//任务细分
       // 任务细分字典表格数据
       partitionList: [],
@@ -835,17 +927,34 @@ export default {
         // ],
 
       },
+      currentRow:null,
     };
   },
   created() {
     this.getList();
     this.infolistword();
+    this.getListleft();
+
   },
   mounted() {
     this.getMaxTableHeight()
-    this.screenChange()
+    // this.screenChange()
+
   },
   methods: {
+    // 左侧点击事件
+    clickitem(row){
+      console.log(row,'row');
+      this.queryParams.taskPartitionDictId=row.id
+      this.itemid = this.queryParams.taskPartitionDictId;
+    this.getList();
+
+
+
+    },
+    handleChange(val) {
+      console.log(val);
+    },
     updateCPage(index, size) {
       this.queryParams.pageNum = index
       this.queryParams.pageSize = size
@@ -868,6 +977,22 @@ export default {
         this.options = res.data;
       });
     },
+    // 左侧查询
+    getListleft() {
+      this.loading = true;
+      taskTypeGrouping().then(response => {
+        console.log(response,'response')
+        this.list = response.data;
+              this.list.forEach(e => {
+        this.activeNames.push(e.taskTypeId);
+        console.log(this.activeNames, 'this.activeNames')
+
+      })
+        // this.totaltype = response.total;
+        // this.loading = false;
+      });
+    },
+
     /** 查询任务类型字典列表 */
     getListType() {
       this.loading = true;
@@ -897,15 +1022,15 @@ export default {
     },
     // 任务细分弹框
     clickinnerVisible(aitem, index) {
-      if (this.taskTypeId == ''|| !aitem.taskTypeId) {
+      if (this.taskTypeId == '' || !aitem.taskTypeId) {
         this.$modal.msgError("请先选择任务类型");
       } else {
         this.nnerVisibleindex = index;
         this.taskPartitionDictId = aitem.taskPartitionDictId ? aitem.taskPartitionDictId : '';
         this.innerVisible = true;
       }
-      if(aitem.taskTypeId){
-      this.queryParamstask.taskTypeId=aitem.taskTypeId
+      if (aitem.taskTypeId) {
+        this.queryParamstask.taskTypeId = aitem.taskTypeId
       }
       this.getListpartit();
 
@@ -965,10 +1090,10 @@ export default {
           row.taskTypeName;
         this.form.labelFieldInfoList[this.nnerVisibleindex].taskTypeId =
           row.id;
-          this.form.labelFieldInfoList[this.nnerVisibleindex].taskPartitionDictName ='请选择任务细分',
-        this.form.labelFieldInfoList[this.nnerVisibleindex].taskPartitionDictId = '';
+        this.form.labelFieldInfoList[this.nnerVisibleindex].taskPartitionDictName = '请选择任务细分',
+          this.form.labelFieldInfoList[this.nnerVisibleindex].taskPartitionDictId = '';
         // this.form.taskPartitionDictName = '请选择任务细分',
-          this.taskPartitionDictId = '';
+        this.taskPartitionDictId = '';
 
       } else if (this.titleup == '修改标签字段信息') {
         this.form.taskTypeName = row.taskTypeName;
@@ -1002,7 +1127,7 @@ export default {
         fieldCode: null,
 
       };
-      this.taskTypeId=''
+      this.taskTypeId = ''
       if (this.form.labelFieldInfoList.length == 5) {
         this.$message.error("最多批量添加5条");
       } else {
@@ -1050,10 +1175,14 @@ export default {
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
+      this.queryParams.taskPartitionDictId=null;
       this.getList();
+      // this.getListleft()
     },
     /** 重置按钮操作 */
     resetQuery() {
+      this.itemid=null;
+
       this.resetForm("queryForm");
       this.handleQuery();
     },
@@ -1212,6 +1341,46 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+/* 设置被点击行的背景颜色 */
+
+
+// ::v-deep .el-table__body tr.current-row>td{
+//     background-color: #92cbf1!important;
+//      color: #fff;
+//   }
+ ::v-deep .el-collapse-item__header{
+  font-size: 15px;
+    font-weight: 600;
+ }
+::v-deep .el-collapse-item__wrap {
+  border-bottom: none;
+}
+
+::v-deep table td.el-table__cell:last-child {
+  // border-bottom: 1px solid #dfe6ec;
+  border-bottom: none;
+  }
+  ::v-deep .el-table::before{
+    height: 0px !important;
+  }
+.left {
+  height: calc(100vh - 119px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  .collitem {
+    // width: 100%;
+    // height: 45px;
+    // padding: 10px;
+    margin-left: 15px;
+  }
+  .allactive{
+    width: 100%;
+    height: 45px;
+    padding: 10px;
+    background: #e8f4ff;
+
+  }
+}
 ::v-deep .el-dialog__body {
   padding-bottom: 60px !important;
 }
diff --git a/src/views/system/partition/index.vue b/src/views/system/partition/index.vue
index 9206abf..0f637d1 100644
--- a/src/views/system/partition/index.vue
+++ b/src/views/system/partition/index.vue
@@ -1,66 +1,209 @@
 <template>
   <div class="app-container" ref="layout">
-    <div ref="topform" class="form">
-      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-        <el-form-item label="任务细分名称" prop="taskPartitionName">
-          <el-input v-model="queryParams.taskPartitionName" placeholder="请输入任务细分名称" clearable
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="任务细分编码" prop="taskPartitionCode">
-          <el-input v-model="queryParams.taskPartitionCode" placeholder="请输入任务细分编码" clearable
-            @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div ref="mb8" class="mb8">
-      <el-row :gutter="10" class="">
-        <el-col :span="1.5">
-          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-            v-hasPermi="['system:partition:add']">新增</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
-            v-hasPermi="['system:partition:edit']">修改</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
-            v-hasPermi="['system:partition:remove']">删除</el-button>
-        </el-col>
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-    </div>
-    <div ref="table">
-      <el-table :max-height="maxTableHeight" v-loading="loading" :data="partitionList"
-        @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
-        <!-- <el-table-column label="任务类型表id" align="center" prop="taskTypeId" /> -->
-        <el-table-column label="任务类型名称" align="center" prop="taskTypeName" />
-        <el-table-column label="任务细分名称" align="center" prop="taskPartitionName" />
-        <el-table-column label="任务细分编码" align="center" prop="taskPartitionCode" />
-        <el-table-column label="二级分类描述" align="center" prop="secondClassifyDescribe" :show-overflow-tooltip="true" />
-        <el-table-column label="执行时间" align="center" prop="executionTime" width="180">
-        </el-table-column>
-        <el-table-column label="任务细分排序" align="center" prop="taskPartitionSort" />
-        <el-table-column label="任务细分备注" align="center" prop="taskPartitionRemark" :show-overflow-tooltip="true" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-              v-hasPermi="['system:partition:edit']">修改</el-button>
-            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-              v-hasPermi="['system:partition:remove']">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+    <el-row :gutter="20">
+      <el-col :span="5" :xs="24">
+        <div class="left" ref="box">
+          <div class="name">任务类型名称</div>
+          <div>
+            <el-input
+              v-model="name"
+              placeholder="请输入科室名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
+          </div>
+          <div class="listitem">
+            <div
+              :class="taskid == null ? 'allactive' : 'all'"
+              @click="itemdata()"
+            >
+              全部
+            </div>
+            <!-- <span class="count">{{ count }}</span> -->
+          </div>
+          <div
+            class="listitem"
+            v-for="(item, index) in options"
+            :key="index"
+            @click="itemdata(item)"
+          >
+            <div :class="taskid == item.id ? 'allactive' : 'all'">
+              {{ item.taskTypeName }}
+            </div>
+            <!-- <span class="count">{{ item.countNum }}</span> -->
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="19" :xs="24">
+        <div ref="topform" class="form">
+          <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            v-show="showSearch"
+            label-width="100px"
+          >
+            <el-form-item label="任务细分名称" prop="taskPartitionName">
+              <el-input
+                v-model="queryParams.taskPartitionName"
+                placeholder="请输入任务细分名称"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="任务细分编码" prop="taskPartitionCode">
+              <el-input
+                v-model="queryParams.taskPartitionCode"
+                placeholder="请输入任务细分编码"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQuery"
+                >搜索</el-button
+              >
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+        <div ref="mb8" class="mb8">
+          <el-row :gutter="10" class="">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['system:partition:add']"
+                >新增</el-button
+              >
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="success"
+                plain
+                icon="el-icon-edit"
+                size="mini"
+                :disabled="single"
+                @click="handleUpdate"
+                v-hasPermi="['system:partition:edit']"
+                >修改</el-button
+              >
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="danger"
+                plain
+                icon="el-icon-delete"
+                size="mini"
+                :disabled="multiple"
+                @click="handleDelete"
+                v-hasPermi="['system:partition:remove']"
+                >删除</el-button
+              >
+            </el-col>
+            <right-toolbar
+              :showSearch.sync="showSearch"
+              @queryTable="getList"
+            ></right-toolbar>
+          </el-row>
+        </div>
+        <div ref="table">
+          <el-table
+            :max-height="maxTableHeight"
+            v-loading="loading"
+            :data="partitionList"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" align="center" />
+            <!-- <el-table-column label="主键id" align="center" prop="id" /> -->
+            <!-- <el-table-column label="任务类型表id" align="center" prop="taskTypeId" /> -->
+            <el-table-column
+              label="任务细分名称"
+              align="center"
+              prop="taskPartitionName"
+            />
+            <el-table-column
+              label="任务类型名称"
+              align="center"
+              prop="taskTypeName"
+            />
+           
+            <el-table-column
+              label="任务细分编码"
+              align="center"
+              prop="taskPartitionCode"
+            />
+            <el-table-column
+              label="二级分类描述"
+              align="center"
+              prop="secondClassifyDescribe"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="执行时间"
+              align="center"
+              prop="executionTime"
+              width="180"
+            >
+            </el-table-column>
+            <el-table-column
+              label="任务细分排序"
+              align="center"
+              prop="taskPartitionSort"
+            />
+            <el-table-column
+              label="任务细分备注"
+              align="center"
+              prop="taskPartitionRemark"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="操作"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['system:partition:edit']"
+                  >修改</el-button
+                >
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['system:partition:remove']"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
-    <myPagination v-show="total > 0" :total="total" :pageSize="queryParams.pageSize"
-      :indexFromWrap="queryParams.pageNum" @updateCPage="updateCPage"></myPagination>
+        <myPagination
+          v-show="total > 0"
+          :total="total"
+          :pageSize="queryParams.pageSize"
+          :indexFromWrap="queryParams.pageNum"
+          @updateCPage="updateCPage"
+        ></myPagination>
+      </el-col>
+    </el-row>
 
     <!-- 添加或修改任务细分字典对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -68,44 +211,94 @@
         <!-- <el-form-item label="任务类型表id" prop="taskTypeId">
           <el-input v-model="form.taskTypeId" placeholder="请输入任务类型表id" />
         </el-form-item> -->
-        <el-form-item label="任务细分编码" prop="taskPartitionCode" v-if="form.taskPartitionCode">
-          <el-input disabled v-model="form.taskPartitionCode" placeholder="请输入任务细分编码" />
+        <el-form-item
+          label="任务细分编码"
+          prop="taskPartitionCode"
+          v-if="form.taskPartitionCode"
+        >
+          <el-input
+            disabled
+            v-model="form.taskPartitionCode"
+            placeholder="请输入任务细分编码"
+          />
         </el-form-item>
         <el-form-item label="任务类型名称" prop="taskTypeName">
-          <el-select v-model="form.taskTypeId" placeholder="请选择" @change="change" style="width: 350px">
-            <el-option v-for="item in options" :key="item.id" :label="item.taskTypeName" :value="item.id">
+          <el-select
+            v-model="form.taskTypeId"
+            placeholder="请选择"
+            @change="change"
+            style="width: 350px"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.taskTypeName"
+              :value="item.id"
+            >
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="任务细分名称" prop="taskPartitionName">
-          <el-input v-model="form.taskPartitionName" placeholder="请输入任务细分名称" />
+          <el-input
+            v-model="form.taskPartitionName"
+            placeholder="请输入任务细分名称"
+          />
         </el-form-item>
         <el-form-item label="执行时间" prop="executionTime">
-          <el-time-select style="width: 350px" placeholder="执行时间" v-model="form.executionTime" :picker-options="{
-        start: '08:00',
-        step: '00:30',
-        end: '23:30',
-      }"></el-time-select>
+          <el-time-select
+            style="width: 350px"
+            placeholder="执行时间"
+            v-model="form.executionTime"
+            :picker-options="{
+              start: '08:00',
+              step: '00:30',
+              end: '23:30',
+            }"
+          ></el-time-select>
         </el-form-item>
         <el-form-item label="任务细分排序" prop="taskPartitionSort">
-          <el-input-number v-model="form.taskPartitionSort" controls-position="right" :min="0" placeholder="请输入任务细分排序"
-            style="width: 350px" />
+          <el-input-number
+            v-model="form.taskPartitionSort"
+            controls-position="right"
+            :min="0"
+            placeholder="请输入任务细分排序"
+            style="width: 350px"
+          />
         </el-form-item>
         <el-form-item label="任务细分备注" prop="taskPartitionRemark">
-          <el-input v-model="form.taskPartitionRemark" placeholder="请输入任务细分备注" />
+          <el-input
+            v-model="form.taskPartitionRemark"
+            placeholder="请输入任务细分备注"
+          />
         </el-form-item>
         <el-form-item label="模板类型">
-          <el-select v-model="form.templateType" placeholder="请选择模板类型" style="width: 350px;">
-            <el-option v-for="dict in dict.type.template_type" :key="dict.value" :label="dict.label"
-              :value="dict.value"></el-option>
+          <el-select
+            v-model="form.templateType"
+            placeholder="请选择模板类型"
+            style="width: 350px"
+          >
+            <el-option
+              v-for="dict in dict.type.template_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="二级分类描述" prop="secondClassifyDescribe">
-          <el-input type="textarea" v-model="form.secondClassifyDescribe" placeholder="请输入二级分类描述" />
+          <el-input
+            type="textarea"
+            v-model="form.secondClassifyDescribe"
+            placeholder="请输入二级分类描述"
+          />
         </el-form-item>
         <div class="textareanew">
           <el-form-item label="文本类型" prop="taskPartitionContent">
-            <el-input type="textarea" v-model="form.taskPartitionContent" placeholder="请输入文本类型" />
+            <el-input
+              type="textarea"
+              v-model="form.taskPartitionContent"
+              placeholder="请输入文本类型"
+            />
           </el-form-item>
         </div>
       </el-form>
@@ -119,12 +312,15 @@
 
 <script>
 import { listPartition, getPartition, delPartition, addPartition, updatePartition, selectTaskTypeList } from "@/api/system/partition";
+import { listTaskType} from "@/api/system/taskType";
 
 export default {
   name: "Partition",
   dicts: ['template_type'],
   data() {
     return {
+      name: '',
+      taskid: null,
       maxTableHeight: undefined,
       // 遮罩层
       loading: true,
@@ -157,6 +353,13 @@ export default {
         taskPartitionSort: null,
         taskPartitionRemark: null,
       },
+      querydepartmen: {
+        taskTypeName: "",
+
+        // pageNum: 1,
+        // pageSize: 10,
+
+      },
       // 表单参数
       form: {},
       options: [],
@@ -174,6 +377,14 @@ export default {
       }
     };
   },
+  watch: {
+    name(val) {
+      console.log(val,'name')
+      this.querydepartmen.taskTypeName = val
+      this.getlistselect();
+    },
+
+  },
   created() {
     this.getList();
     this.getlistselect();
@@ -197,9 +408,22 @@ export default {
         this.loading = false;
       });
     },
+    itemdata(item) {
+      if(item){
+        this.taskid = item.id
+      this.queryParams.taskTypeId = item.id
+
+      }else{
+        this.taskid = null
+
+      this.queryParams.taskTypeId = null
+      }
+
+      this.getList()
+    },
     // 任务类型名称下拉框
     getlistselect() {
-      selectTaskTypeList().then(response => {
+      selectTaskTypeList(this.querydepartmen).then(response => {
         this.options = response.data;
       });
     },
@@ -241,6 +465,8 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.taskid = null;
+      this.queryParams.taskTypeId=null
       this.handleQuery();
     },
     // 多选框选中数据
@@ -253,6 +479,7 @@ export default {
     handleAdd() {
       this.reset();
       this.form.executionTime = null;
+      this.querydepartmen.taskTypeName=null,
       this.getlistselect();
       this.open = true;
       this.title = "添加任务细分字典";
@@ -339,4 +566,43 @@ export default {
 .textareanew .el-textarea__inner {
   height: 100px;
 }
+.left {
+  height: calc(100vh - 119px);
+  overflow: auto;
+
+  .name {
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+
+  .listitem {
+    width: 100%;
+    height: 50px;
+    border-bottom: 1px solid #dcdfe6;
+
+    .count {
+      display: inline-block;
+      position: relative;
+      // right: -172px;
+      left: 210px;
+      color: #a4a6aa;
+      top: -35px;
+      font-size: 13px;
+    }
+
+    .all {
+      height: 50px;
+      line-height: 50px;
+      padding-left: 13px;
+    }
+
+    .allactive {
+      background: #e8f4ff;
+      height: 50px;
+      line-height: 50px;
+      padding-left: 13px;
+      border-left: 3px solid #4d9de7;
+    }
+  }
+}
 </style>