设备模块添加

src/api/dept/index.ts

@@ -2,6 +2,18 @@ import request from "@/utils/request";
 import { AxiosPromise } from "axios";
 import { DeptForm, DeptQuery, DeptVO } from "./types";
 
+
+/**
+ * 部门树形列表
+ * @param queryParams
+ */
+export function treeList(): AxiosPromise<any[]> {
+  return request({
+    url: "/api/v1/sys/dept/orgTree",
+    method: "get"
+  });
+}
+
 /**
  * 部门树形表格
  *

src/api/device/index.ts

@@ -0,0 +1,41 @@
+import request from "@/utils/request";
+
+/**
+ * 设备维护
+ *
+ * @param ids
+ */
+export function maintenanceUpdate(params: any) {
+  return request({
+    url: "/api/v1/device/maintenance/maintenance",
+    method: "post",
+    data: params,
+  });
+}
+
+/**
+ * 设备维修
+ * @param params
+ */
+export function repair(params: any) {
+  return request({
+    url: "/api/v1/device/repair/repair",
+    method: "post",
+    data: params,
+  });
+}
+export function audit(params: any) {
+  return request({
+    url: "/api/v1/device/repair/audit",
+    method: "post",
+    data: params,
+  });
+}
+
+export function allocateAudit(params: any) {
+  return request({
+    url: "/api/v1/device/allocate/audit",
+    method: "post",
+    data: params,
+  });
+}

src/api/user/index.ts

