From 9e0abf0f3a2ad5eb1989fd44daadfaffb0100638 Mon Sep 17 00:00:00 2001
From: xzg <4727863@qq.com>
Date: Thu, 25 Jan 2024 14:23:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A7=E6=9E=B6=E4=BF=A1=E6=81=AF=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/classify/classify.js                  |  46 ++
 src/option/supervise/supervise.js             | 213 +++++++++
 .../goodsShelf/basicdataGoodsShelf.vue        |   5 +
 src/views/supervise/IndicatorList.vue         | 439 ++++++++++++++++++
 src/views/supervise/classify.vue              | 305 ++++++++++++
 src/views/supervise/management.vue            | 313 +++++++++++++
 6 files changed, 1321 insertions(+)
 create mode 100644 src/api/classify/classify.js
 create mode 100644 src/option/supervise/supervise.js
 create mode 100644 src/views/supervise/IndicatorList.vue
 create mode 100644 src/views/supervise/classify.vue
 create mode 100644 src/views/supervise/management.vue

diff --git a/src/api/classify/classify.js b/src/api/classify/classify.js
new file mode 100644
index 00000000..dde9bc00
--- /dev/null
+++ b/src/api/classify/classify.js
@@ -0,0 +1,46 @@
+import request from '@/axios';
+
+// 分类列表
+export const $_Getclassify = (params) => {
+    return request({
+      url: '/api/logpm-supervise/classify/list',
+      method: 'get',
+      params
+    })
+  }
+  
+  // 分类新增
+  export const $_newlyadded = (data) => {
+    return request({
+      url: '/api/logpm-supervise/classify/submit',
+      method: 'post',
+      data
+    })
+  }
+  
+//分类删除
+
+export const $_newlyremove = (data) => {
+    return request({
+      url: '/api/logpm-supervise/classify/remove',
+      method: 'post',
+      data
+    })
+  }
+
+//   获取指标分类
+export const $_selectParentCalssifyList = (data) => {
+    return request({
+      url: '/api/logpm-supervise/classify/selectParentCalssifyList',
+      method: 'post',
+      data
+    })
+  }
+// 指标管理新增
+export const $_classifyAddChild = (data) => {
+    return request({
+      url: '/api/logpm-supervise/classify/addChild',
+      method: 'post',
+      data
+    })
+  }
diff --git a/src/option/supervise/supervise.js b/src/option/supervise/supervise.js
new file mode 100644
index 00000000..6b6001a4
--- /dev/null
+++ b/src/option/supervise/supervise.js
@@ -0,0 +1,213 @@
+export const classificationColumnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+
+  {
+    prop: 'name',
+    label: '分类名称',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'description',
+    label: '分类描述',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'description',
+    label: '备注',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: '',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '80',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];
+
+//  指标列表
+export const IndicatorColumnList = [
+  {
+    prop: '',
+    label: '复选框',
+    type: 0,
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: '',
+    label: '序号',
+    type: 12,
+    values: '',
+    width: 55,
+    fixed: true,
+  },
+  {
+    prop: 'name',
+    label: '指标编号',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'description',
+    label: '指标名称',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'description',
+    label: '指标分类',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+
+  {
+    prop: 'createTime',
+    label: '考核部门',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'createTime',
+    label: '考核分数',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'createTime',
+    label: '描述',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'createTime',
+    label: '照片',
+    type: 1,//7
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'createTime',
+    label: '附件',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'createTime',
+    label: '考核人',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: 'createTime',
+    label: '考评事件',
+    type: 1,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: false,
+    sortable: true,
+    head: false,
+  },
+  {
+    prop: '',
+    label: '操作',
+    type: 6,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: 'right',
+    sortable: false,
+  },
+];
diff --git a/src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelf.vue b/src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelf.vue
index ca2cfa25..eced094b 100644
--- a/src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelf.vue
+++ b/src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelf.vue
@@ -21,6 +21,10 @@
                     />
                     <!--                  </el-cascader>-->
                   </el-form-item>
+
+
+
+
                   <el-form-item label="货架名称" prop="info">
                     <el-input v-model="query.goodsShelfName" placeholder="请输入货架名称" />
                   </el-form-item>
@@ -203,6 +207,7 @@
                   v-model="form.goodsAreaId"
                   clearable
                   placeholder="请选择货区"
+                  filterable
                   style="width: 88%"
                 >
                   <el-option
diff --git a/src/views/supervise/IndicatorList.vue b/src/views/supervise/IndicatorList.vue
new file mode 100644
index 00000000..6fc8845c
--- /dev/null
+++ b/src/views/supervise/IndicatorList.vue
@@ -0,0 +1,439 @@
+<template>
+  <basic-container>
+    <!-- 首页表格 -->
+
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <el-row v-if="search" class="el_header_top">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="searchFrom" class="el-fr-d">
+          <!-- 查询按钮 -->
+          <div class="el_seaTop"> 
+          <el-form-item label="考核部门：">
+            <el-select v-model="searchFrom.a" class="m-2" placeholder="请选择考核部门" style="width: 240px">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="指标类型：">
+            <el-select v-model="searchFrom.b" class="m-2" placeholder="请选择指标类型" style="width: 240px">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="填写时间：">
+            <el-date-picker
+              v-model="searchFrom.c"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :size="size"
+            />
+          </el-form-item>
+        </div>
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
+            <!-- <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button> -->
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <!-- 控件模块 -->
+      <el-row>
+        <div class="avue-crud__header">
+          <!-- 头部左侧按钮模块 -->
+          <div class="avue-crud__left">
+            <el-button type="primary" @click="AddCategory">
+              <el-icon><Plus /></el-icon>新 增</el-button
+            >
+
+            <el-button type="primary" @click="BatchDelete">
+              <el-icon><Plus /></el-icon>批量删除</el-button
+            >
+          </div>
+          <!-- 头部右侧按钮模块 -->
+          <div class="avue-crud__right">
+            <el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
+            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+            <el-button icon="Search" @click="searchHide" circle></el-button>
+          </div>
+        </div>
+      </el-row>
+
+      <!-- 首页表格 -->
+      <el-row>
+        <!-- 列表模块 -->
+        <tablecmt
+          :columnList="IndicatorColumnList"
+          :tableData="classificationdata"
+          :loading="loadingclassification"
+          @inputTxt="inputsc"
+          @timeCheck="timesc"
+          @btnCheck="btnsc"
+          @selectCheck="selectsc"
+          @selection="selectionChange"
+        >
+          <template #default="slotProps">
+            <template v-if="slotProps.scope.column.label === '操作'">
+              <div class="ElBtnClass">
+                <el-button text @click="ClassificationIndicatorView(slotProps.scope)"
+                  >查看</el-button
+                >
+                <el-button text @click="ClassificationDditing(slotProps.scope)">编辑</el-button>
+                <el-button text type="primary" @click="CategoryDeletion(slotProps.scope)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
+          </template>
+        </tablecmt>
+      </el-row>
+
+      <!-- 分页模块 -->
+      <el-row class="el-fy">
+        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+          <div></div>
+          <el-pagination
+            align="right"
+            background
+            @size-change="sizeChange"
+            @current-change="currentChange"
+            :current-page="currentPage"
+            :page-sizes="[30, 50, 80, 120]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </el-row>
+    </div>
+
+    <el-dialog v-model="newlyAdded" title="查看详情" width="60%">
+      <el-form
+        v-loading="loadingAddPopup"
+        :model="lassificationform"
+        label-width="70px"
+        class="el_listForm"
+      >
+        <el-form-item label="指标名称">
+          <el-input v-model="lassificationform.name" placeholder="暂无" />
+        </el-form-item>
+
+        <el-form-item label="指标分类">
+          <el-input
+            v-model="lassificationform.description"
+            :rows="2"
+            type="textarea"
+            placeholder="暂无"
+          />
+        </el-form-item>
+
+        <el-form-item label="考核部门">
+          <el-input v-model="lassificationform.name" placeholder="暂无" />
+        </el-form-item>
+
+        <el-form-item label="考核分数">
+          <el-input v-model="lassificationform.name" placeholder="暂无" />
+        </el-form-item>
+
+        <el-form-item label="描述">
+          <el-input v-model="lassificationform.name" placeholder="暂无" />
+        </el-form-item>
+
+        <el-form-item label="附件">
+          <el-input v-model="lassificationform.name" placeholder="暂无" />
+        </el-form-item>
+
+        <el-form-item label="考核人">
+          <el-input v-model="lassificationform.name" placeholder="暂无" />
+        </el-form-item>
+
+        <el-form-item label="考评时间">
+          <el-input v-model="lassificationform.name" placeholder="暂无" />
+        </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="照片">
+          <div class="demo-image__preview">
+            <el-image
+              style="width: 100px; height: 100px"
+              :src="url"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+              :preview-src-list="srcList"
+              :initial-index="4"
+              fit="cover"
+            />
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="newlyAdded = false">取消</el-button>
+          <el-button :disabled="loadingAddPopup" type="primary" @click="newlyAddedFn">
+            确定
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </basic-container>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @setcolum="setnewcolum"
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="IndicatorColumnList"
+  ></edittablehead>
+</template>
+
+<script setup>
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { ref, reactive, computed, onMounted } from 'vue';
+import { IndicatorColumnList } from '@/option/supervise/supervise.js';
+import {
+  $_Getclassify,
+  $_newlyadded,
+  $_newlyremove,
+  $_classifyAddChild,
+} from '@/api/classify/classify';
+const loadingclassification = ref(false); //指标分类加载效果
+const classificationdata = ref([]); //指标分类数据
+const current = ref(1); //当前页
+const total = ref(10); //总页数
+const pageSize = ref(50);
+const lassificationform = ref({}); //分类表单
+const title = ref(true); //标题
+const EditID = ref(true); //编辑需要的ID
+const newlyAdded = ref(true); //新增弹窗
+const loadingAddPopup = ref(false); //弹窗加载
+const selectionList = ref([]); //选中数据
+const searchFrom = ref({}); //搜索表单
+const search = ref(true); //头部搜索
+const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg';
+const srcList = [
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+];
+const onLoad = () => {
+  let data = {
+    current: current.value,
+    size: pageSize.value,
+    isPid: 1,
+  };
+  loadingclassification.value = true; //开启加载效果
+  $_Getclassify(data)
+    .then(res => {
+      console.log(res);
+      if (res.data.data.records) {
+        classificationdata.value = res.data.data.records; //数据
+      } else {
+      }
+
+      total.value = res.data.data.total; //总页数
+    })
+    .catch(res => {})
+    .finally(() => {
+      loadingclassification.value = false; //开启加载效果
+    });
+  classificationdata.value = [{}];
+};
+onLoad();
+// 页码
+const sizeChange = () => {};
+const currentPage = () => {};
+const currentChange = () => {};
+// 分类编辑
+const ClassificationDditing = val => {
+  EditID.value = val.row.id; //编辑需要的ID
+  let data = val.row;
+  lassificationform.value.name = data.name; //分类名称
+  lassificationform.value.description = data.description; //分类描述
+  lassificationform.value.remark = data.remark; //分类备注
+};
+
+// 分类新增按钮
+const AddCategory = () => {};
+
+// 批量删除分类
+const BatchDelete = () => {
+  if (!selectionList.value.length) {
+    ElMessage({
+      message: '请勾选要批量删除的数据',
+      type: 'warning',
+    });
+    return;
+  }
+  loadingclassification.value = true; //开启加载效果
+
+  let data = {
+    ids: [],
+  };
+  data['ids'] = selectionList.value.map(res => res.id);
+  data['ids'] = data['ids'].join(',');
+  console.log(data, '批量删除');
+
+  $_newlyremove(data)
+    .then(res => {
+      console.log(res, '删除成功返回值');
+      ElMessage({
+        message: res.data.msg,
+        type: 'success',
+      });
+      onLoad();
+    })
+    .catch(res => {})
+    .finally(() => {
+      loadingclassification.value = false; //关闭加载效果
+    });
+};
+// 分类删除
+const CategoryDeletion = val => {
+  ElMessageBox.confirm(`是否删除${val.row.name}分类?`, 'Warning', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      loadingclassification.value = true; //开启加载效果
+      console.log(val, '分类删除');
+      let data = {
+        ids: [],
+      };
+      data['ids'].push(val.row.id);
+      data['ids'] = data['ids'].join(',');
+      $_newlyremove(data)
+        .then(res => {
+          console.log(res, '删除成功返回值');
+          ElMessage({
+            message: res.data.msg,
+            type: 'success',
+          });
+        })
+        .catch(res => {})
+        .finally(() => {
+          loadingclassification.value = false; //关闭加载效果
+        });
+      onLoad();
+    })
+    .catch(() => {});
+};
+// 新增/编辑分类
+const newlyAddedFn = () => {
+  loadingAddPopup.value = true; //开启弹窗加载效果
+  loadingclassification.value = true; //开启加载效果
+  let data = {
+    ...lassificationform.value,
+    pId: 0, ///是否父指标 默认0
+  };
+  if (title.value) {
+    console.log(data, '新增分类');
+  } else {
+    data.id = EditID.value;
+  }
+
+  $_newlyadded(data)
+    .then(res => {
+      console.log(res, '新增成功返回值');
+      if (res.data.code == 200) {
+        onLoad();
+        newlyAdded.value = false; //关闭弹窗
+        ElMessage({
+          message: res.data.msg,
+          type: 'success',
+        });
+      }
+    })
+    .catch(res => {})
+    .finally(() => {
+      loadingAddPopup.value = false; //关闭弹窗加载效果
+      loadingclassification.value = false; //关闭加载效果
+    });
+};
+// 表格选择
+const selectionChange = list => {
+  selectionList.value = list;
+  console.log(selectionList.value, '已经选中的数据');
+};
+
+const searchHide = () => {
+  search.value = !search.value;
+};
+//  查看信息
+const ClassificationIndicatorView = val => {
+  console.log(val, '查看信息');
+};
+// 查询搜索
+const searchChange=()=>{
+
+}
+</script>
+
+<style scoped lang="scss">
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+.ElBtnClass {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+}
+.el_listForm {
+  display: flex;
+  flex-wrap: wrap;
+  :deep(.el-form-item) {
+    justify-content: flex-end !important;
+    width: 30%;
+  }
+  :deep(.el-form-item__content) {
+    align-items: flex-start !important;
+  }
+}
+.demo-image__error .image-slot {
+  font-size: 30px;
+}
+.demo-image__error .image-slot .el-icon {
+  font-size: 30px;
+}
+.demo-image__error .el-image {
+  width: 100%;
+  height: 200px;
+}
+.el_header_top{
+    .el-form{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    .el-form-item{
+        margin: 4px 0;
+        margin-right: 10px;
+    }
+    .el-btn{
+        margin-right: 0;
+    }
+    }
+    :deep(.el-date-editor){
+        height: 100% !important;
+    }
+}
+</style>
diff --git a/src/views/supervise/classify.vue b/src/views/supervise/classify.vue
new file mode 100644
index 00000000..c6e4f427
--- /dev/null
+++ b/src/views/supervise/classify.vue
@@ -0,0 +1,305 @@
+<template>
+  <basic-container>
+    <!-- 首页表格 -->
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="分类列表" name="first"> </el-tab-pane>
+    </el-tabs>
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <el-row v-if="search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="el-fr-d">
+          <!-- 查询按钮 -->
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <!-- 控件模块 -->
+      <el-row>
+        <div class="avue-crud__header">
+          <!-- 头部左侧按钮模块 -->
+          <div class="avue-crud__left">
+            <el-button type="primary" @click="AddCategory">
+              <el-icon><Plus /></el-icon>新 增</el-button
+            >
+
+            <el-button type="primary" @click="BatchDelete">
+              <el-icon><Plus /></el-icon>批量删除</el-button
+            >
+          </div>
+          <!-- 头部右侧按钮模块 -->
+          <div class="avue-crud__right">
+            <el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
+            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+            <el-button icon="Search" @click="searchHide" circle></el-button>
+          </div>
+        </div>
+      </el-row>
+
+      <!-- 首页表格 -->
+      <el-row>
+        <!-- 列表模块 -->
+        <tablecmt
+          :columnList="classificationColumnList"
+          :tableData="classificationdata"
+          :loading="loadingclassification"
+          @inputTxt="inputsc"
+          @timeCheck="timesc"
+          @btnCheck="btnsc"
+          @selectCheck="selectsc"
+          @selection="selectionChange"
+        >
+          <template #default="slotProps">
+            <template v-if="slotProps.scope.column.label === '操作'">
+              <div class="ElBtnClass">
+                <el-button text @click="ClassificationDditing(slotProps.scope)">编辑</el-button>
+                <el-button text type="primary" @click="CategoryDeletion(slotProps.scope)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
+          </template>
+        </tablecmt>
+      </el-row>
+
+      <!-- 分页模块 -->
+      <el-row class="el-fy">
+        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+          <div></div>
+          <el-pagination
+            align="right"
+            background
+            @size-change="sizeChange"
+            @current-change="currentChange"
+            :current-page="currentPage"
+            :page-sizes="[30, 50, 80, 120]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </el-row>
+    </div>
+
+    <el-dialog v-model="newlyAdded" :title="title ? '新增分类' : '编辑分类'" width="30%">
+      <el-form v-loading="loadingAddPopup" :model="lassificationform" label-width="120px">
+        <el-form-item label="分类名称">
+          <el-input v-model="lassificationform.name" placeholder="请输入分类名称" />
+        </el-form-item>
+
+        <el-form-item label="分类描述">
+          <el-input
+            v-model="lassificationform.description"
+            :rows="4"
+            type="textarea"
+            placeholder="请输入分类描述"
+          />
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input
+            v-model="lassificationform.remark"
+            :rows="4"
+            type="textarea"
+            placeholder="请输入分类备注"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="newlyAdded = false">取消</el-button>
+          <el-button :disabled="loadingAddPopup" type="primary" @click="newlyAddedFn">
+            确定
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </basic-container>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @setcolum="setnewcolum"
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="classificationColumnList"
+  ></edittablehead>
+</template>
+
+<script setup>
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { ref, reactive, computed, onMounted } from 'vue';
+import { classificationColumnList } from '@/option/supervise/supervise.js';
+import { $_Getclassify, $_newlyadded, $_newlyremove,$_classifyAddChild  } from '@/api/classify/classify';
+const loadingclassification = ref(false); //指标分类加载效果
+const classificationdata = ref([]); //指标分类数据
+const current = ref(1); //当前页
+const total = ref(10); //总页数
+const pageSize = ref(50);
+const lassificationform = ref({}); //分类表单
+const title = ref(true); //标题
+const EditID = ref(true); //编辑需要的ID
+const newlyAdded = ref(false); //新增弹窗
+const loadingAddPopup = ref(false); //弹窗加载
+const selectionList=ref([]);//选中数据
+const onLoad = () => {
+  let data = {
+    current: current.value,
+    size: pageSize.value,
+    isPid:1,
+  };
+  loadingclassification.value = true; //开启加载效果
+  $_Getclassify(data)
+    .then(res => {
+      console.log(res);
+      classificationdata.value = res.data.data.records; //数据
+      total.value = res.data.data.total; //总页数
+    })
+    .catch(res => {})
+    .finally(() => {
+      loadingclassification.value = false; //开启加载效果
+    });
+
+};
+onLoad();
+// 页码
+const sizeChange = () => {};
+const currentPage = () => {};
+const currentChange = () => {};
+// 分类编辑
+const ClassificationDditing = val => {
+  EditID.value = val.row.id; //编辑需要的ID
+  title.value = false; //关闭编辑
+  newlyAdded.value = true; //开启弹窗
+  let data = val.row;
+  lassificationform.value.name = data.name; //分类名称
+  lassificationform.value.description = data.description; //分类描述
+  lassificationform.value.remark = data.remark; //分类备注
+};
+
+// 分类新增按钮
+const AddCategory = () => {
+  title.value = true; //开启新增
+  newlyAdded.value = true; //开启编辑
+  lassificationform.value={};//重置表单
+};
+
+// 批量删除分类
+const BatchDelete=()=>{
+if(!selectionList.value.length){
+    ElMessage({
+    message: '请勾选要批量删除的数据',
+    type: 'warning',
+  })
+return 
+}
+loadingclassification.value = true; //开启加载效果
+  
+      let data = {
+        ids: [],
+      };
+      data['ids'] = selectionList.value.map(res=>res.id)
+      data['ids'] = data['ids'].join(',') 
+      console.log(data, '批量删除');
+    
+      $_newlyremove(data)
+        .then(res => {
+          console.log(res, '删除成功返回值');
+          ElMessage({
+            message: res.data.msg,
+            type: 'success',
+          });
+          onLoad();  
+        })
+        .catch(res => {})
+        .finally(() => {
+          loadingclassification.value = false; //关闭加载效果
+        });
+   
+}
+// 分类删除
+const CategoryDeletion = val => {
+  ElMessageBox.confirm(`是否删除${val.row.name}分类?`, 'Warning', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      loadingclassification.value = true; //开启加载效果
+      console.log(val, '分类删除');
+      let data = {
+        ids: [],
+      };
+      data['ids'].push(val.row.id);
+      data['ids'] = data['ids'].join(',');
+      $_newlyremove(data)
+        .then(res => {
+          console.log(res, '删除成功返回值');
+          ElMessage({
+            message: res.data.msg,
+            type: 'success',
+          });
+        })
+        .catch(res => {})
+        .finally(() => {
+          loadingclassification.value = false; //关闭加载效果
+        });
+      onLoad();
+    })
+    .catch(() => {});
+};
+// 新增/编辑分类
+const newlyAddedFn = () => {
+  loadingAddPopup.value = true; //开启弹窗加载效果
+  loadingclassification.value = true; //开启加载效果
+  let data = {
+    ...lassificationform.value,
+    pId: 0, ///是否父指标 默认0
+  };
+  if (title.value) {
+    console.log(data, '新增分类');
+  } else {
+    data.id = EditID.value;
+  }
+
+  $_newlyadded(data)
+    .then(res => {
+      console.log(res, '新增成功返回值');
+      if (res.data.code == 200) {
+        onLoad();
+        newlyAdded.value = false; //关闭弹窗
+        ElMessage({
+          message: res.data.msg,
+          type: 'success',
+        });
+      }
+    })
+    .catch(res => {})
+    .finally(() => {
+      loadingAddPopup.value = false; //关闭弹窗加载效果
+      loadingclassification.value = false; //关闭加载效果
+    });
+};
+// 表格选择
+const selectionChange=(list)=>{
+    selectionList.value=list
+    console.log(selectionList.value,'已经选中的数据');
+}
+</script>
+
+<style scoped lang="scss">
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+.ElBtnClass {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+}
+</style>
diff --git a/src/views/supervise/management.vue b/src/views/supervise/management.vue
new file mode 100644
index 00000000..e6a70702
--- /dev/null
+++ b/src/views/supervise/management.vue
@@ -0,0 +1,313 @@
+<template>
+  <basic-container>
+    <!-- 首页表格 -->
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="分类列表" name="first"> </el-tab-pane>
+    </el-tabs>
+    <div class="avue-crud">
+      <!-- 搜索模块 -->
+      <el-row v-if="search">
+        <!-- 查询模块 -->
+        <el-form :inline="true" :model="query" class="el-fr-d">
+          <!-- 查询按钮 -->
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <!-- 控件模块 -->
+      <el-row>
+        <div class="avue-crud__header">
+          <!-- 头部左侧按钮模块 -->
+          <div class="avue-crud__left">
+            <el-button type="primary" @click="AddCategory">
+              <el-icon><Plus /></el-icon>新 增</el-button
+            >
+
+            <el-button type="primary" @click="BatchDelete">
+              <el-icon><Plus /></el-icon>批量删除</el-button
+            >
+          </div>
+          <!-- 头部右侧按钮模块 -->
+          <div class="avue-crud__right">
+            <el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
+            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+            <el-button icon="Search" @click="searchHide" circle></el-button>
+          </div>
+        </div>
+      </el-row>
+
+      <!-- 首页表格 -->
+      <el-row>
+        <!-- 列表模块 -->
+        <tablecmt
+          :columnList="classificationColumnList"
+          :tableData="classificationdata"
+          :loading="loadingclassification"
+          @inputTxt="inputsc"
+          @timeCheck="timesc"
+          @btnCheck="btnsc"
+          @selectCheck="selectsc"
+          @selection="selectionChange"
+        >
+          <template #default="slotProps">
+            <template v-if="slotProps.scope.column.label === '操作'">
+              <div class="ElBtnClass">
+                <el-button text @click="ClassificationDditing(slotProps.scope)">编辑</el-button>
+                <el-button text type="primary" @click="CategoryDeletion(slotProps.scope)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
+          </template>
+        </tablecmt>
+      </el-row>
+
+      <!-- 分页模块 -->
+      <el-row class="el-fy">
+        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
+          <div></div>
+          <el-pagination
+            align="right"
+            background
+            @size-change="sizeChange"
+            @current-change="currentChange"
+            :current-page="currentPage"
+            :page-sizes="[30, 50, 80, 120]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </el-row>
+    </div>
+
+    <el-dialog v-model="newlyAdded" :title="title ? '新增指标' : '编辑指标'" width="30%">
+      <el-form v-loading="loadingAddPopup" :model="lassificationform" label-width="120px">
+        <el-form-item label="指标分类">
+          <el-select v-model="classificationoptionsvalue" filterable placeholder="请选择指标分类" style="width: 240px">
+            <el-option
+              v-for="item in classificationoptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="指标名称">
+          <el-input v-model="lassificationform.name" placeholder="请输入指标名称" />
+        </el-form-item>
+
+        <el-form-item label="指标描述">
+          <el-input
+            v-model="lassificationform.description"
+            :rows="4"
+            type="textarea"
+            placeholder="请输入指标描述"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="newlyAdded = false">取消</el-button>
+          <el-button :disabled="loadingAddPopup" type="primary" @click="newlyAddedFn">
+            确定
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </basic-container>
+
+  <!-- 列表配置显示 -->
+  <edittablehead
+    @setcolum="setnewcolum"
+    @closce="showdrawer"
+    :drawerShow="drawerShow"
+    :columnList="classificationColumnList"
+  ></edittablehead>
+</template>
+
+<script setup>
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { ref, reactive, computed, onMounted } from 'vue';
+import { classificationColumnList } from '@/option/supervise/supervise.js';
+import { $_Getclassify, $_newlyadded, $_newlyremove,$_selectParentCalssifyList } from '@/api/classify/classify';
+const loadingclassification = ref(false); //指标分类加载效果
+const classificationdata = ref([]); //指标分类数据
+const current = ref(1); //当前页
+const total = ref(10); //总页数
+const pageSize = ref(50);
+const lassificationform = ref({}); //分类表单
+const title = ref(true); //标题
+const EditID = ref(true); //编辑需要的ID
+const newlyAdded = ref(false); //新增弹窗
+const loadingAddPopup = ref(false); //弹窗加载
+const selectionList = ref([]); //选中数据
+const classificationoptions= ref([]);//指标分类接口
+const classificationoptionsvalue = ref([]);//分类选择的
+const onLoad = () => {
+  let data = {
+    current: current.value,
+    size: pageSize.value,
+    isPid: 0,
+  };
+  loadingclassification.value = true; //开启加载效果
+  $_Getclassify(data)
+    .then(res => {
+      console.log(res);
+      classificationdata.value = res.data.data.records; //数据
+      total.value = res.data.data.total; //总页数
+    })
+    .catch(res => {})
+    .finally(() => {
+      loadingclassification.value = false; //开启加载效果
+    });
+    // 获取分类
+    $_selectParentCalssifyList().then(res=>{
+        console.log(res,'指标分类');
+        classificationoptions.value   =  res.data.data.records
+    })
+
+};
+onLoad();
+// 页码
+const sizeChange = () => {};
+const currentPage = () => {};
+const currentChange = () => {};
+// 分类编辑
+const ClassificationDditing = val => {
+  EditID.value = val.row.id; //编辑需要的ID
+  title.value = false; //关闭编辑
+  newlyAdded.value = true; //开启弹窗
+  let data = val.row;
+  lassificationform.value.name = data.name; //分类名称
+  lassificationform.value.description = data.description; //分类描述
+  lassificationform.value.remark = data.remark; //分类备注
+};
+
+// 分类新增按钮
+const AddCategory = () => {
+  title.value = true; //开启新增
+  newlyAdded.value = true; //开启编辑
+  lassificationform.value = {}; //重置表单
+};
+
+// 批量删除分类
+const BatchDelete = () => {
+  if (!selectionList.value.length) {
+    ElMessage({
+      message: '请勾选要批量删除的数据',
+      type: 'warning',
+    });
+    return;
+  }
+  loadingclassification.value = true; //开启加载效果
+
+  let data = {
+    ids: [],
+  };
+  data['ids'] = selectionList.value.map(res => res.id);
+  data['ids'] = data['ids'].join(',');
+  console.log(data, '批量删除');
+
+  $_newlyremove(data)
+    .then(res => {
+      console.log(res, '删除成功返回值');
+      ElMessage({
+        message: res.data.msg,
+        type: 'success',
+      });
+      onLoad();
+    })
+    .catch(res => {})
+    .finally(() => {
+      loadingclassification.value = false; //关闭加载效果
+    });
+};
+// 分类删除
+const CategoryDeletion = val => {
+  ElMessageBox.confirm(`是否删除${val.row.name}分类?`, 'Warning', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      loadingclassification.value = true; //开启加载效果
+      console.log(val, '分类删除');
+      let data = {
+        ids: [],
+      };
+      data['ids'].push(val.row.id);
+      data['ids'] = data['ids'].join(',');
+      $_newlyremove(data)
+        .then(res => {
+          console.log(res, '删除成功返回值');
+          ElMessage({
+            message: res.data.msg,
+            type: 'success',
+          });
+        })
+        .catch(res => {})
+        .finally(() => {
+          loadingclassification.value = false; //关闭加载效果
+        });
+      onLoad();
+    })
+    .catch(() => {});
+};
+// 新增/编辑分类
+const newlyAddedFn = () => {
+  loadingAddPopup.value = true; //开启弹窗加载效果
+  loadingclassification.value = true; //开启加载效果
+  let data = {
+    ...lassificationform.value,
+    pId: 0, ///是否父指标 默认0
+  };
+  if (title.value) {
+    console.log(data, '新增分类');
+  } else {
+    data.id = EditID.value;
+  }
+
+  $_newlyadded(data)
+    .then(res => {
+      console.log(res, '新增成功返回值');
+      if (res.data.code == 200) {
+        onLoad();
+        newlyAdded.value = false; //关闭弹窗
+        ElMessage({
+          message: res.data.msg,
+          type: 'success',
+        });
+      }
+    })
+    .catch(res => {})
+    .finally(() => {
+      loadingAddPopup.value = false; //关闭弹窗加载效果
+      loadingclassification.value = false; //关闭加载效果
+    });
+};
+// 表格选择
+const selectionChange = list => {
+  selectionList.value = list;
+  console.log(selectionList.value, '已经选中的数据');
+};
+</script>
+
+<style scoped lang="scss">
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+.ElBtnClass {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+}
+</style>