@@ -17,6 +17,21 @@ export function getUserInfoApi(): AxiosPromise {
  *
  * @param queryParams
  */
+export function getUserList(
+    queryParams: UserQuery
+): AxiosPromise<any[]> {
+  return request({
+    url: "/api/v1/sys/user/list",
+    method: "post",
+    data: queryParams,
+  });
+}
+
+/**
+ * 获取用户分页列表
+ *
+ * @param queryParams
+ */
 export function getUserPage(
   queryParams: UserQuery
 ): AxiosPromise<PageResult<UserPageVO[]>> {

src/common/configs/dictDataUtil.ts

@@ -3,6 +3,7 @@
 const DictDataUtil = {
   request_url:
       import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/dictData/queryByType/",
+  dept_tree_url: import.meta.env.VITE_APP_BASE_API + "/api/v1/sys/dept/orgTree",
   TYPE_CODE: {
     //订单类型
     plan_order_type: "plan_order_type",

src/hooks/userCrud.ts~

@@ -0,0 +1,287 @@
+import request from "@/utils/request";
+import { PageOption } from "@smallwei/avue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { useUserStoreHook } from "@/store/modules/user";
+import { checkPerm } from "@/directive/permission";
+
+interface UseCrudConfig {
+  // 模块的url，用来进行增删改查
+  src?: string;
+  // 需要操作的数据
+  row?: any;
+  // done用于结束操作
+  done?: () => void;
+  // 具体操作的行
+  index?: number;
+  // 用于中断操作
+  loading?: () => void;
+  // 查询参数 一般用search的值就可以了
+  params?: object;
+  // 是否是编辑，如果是编辑调用更新，否则调用新增
+  isEdit?: boolean;
+}
+
+export const useCrud = (config?: UseCrudConfig) => {
+  const url = ref(config?.src);
+
+  /** 表格配置属性 */
+  const option = ref({
+    searchIcon: true,
+    searchIndex: 3, //searchIcon是否启用功能按钮, searchIndex配置收缩展示的个数,默认为2个
+    index: true, //是否显示第几项
+    indexLabel: '序号',
+    indexWidth: "55px",
+    refreshBtn: false,
+    border: true,
+    viewBtn: true,
+  });
+  const data = ref<any>([]); //表格数据
+  const form = ref({}); //新增或者编辑弹出的表单绑定值
+  /** 表格顶部搜索的表单的变量 v-model */
+  const search = ref({});
+
+  /** 表格的分页数据 v-model */
+  const page = ref<PageOption>({
+    total: 12220,
+    currentPage: 1,
+    pageSize: 10,
+  });
+  /** 配置项结构 v-model */
+  // defaults ?: AvueCrudDefaults;
+
+  const toDeleteIds = ref<Array<string>>([]);
+
+  const save = async (config?: UseCrudConfig) => {
+    try {
+      const path = config?.isEdit ? "/update" : "/add";
+      const res = (await request({
+        url: `${url.value}${path}`,
+        method: "post",
+        data: form.value,
+      })) as any;
+      if (res?.code == 200) {
+        Methords.dataList();
+        config?.done && config?.done();
+        ElMessage.success(res?.msg ?? "");
+      } else {
+        config?.loading && config?.loading();
+        ElMessage.error(res?.msg ?? "");
+      }
+    } catch (err) {
+      config?.loading && config?.loading();
+    }
+  };
+
+  const handleSearchData = () => {
+    // const array = [null, undefined, ""];
+    search.value = Object.fromEntries(
+      Object.entries(search.value).filter(
+        ([key, value]) =>{
+          alert(value)
+          return value !== null &&
+          value !== undefined &&
+          Object.keys(value).length !== 0
+        }
+      )
+    );
+  };
+
+  /**
+   * 表格增删改查等基本方法
+   */
+  const Methords = {
+    /**
+     * 查询方法
+     */
+    dataList: async (config?: UseCrudConfig) => {
+      handleSearchData();
+      try {
+        const res = await request({
+          url: `${url.value}/page`,
+          method: "post",
+          data: {
+            pageNo: page.value.currentPage,
+            pageSize: page.value.pageSize,
+            ...search.value,
+          },
+        });
+        if (res?.data) {
+          data.value = res?.data?.records || [];
+          page.value.total = res?.data?.totalCount || 0;
+        }
+        config?.done && config?.done();
+      } catch (err) {
+        config?.loading && config?.loading();
+      } finally {
+        config?.done && config?.done();
+      }
+    },
+
+    createRow: (row: any, done: () => void, loading: () => void) => {
+      save({ row: row, done: done, loading: loading });
+    },
+
+    updateRow: (
+      row: any,
+      index: number,
+      done: () => void,
+      loading: () => void
+    ) => {
+      save({
+        row: row,
+        done: done,
+        loading: loading,
+        index: index,
+        isEdit: true,
+      });
+    },
+
+    deleteRow: async (row: any, index: number, done: () => void) => {
+      ElMessageBox.confirm("是否删除所选中数据？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(async () => {
+        try {
+          const res = await request({
+            url: `${url.value}/del`,
+            method: "post",
+            data: { id: row.id ?? "" },
+          });
+          Methords.dataList();
+          config?.done && config?.done();
+        } catch (err) {
+          config?.loading && config?.loading();
+        } finally {
+          config?.done && config?.done();
+        }
+      });
+    },
+
+    // 设置selection: true,后监听选中改变事件，将Id存入数组
+    selectionChange: (rows?: any[]) => {
+      toDeleteIds.value = [];
+      rows?.forEach((element) => {
+        toDeleteIds.value.push(element.id);
+      });
+    },
+
+    /**
+     * 表格上方的多选删除方法
+     */
+    multipleDelete: async () => {
+      ElMessageBox.confirm("是否删除所选中数据？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(async () => {
+        try {
+          const res = await request({
+            url: `${url.value}/batch-del`,
+            method: "post",
+            data: { ids: toDeleteIds.value },
+          });
+          Methords.dataList();
+          config?.done && config?.done();
+        } catch (err) {
+          config?.loading && config?.loading();
+        } finally {
+          config?.done && config?.done();
+        }
+      });
+    },
+
+    /**
+     * 点击搜索按钮触发
+     */
+    searchChange: async (params: any, done: () => void) => {
+      // 点击搜索的时候重置search的值，要不然会传过去所有的值包括空字符串的值
+      search.value = params;
+      page.value.currentPage = 1;
+      Methords.dataList({ done: done });
+    },
+
+    /**
+     * 点击清空按钮触发
+     */
+    resetChange: async (item: any) => {
+      page.value.currentPage = 1;
+      Methords.dataList();
+    },
+  };
+
+  /**
+   * 表格辅助方法，按钮权限，导入导出
+   */
+  const Utils = {
+    checkBtnPerm: (str: string) => {
+      // 「超级管理员」拥有所有的按钮权限
+      const { roles, perms } = useUserStoreHook().user;
+      if (roles.includes("ROOT")) {
+        return true;
+      }
+      const hasPerm = perms?.some((perm) => {
+        return str.includes(perm);
+      });
+      return hasPerm;
+    },
+
+    /**
+     * 根据返回的数据下载文件
+     */
+    downloadFile: (response: any) => {
+      const fileData = response.data;
+      const fileName = decodeURI(
+        response.headers["content-disposition"].split(";")[1].split("=")[1]
+      );
+      const fileType =
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+      const blob = new Blob([fileData], { type: fileType });
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const downloadLink = document.createElement("a");
+      downloadLink.href = downloadUrl;
+      downloadLink.download = fileName;
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+      window.URL.revokeObjectURL(downloadUrl);
+    },
+
+    /**
+     * 下载模版 传入url
+     */
+    downloadTemplate: async (urlStr: string) => {
+      const response = await request({
+        url: urlStr,
+        method: "get",
+        responseType: "arraybuffer",
+      });
+      Utils.downloadFile(response);
+    },
+
+    /**
+     * 根据搜索项导出数据
+     */
+    exportData: async (urlStr: string) => {
+      const response = await request({
+        url: urlStr,
+        method: "post",
+        data: search.value,
+        responseType: "arraybuffer",
+      });
+      Utils.downloadFile(response);
+    },
+  };
+
+  return {
+    url,
+    option,
+    data,
+    form,
+    search,
+    page,
+    toDeleteIds,
+    Methords,
+    Utils,
+  };
+};

src/layout/components/Sidebar/components/SidebarLogo.vue

@@ -33,7 +33,7 @@ const logo = ref(new URL(`../../../../assets/logo.png`, import.meta.url).href);
 .logo-container {
   width: 100%;
   height: $navbar-height;
-  background-color: $sidebar-logo-background;
+  //background-color: $sidebar-logo-background;
 
   .logo-image {
     width: 20px;

src/views/device/allocate/index.vue

@@ -26,14 +26,87 @@
           >删除</el-button
         >
       </template>
+      <template #menu="{size,row,index}">
+        <el-button @click="maintenance(row,0)"
+                   icon="el-icon-check"
+                   text
+                   type="primary"
+                   :size="size">流程</el-button>
+        <el-button @click="maintenance(row,1)"
+                   icon="el-icon-fold"
+                   text
+                   type="primary"
+                   :size="size">记录</el-button>
+        <el-button @click="maintenance(row,1)"
+                   icon="el-icon-download"
+                   text
+                   type="primary"
+                   :size="size">导出履历</el-button>
+      </template>
     </avue-crud>
+    <el-dialog
+        v-model="dialog.visible"
+        :title="dialog.title"
+        width="850px"
+        @close="dialog.visible = false"
+    >
+      <device-page  @deviceInfo="deviceInfo"/>
+    </el-dialog>
+
+    <el-dialog
+        v-model="dialog1.visible"
+        :title="dialog1.title"
+        width="750px"
+        height="80%"
+        @close="dialog1.visible = false">
+      <el-timeline style="max-width: 500px;margin-left: 100px">
+        <el-timeline-item center type="success" placement="top">
+          <el-card>
+            <h4>调拨申请</h4>
+            <p>设备编号： {{maintenanceInfo.deviceNo}}</p>
+            <p>设备名称： {{maintenanceInfo.deviceName}}</p>
+            <p>申请部门： {{maintenanceInfo.creator}}</p>
+            <p>申请人员： {{maintenanceInfo.creator}}</p>
+            <p>调拨周期： {{maintenanceInfo.allocateCycle}}天</p>
+            <p>调拨目标位置： {{maintenanceInfo.deviceToPosition}}天</p>
+            <p>申请时间： {{maintenanceInfo.created}}</p>
+          </el-card>
+        </el-timeline-item>
+
+        <el-timeline-item center placement="top"  :type="maintenanceInfo.state === 1 ? 'primary' : maintenanceInfo.state === 0 ? 'info' : 'success'">
+          <el-card v-if="viewPage">
+            <h4>调拨审批</h4>
+            <p>审批人员： {{maintenanceInfo.auditUser}}</p>
+            <p>审批结果： {{maintenanceInfo.auditUser ? (maintenanceInfo.auditResult === 1 ? '通过' : '不通过') : ''}}</p>
+          </el-card>
+          <el-card v-if="!viewPage">
+            <h4>调拨审批</h4>
+            <el-form ref="maintenanceInfoForm"  :model="maintenanceInfo" label-width="auto" style="max-width: 400px" :rules="rules">
+              <el-form-item label="审批人员" prop="auditUser">
+                <el-input :disabled="maintenanceInfo.state !== 0" v-model="maintenanceInfo.auditUser" />
+              </el-form-item>
+              <el-form-item label="审批结果">
+                <el-radio-group :disabled="maintenanceInfo.state !== 0" v-model="maintenanceInfo.auditResult" class="ml-4">
+                  <el-radio :value=1>通过</el-radio>
+                  <el-radio :value=2>驳回</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item style="margin-left: 45%">
+                <el-button type="primary" v-if="maintenanceInfo.state === 0" @click="maintenanceSubmit">保存</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </el-dialog>
   </div>
 </template>
 <script setup>
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import ButtonPermKeys from "@/common/configs/buttonPermission";
-
+import {getUserList} from "@/api/user"
+import {allocateAudit} from "@/api/device/index";
 import { useCommonStoreHook } from "@/store";
 import dictDataUtil from "@/common/configs/dictDataUtil";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
@@ -42,30 +115,87 @@ const test = () => {
   tableType.value = tableType.value == 1 ? 2 : 1;
 };
 
+const viewPage = ref(true)
+
+const dialog = reactive({
+  title: "设备选择",
+  visible: false,
+});
+const dialog1 = reactive({
+  title: "调拨详情",
+  visible: false,
+});
+const userList = ref([])
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
-    src: "/api/v1/device",
+    src: "/api/v1/device/allocate",
   });
 const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
-// checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
-// const permission = reactive({
-//   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
-//   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
-//   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
-//   menu: true,
-// });
-
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
-
+const deviceInfo = (value) => {
+  form.value.deviceNo = value.deviceNo
+  form.value.deviceName =value.deviceName
+  form.value.deviceType = value.deviceType
+  form.value.devicePosition = value.devicePosition
+  form.value.oldHead = value.head
+  form.value.devicePosition = value.devicePosition
+  form.value.oldDept = value.deptId
+  dialog.visible = false
+}
+const maintenanceInfo = ref(null)
+const maintenance = (row,type)=>{
+  viewPage.value = type === 0 ? false : true
+  maintenanceInfo.value = row
+  maintenanceInfo.value.handResult = 0
+  dialog1.visible = true
+}
+const queryUserList = ()=>{
+  getUserList({}).then((data)=>{
+    userList.value = data.data
+  })
+}
+const maintenanceInfoForm = ref('maintenanceInfoForm')
+const maintenanceSubmit =()=>{
+  //alert(JSON.stringify(maintenanceInfo.value))
+  maintenanceInfoForm.value.validate((isValid, invalidFields) => {
+    if (isValid) {
+      allocateAudit(maintenanceInfo.value).then((data)=>{
+        ElMessage({
+          message: data.msg,
+          type: "success",
+        });
+        dialog1.visible = false
+        dataList()
+      })
+    }
+  })
+}
+const rules = reactive({
+  auditUser: [
+    { required: true, message: '审核人员不能为空', trigger: 'blur' }
+  ],
+  handleContent: [
+    { required: true, message: '维修内容不能为空', trigger: 'blur' }
+  ]
+})
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
   delBtn: false,
   selection: true,
+  labelWidth: 150,
+  viewBtn: false,
+  editBtn: false,
   column: [
     {
+      label: "调拨单号",
+      prop: "allocateNo",
+      display: false,
+      overHidden: true
+    },
+    {
       label: "设备编号",
       prop: "deviceNo",
       search: true,
@@ -76,23 +206,23 @@ option.value = Object.assign(option.value, {
           trigger: "trigger",
         },
       ],
+      click: ({ value, column }) => {
+        if(column.boxType){
+          dialog.visible = true
+        }
+      },
     },
     {
       label: "设备名称",
       prop: "deviceName",
+      addDisabled: true,
       search: true,
-      rules: [
-        {
-          required: true,
-          message: "设备名称不能为空",
-          trigger: "trigger",
-        },
-      ],
     },
     {
       label: "设备类型",
       prop: "deviceType",
       type: "select",
+      addDisabled: true,
       search: true,
       dicUrl:
         dictDataUtil.request_url +
@@ -110,61 +240,108 @@ option.value = Object.assign(option.value, {
       ],
     },
     {
-      label: "设备状态",
-      prop: "state",
-      type: "select",
-      search: true,
-      dicUrl:
-          dictDataUtil.request_url +
-          dictDataUtil.TYPE_CODE.device_status,
+      label: "原部门",
+      prop: "oldDept",
+      type: "tree",
+      addDisabled: true,
+      dicUrl: dictDataUtil.dept_tree_url,
       props: {
-        label: "dictLabel",
-        value: "dictValue",
+        label: "deptName",
+        value: "id",
+      }
+    },
+    {
+      label: "新部门",
+      prop: "applyDept",
+      type: "tree",
+      dicUrl: dictDataUtil.dept_tree_url,
+      props: {
+        label: "deptName",
+        value: "id",
       },
       rules: [
         {
           required: true,
-          message: "设备状态不能为空",
+          message: "新部门不能为空",
           trigger: "trigger",
         },
       ],
     },
     {
-      label: "负责人",
-      prop: "head",
+      label: "原负责人",
+      prop: "oldHead",
+      addDisabled: true,
+    },
+    {
+      label: "新负责人",
+      prop: "newHead",
       rules: [
         {
           required: true,
-          message: "负责人不能为空",
+          message: "新负责人不能为空",
           trigger: "trigger",
         },
       ],
     },
     {
-      label: "供应厂商",
-      prop: "manufacturer",
+      label: "设备原位置",
+      addDisabled: true,
+      prop: "devicePosition",
+      width: "115",
+      overHidden: true
+    },
+    {
+      label: "设备新位置",
+      prop: "deviceToPosition",
+      overHidden: true,
+      width: "115",
+      rules: [
+        {
+          required: true,
+          message: "设备新位置不能为空",
+          trigger: "trigger",
+        },
+      ],
     },
     {
-      label: "所在车间",
-      prop: "workshop",
+      label: "调拨周期(天)",
+      prop: "allocateCycle",
+      type: "number",
+      width: "105",
+      min: 0,
+      max: 999,
+      rules: [
+        {
+          required: true,
+          message: "调拨周期不能为空",
+          trigger: "trigger",
+        },
+      ],
     },
     {
-      label: "所在工位",
-      prop: "station",
+      label: "调拨单号",
+      prop: "state",
+      display: false,
+      search: true,
+      type: "select",
+      dicData: [{label: '待审核',value:0},{label: '通过',value:1},{label: '驳回',value:2}],
     },
     {
-      label: "规格",
-      prop: "specifications",
+      label: "申请人",
+      prop: "applyUser",
+      display: false,
     },
     {
-      label: "品牌",
-      prop: "brand",
+      label: "申请时间",
+      prop: "created",
+      width: "180",
+      display: false,
     },
   ],
 });
 
 onMounted(() => {
-  // console.log("crudRef", crudRef)
   dataList();
+  queryUserList()
 });
 </script>

src/views/device/instance/components/device-page.vue

@@ -17,9 +17,8 @@
   </div>
 </template>
 <script setup>
-import { ref, getCurrentInstance } from "vue";
+import { ref } from "vue";
 import { useCrud } from "@/hooks/userCrud";
-import ButtonPermKeys from "@/common/configs/buttonPermission";
 
 import { useCommonStoreHook } from "@/store";
 import dictDataUtil from "@/common/configs/dictDataUtil";

src/views/device/instance/components/device-page.vue~

@@ -0,0 +1,122 @@
+<template>
+  <div class="mainContentBox">
+    <avue-crud
+        ref="crudRef"
+        v-model:search="search"
+        v-model="form"
+        :data="data"
+        :option="option"
+        v-model:page="page"
+        @row-click="rowClick"
+        @search-change="searchChange"
+        @search-reset="resetChange"
+        @size-change="dataList"
+        @current-change="dataList"
+    >
+    </avue-crud>
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import ButtonPermKeys from "@/common/configs/buttonPermission";
+
+import { useCommonStoreHook } from "@/store";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+const test = () => {
+  isShowTable.value = true;
+  tableType.value = tableType.value == 1 ? 2 : 1;
+};
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/device",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate } = Utils; //按钮权限等工具
+
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+const emit = defineEmits(["deviceInfo"])
+const rowClick = (row)=>{
+  emit("deviceInfo", row)
+}
+
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  delBtn: false,
+  selection: false,
+  search: false,
+  editBtn: false,
+  addBtn: false,
+  viewBtn: false,
+  menu: false,
+  column: [
+    {
+      label: "设备编号",
+      prop: "deviceNo",
+      search: true,
+      width: '120',
+      rules: [
+        {
+          required: true,
+          message: "设备编号不能为空",
+          trigger: "trigger",
+        },
+      ],
+    },
+    {
+      label: "设备名称",
+      prop: "deviceName",
+      search: true,
+      width: '120',
+      rules: [
+        {
+          required: true,
+          message: "设备名称不能为空",
+          trigger: "trigger",
+        },
+      ],
+    },
+    {
+      label: "设备类型",
+      prop: "deviceType",
+      type: "select",
+      search: true,
+      width: '100',
+      dicUrl:
+        dictDataUtil.request_url +
+        dictDataUtil.TYPE_CODE.device_type,
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+    {
+      label: "负责人",
+      width: '100',
+      prop: "head",
+    },
+    {
+      label: "设备位置",
+      width: '150',
+      prop: "devicePosition",
+    },
+    {
+      label: "规格",
+      width: '150',
+      prop: "specifications",
+    },
+    {
+      label: "品牌",
+      width: '150',
+      prop: "brand",
+    },
+  ],
+});
+
+onMounted(() => {
+  dataList();
+});
+</script>

src/views/device/instance/index.vue

@@ -162,6 +162,16 @@ option.value = Object.assign(option.value, {
       prop: "manufacturer",
     },
     {
+      label: "所属部门",
+      prop: "deptId",
+      type: "tree",
+      dicUrl: dictDataUtil.dept_tree_url,
+      props: {
+        label: "deptName",
+        value: "id",
+      }
+    },
+    {
       label: "所在车间",
       prop: "workshop",
     },

src/views/device/maintenance/components/record-page.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="mainContentBox">
+    <avue-crud
+        ref="crudRef"
+        v-model:search="search"
+        v-model="form"
+        :data="data"
+        :option="option"
+        v-model:page="page"
+        @search-change="searchChange"
+        @search-reset="resetChange"
+        @size-change="dataList"
+        @current-change="dataList"
+    >
+    </avue-crud>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref,defineProps } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+
+import { useCommonStoreHook } from "@/store";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+const test = () => {
+  isShowTable.value = true;
+  tableType.value = tableType.value == 1 ? 2 : 1;
+};
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/device/maintenanceRecord",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate } = Utils; //按钮权限等工具
+
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+const props = defineProps({
+  maintenanceId: {
+    type: Number,
+    default: () => {
+      return 0;
+    }
+  }
+})
+
+watch?.(
+    () => props.maintenanceId,
+    (newVal: string) => {
+      alert(newVal)
+      search.value.maintenanceId = newVal
+      dataList()
+    }
+);
+
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  delBtn: false,
+  selection: false,
+  search: false,
+  editBtn: false,
+  addBtn: false,
+  viewBtn: false,
+  menu: false,
+  column: [
+    {
+      label: "设备编号",
+      prop: "deviceNo",
+      width: '120',
+      rules: [
+        {
+          required: true,
+          message: "设备编号不能为空",
+          trigger: "trigger",
+        },
+      ],
+    },
+    {
+      label: "设备名称",
+      prop: "deviceName",
+      width: '120',
+      rules: [
+        {
+          required: true,
+          message: "设备名称不能为空",
+          trigger: "trigger",
+        },
+      ],
+    },
+    {
+      label: "设备类型",
+      prop: "deviceType",
+      type: "select",
+      width: '100',
+      dicUrl:
+        dictDataUtil.request_url +
+        dictDataUtil.TYPE_CODE.device_type,
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+    {
+      label: "设备位置",
+      width: '150',
+      prop: "devicePosition",
+    },
+    {
+      label: "维护类型",
+      prop: "type",
+      type: "select",
+      editDisplay: false,
+      dicData: [{label: '点检',value:0},{label: '保养',value:1}]
+    },
+    {
+      label: "维护人",
+      prop: "maintenanceUser",
+    },
+    {
+      label: "维护结果",
+      prop: "result",
+      search: true,
+      type: "select",
+      editDisplay: false,
+      dicData: [{label: '正常',value:0},{label: '报故',value:1}]
+    },
+    {
+      label: "维护时间",
+      width: '180',
+      prop: "maintenanceTime",
+    },
+  ],
+});
+
+onMounted?.(() => {
+  search.value.maintenanceId = props.maintenanceId
+  dataList();
+});
+</script>

src/views/device/maintenance/index.vue

@@ -26,6 +26,25 @@
           >删除</el-button
         >
       </template>
+      <template #menu="{size,row,index}">
+        <el-button @click="maintenance(row)"
+                   icon="el-icon-setting"
+                   text
+                   v-if="row.state === 0"
+                   type="primary"
+                   :size="size">维护</el-button>
+        <el-button disabled
+                   icon="el-icon-setting"
+                   text
+                   v-if="row.state === 1"
+                   type="primary"
+                   :size="size">维护</el-button>
+        <el-button @click="maintenanceList(row)"
+                   icon="el-icon-fold"
+                   text
+                   type="primary"
+                   :size="size">记录</el-button>
+      </template>
     </avue-crud>
     <el-dialog
         v-model="dialog.visible"
@@ -35,15 +54,86 @@
     >
       <device-page  @deviceInfo="deviceInfo"/>
     </el-dialog>
+
+    <el-dialog
+        v-model="dialog1.visible"
+        :title="dialog1.title"
+        width="750px"
+        height="80%"
+        @close="dialog1.visible = false">
+      <el-timeline style="max-width: 500px;margin-left: 100px">
+        <el-timeline-item center color="#0bbd87" type="success" placement="top">
+          <el-card>
+            <h4>维护计划</h4>
+            <p>设备编号： {{maintenanceInfo.deviceNo}}</p>
+            <p>设备名称：{{maintenanceInfo.deviceName}}</p>
+            <p>维护内容：{{maintenanceInfo.remark}}</p>
+            <p>计划时间：{{maintenanceInfo.nextTime}}</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item center placement="top" :type="maintenanceInfo.state === 0 ? 'primary' : 'success'">
+          <el-card>
+            <h4>设备维护</h4>
+            <el-form ref="maintenanceInfoForm" :model="maintenanceInfo" label-width="auto" style="max-width: 400px" :rules="rules">
+              <el-form-item label="维护人员" prop="userName">
+                <el-select
+                    v-model="maintenanceInfo.userName"
+                    placeholder="维护人员"
+                    size="large"
+                    style="width: 240px">
+                  <el-option
+                      v-for="item in userList"
+                      :key="item.userName"
+                      :label="item.userName"
+                      :value="item.userName"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="维护结果">
+                <el-radio-group v-model="maintenanceInfo.result" class="ml-4">
+                  <el-radio :value="0">正常</el-radio>
+                  <el-radio :value="1">报故</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item v-if="maintenanceInfo.result === 1" label="报故内容">
+                <el-input v-model="maintenanceInfo.maintenanceContent" />
+              </el-form-item>
+              <el-form-item v-if="maintenanceInfo.result === 0" label="下次维护日期">
+                <el-input v-model="maintenanceInfo.nextTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
+              </el-form-item>
+              <el-form-item v-if="maintenanceInfo.result === 0" label="下次维护内容">
+                <el-input v-model="maintenanceInfo.maintenanceContent" />
+              </el-form-item>
+              <el-form-item style="margin-left: 45%">
+                <el-button type="primary" @click="maintenanceSubmit">保存</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </el-dialog>
+
+    <el-dialog
+        v-model="dialog2.visible"
+        :title="dialog2.title"
+        width="60%"
+        height="80%"
+        @close="dialog2.visible = false"
+    >
+      <record-page :maintenanceId="maintenanceInfo.id"></record-page>
+    </el-dialog>
   </div>
 </template>
 <script setup>
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import ButtonPermKeys from "@/common/configs/buttonPermission";
-
+import {getUserList} from "@/api/user"
+import {maintenanceUpdate} from "@/api/device/index";
+import {treeList} from "@/api/dept/index"
 import { useCommonStoreHook } from "@/store";
 import dictDataUtil from "@/common/configs/dictDataUtil";
+import RecordPage from "./components/record-page.vue";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
 const test = () => {
   isShowTable.value = true;
@@ -54,6 +144,15 @@ const dialog = reactive({
   title: "设备选择",
   visible: false,
 });
+const dialog1 = reactive({
+  title: "设备维护",
+  visible: false,
+});
+const dialog2 = reactive({
+  title: "设备维护记录",
+  visible: false,
+});
+const userList = ref([])
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
@@ -62,17 +161,59 @@ const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
 const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
-
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
 const deviceInfo = (value) => {
   form.value.deviceNo = value.deviceNo
   dialog.visible = false
 }
+const maintenanceInfo = ref(null)
+const maintenance = (row)=>{
+  maintenanceInfo.value = row
+  maintenanceInfo.value.maintenanceContent = row.remark
+  maintenanceInfo.value.result = 0
+  dialog1.visible = true
+}
+const maintenanceList = (row)=>{
+  maintenanceInfo.value = row
+  dialog2.visible = true
+}
+const queryUserList = ()=>{
+  getUserList({}).then((data)=>{
+    userList.value = data.data
+  })
+}
+const maintenanceInfoForm = ref('maintenanceInfoForm')
+const maintenanceSubmit =()=>{
+  //alert(JSON.stringify(maintenanceInfo.value))
+  maintenanceInfoForm.value.validate((isValid, invalidFields) => {
+    if (isValid) {
+      maintenanceUpdate(maintenanceInfo.value).then((data)=>{
+        ElMessage({
+          message: data.msg,
+          type: "success",
+        });
+        maintenanceInfo.value = null
+        dialog1.visible = false
+        dataList()
+      })
+    }
+  })
+}
+const rules = reactive({
+  userName: [
+    // required是否必填,message不符合此规则时的提示信息,
+    // trigger触发此条规则校验的时机，有两个值, blur 或 change,默认就是blur和change都会进行校验
+    // min此字段的最小长度，max此字段的最大长度
+    // pattern 正则表达式
+    { required: true, message: '维护人员不能为空', trigger: 'blur' }
+  ]
+})
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
   delBtn: false,
   selection: true,
   labelWidth: 150,
+  viewBtn: false,
   column: [
     {
       label: "设备编号",
@@ -85,14 +226,17 @@ option.value = Object.assign(option.value, {
           trigger: "trigger",
         },
       ],
-      focus: ({ value, column }) => {
-        dialog.visible = true
+      click: ({ value, column }) => {
+        if(column.boxType){
+          dialog.visible = true
+        }
       },
     },
     {
       label: "设备名称",
       prop: "deviceName",
       display: false,
+      search: true,
     },
     {
       label: "设备类型",
@@ -123,8 +267,9 @@ option.value = Object.assign(option.value, {
     {
       label: "维护类型",
       prop: "type",
-      type: "select",
       search: true,
+      type: "select",
+      editDisplay: false,
       dicData: [{label: '点检',value:0},{label: '保养',value:1}],
       rules: [
         {
@@ -138,7 +283,6 @@ option.value = Object.assign(option.value, {
       label: "维护频次",
       prop: "cycle",
       type: "select",
-      search: true,
       dicUrl:
           dictDataUtil.request_url +
           dictDataUtil.TYPE_CODE.device_maintenance_cycle,
@@ -158,7 +302,7 @@ option.value = Object.assign(option.value, {
       label: "运行状态",
       prop: "runState",
       type: "select",
-      search: true,
+      display: false,
       dicUrl:
           dictDataUtil.request_url +
           dictDataUtil.TYPE_CODE.device_run_status,
@@ -178,7 +322,7 @@ option.value = Object.assign(option.value, {
       label: "维护状态",
       prop: "state",
       type: "select",
-      search: true,
+      addDisplay: false,
       dicData: [{label: '待维护',value:0},{label: '已维护',value:1}],
       rules: [
         {
@@ -189,7 +333,7 @@ option.value = Object.assign(option.value, {
       ],
     },
     {
-      label: "下次维护日期",
+      label: "维护日期",
       prop: "nextTime",
       type: "date",
       width: "120",
@@ -204,17 +348,18 @@ option.value = Object.assign(option.value, {
       ],
     },
     {
-      label: "备注",
+      label: "维护内容",
       prop: "remark",
       minRows: 2, //最小行/最小值
       type: "textarea", //类型为多行文本域框
       maxlength: 512, //最大输入长度
+      overHidden: true
     },
   ],
 });
 
 onMounted(() => {
-  // console.log("crudRef", crudRef)
   dataList();
+  queryUserList()
 });
 </script>

src/views/device/repair/index.vue

@@ -26,14 +26,107 @@
           >删除</el-button
         >
       </template>
+      <template #menu="{size,row,index}">
+        <el-button @click="maintenance(row,0)"
+                   icon="el-icon-check"
+                   text
+                   type="primary"
+                   :size="size">流程</el-button>
+        <el-button @click="maintenance(row,1)"
+                   icon="el-icon-fold"
+                   text
+                   type="primary"
+                   :size="size">记录</el-button>
+      </template>
     </avue-crud>
+    <el-dialog
+        v-model="dialog.visible"
+        :title="dialog.title"
+        width="850px"
+        @close="dialog.visible = false"
+    >
+      <device-page  @deviceInfo="deviceInfo"/>
+    </el-dialog>
+
+    <el-dialog
+        v-model="dialog1.visible"
+        :title="dialog1.title"
+        width="750px"
+        height="80%"
+        @close="dialog1.visible = false">
+      <el-timeline style="max-width: 500px;margin-left: 100px">
+        <el-timeline-item center type="success" placement="top">
+          <el-card>
+            <h4>设备报故</h4>
+            <p>设备编号： {{maintenanceInfo.deviceNo}}</p>
+            <p>设备名称： {{maintenanceInfo.deviceName}}</p>
+            <p>报故人员： {{maintenanceInfo.creator}}</p>
+            <p>故障描述： {{maintenanceInfo.bugRemark}}</p>
+            <p>报故时间： {{maintenanceInfo.created}}</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item center placement="top"  :type="maintenanceInfo.state === 0 ? 'primary' : 'success'">
+          <el-card v-if="viewPage">
+            <h4>设备维修</h4>
+            <p>维修人员： {{maintenanceInfo.handleUser}}</p>
+            <p>维修内容： {{maintenanceInfo.handleContent}}</p>
+            <p>处理结果： {{maintenanceInfo.handleUser ? (maintenanceInfo.handleResult === 0 ? '可正常运行' : '报废') : ''}}</p>
+          </el-card>
+          <el-card v-if="!viewPage">
+            <h4>设备维修</h4>
+            <el-form ref="maintenanceInfoForm1" :model="maintenanceInfo" label-width="auto" style="max-width: 400px" :rules="rules1">
+              <el-form-item label="维修人员" prop="handleUser">
+                <el-input :disabled="maintenanceInfo.state !== 0" v-model="maintenanceInfo.handleUser" />
+              </el-form-item>
+              <el-form-item label="维修内容" prop="handleContent">
+                <el-input :disabled="maintenanceInfo.state !== 0" type="textarea" :rows="2" v-model="maintenanceInfo.handleContent" />
+              </el-form-item>
+              <el-form-item label="处理结果">
+                <el-radio-group :disabled="maintenanceInfo.state !== 0" v-model="maintenanceInfo.handleResult" class="ml-4">
+                  <el-radio :value="0">可正常运行</el-radio>
+                  <el-radio :value="1">报废</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item style="margin-left: 45%">
+                <el-button type="primary" v-if="maintenanceInfo.state === 0" :disabled="maintenanceInfo.state !== 0" @click="maintenanceSubmit1">保存</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item center placement="top"  :type="maintenanceInfo.state === 1 ? 'primary' : maintenanceInfo.state === 0 ? 'info' : 'success'">
+          <el-card v-if="viewPage">
+            <h4>设备审批</h4>
+            <p>审批人员： {{maintenanceInfo.auditUser}}</p>
+            <p>审批结果： {{maintenanceInfo.auditUser ? (maintenanceInfo.auditResult === 0 ? '通过' : '不通过') : ''}}</p>
+          </el-card>
+          <el-card v-if="!viewPage">
+            <h4>设备审批</h4>
+            <el-form ref="maintenanceInfoForm2" v-if="maintenanceInfo.state >= 1" :model="maintenanceInfo" label-width="auto" style="max-width: 400px" :rules="rules2">
+              <el-form-item label="审批人员" prop="auditUser">
+                <el-input :disabled="maintenanceInfo.state !== 1 && readonly"  v-model="maintenanceInfo.auditUser" />
+              </el-form-item>
+              <el-form-item label="审批结果">
+                <el-radio-group :disabled="maintenanceInfo.state !== 1 && readonly" v-model="maintenanceInfo.auditResult" class="ml-4">
+                  <el-radio :value="0">通过</el-radio>
+                  <el-radio :value="1">不通过</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item style="margin-left: 45%">
+                <el-button type="primary" v-if="maintenanceInfo.state ===1" :disabled="maintenanceInfo.state !== 1" @click="maintenanceSubmit2">保存</el-button>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </el-dialog>
   </div>
 </template>
 <script setup>
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import ButtonPermKeys from "@/common/configs/buttonPermission";
-
+import {getUserList} from "@/api/user"
+import {repair,audit} from "@/api/device/index";
 import { useCommonStoreHook } from "@/store";
 import dictDataUtil from "@/common/configs/dictDataUtil";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
@@ -42,28 +135,97 @@ const test = () => {
   tableType.value = tableType.value == 1 ? 2 : 1;
 };
 
+const viewPage = ref(true)
+
+const dialog = reactive({
+  title: "设备选择",
+  visible: false,
+});
+const dialog1 = reactive({
+  title: "设备维修",
+  visible: false,
+});
+const userList = ref([])
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
-    src: "/api/v1/device",
+    src: "/api/v1/device/repair",
   });
 const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
-// checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
-// const permission = reactive({
-//   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
-//   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
-//   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
-//   menu: true,
-// });
-
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
-
+const deviceInfo = (value) => {
+  form.value.deviceNo = value.deviceNo
+  form.value.deviceName =value.deviceName
+  form.value.deviceType = value.deviceType
+  form.value.devicePosition = value.devicePosition
+  dialog.visible = false
+}
+const maintenanceInfo = ref(null)
+const maintenance = (row,type)=>{
+  viewPage.value = type === 0 ? false : true
+  maintenanceInfo.value = row
+  maintenanceInfo.value.handResult = 0
+  dialog1.visible = true
+}
+const queryUserList = ()=>{
+  getUserList({}).then((data)=>{
+    userList.value = data.data
+  })
+}
+const maintenanceInfoForm1 = ref('maintenanceInfoForm1')
+const maintenanceInfoForm2 = ref('maintenanceInfoForm2')
+const maintenanceSubmit1 =()=>{
+  //alert(JSON.stringify(maintenanceInfo.value))
+  maintenanceInfoForm1.value.validate((isValid, invalidFields) => {
+    if (isValid) {
+      repair(maintenanceInfo.value).then((data)=>{
+        ElMessage({
+          message: data.msg,
+          type: "success",
+        });
+        dialog1.visible = false
+        dataList()
+      })
+    }
+  })
+}
+const maintenanceSubmit2 =()=>{
+  //alert(JSON.stringify(maintenanceInfo.value))
+  maintenanceInfoForm2.value.validate((isValid, invalidFields) => {
+    if (isValid) {
+      audit(maintenanceInfo.value).then((data)=>{
+        ElMessage({
+          message: data.msg,
+          type: "success",
+        });
+        dialog1.visible = false
+        dataList()
+      })
+    }
+  })
+}
+const rules1 = reactive({
+  handleUser: [
+    { required: true, message: '维修人员不能为空', trigger: 'blur' }
+  ],
+  handleContent: [
+    { required: true, message: '维修内容不能为空', trigger: 'blur' }
+  ]
+})
+const rules2 = reactive({
+  auditUser: [
+    { required: true, message: '审批人员不能为空', trigger: 'blur' }
+  ]
+})
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
   delBtn: false,
   selection: true,
+  labelWidth: 150,
+  viewBtn: false,
+  editBtn: false,
   column: [
     {
       label: "设备编号",
@@ -76,23 +238,23 @@ option.value = Object.assign(option.value, {
           trigger: "trigger",
         },
       ],
+      click: ({ value, column }) => {
+        if(column.boxType){
+          dialog.visible = true
+        }
+      },
     },
     {
       label: "设备名称",
       prop: "deviceName",
+      addDisabled: true,
       search: true,
-      rules: [
-        {
-          required: true,
-          message: "设备名称不能为空",
-          trigger: "trigger",
-        },
-      ],
     },
     {
       label: "设备类型",
       prop: "deviceType",
       type: "select",
+      addDisabled: true,
       search: true,
       dicUrl:
         dictDataUtil.request_url +
@@ -110,61 +272,40 @@ option.value = Object.assign(option.value, {
       ],
     },
     {
-      label: "设备状态",
-      prop: "state",
-      type: "select",
-      search: true,
-      dicUrl:
-          dictDataUtil.request_url +
-          dictDataUtil.TYPE_CODE.device_status,
-      props: {
-        label: "dictLabel",
-        value: "dictValue",
-      },
-      rules: [
-        {
-          required: true,
-          message: "设备状态不能为空",
-          trigger: "trigger",
-        },
-      ],
+      label: "设备位置",
+      addDisabled: true,
+      prop: "devicePosition",
     },
     {
-      label: "负责人",
-      prop: "head",
-      rules: [
-        {
-          required: true,
-          message: "负责人不能为空",
-          trigger: "trigger",
-        },
-      ],
-    },
-    {
-      label: "供应厂商",
-      prop: "manufacturer",
-    },
-    {
-      label: "所在车间",
-      prop: "workshop",
+      label: "故障描述",
+      prop: "bugRemark",
+      minRows: 2, //最小行/最小值
+      type: "textarea", //类型为多行文本域框
+      maxlength: 512, //最大输入长度
     },
     {
-      label: "所在工位",
-      prop: "station",
+      label: "维修状态",
+      prop: "state",
+      type: "select",
+      display: false,
+      dicData:[{label: '待维修',value: 0},{label: '待审批 ',value: 1},{label: '已完成',value: 2}],
     },
     {
-      label: "规格",
-      prop: "specifications",
+      label: "报故人",
+      prop: "creator",
+      display: false,
     },
     {
-      label: "品牌",
-      prop: "brand",
+      label: "报故日期",
+      prop: "created",
+      width: "180",
+      display: false,
     },
   ],
 });
 
 onMounted(() => {
-  // console.log("crudRef", crudRef)
   dataList();
+  queryUserList()
 });
 </script>