111

src/views/dashboard/monitor/actionColomns.vue

@@ -0,0 +1,117 @@
+<template>
+  <div style="display: flex">
+    <div style="display: flex; margin-right: 7px">
+      <div
+        v-if="!props.subItem.parent"
+        @click="changeConig"
+        class="wordStyle"
+        style="margin-right: 10px"
+        >页面设置</div
+      >
+      <div v-else style="margin-right: 10px; width: 56px"></div>
+      <div @click="changeAdd" class="wordStyle" style="margin-right: 7px">添加下一级</div></div
+    >
+    <div style="width: 1px; height: 14px; color: #e9e9e9; margin-right: 14px">|</div>
+    <img
+      src="../../../assets/icons/edit.png"
+      @click="changeEdit"
+      style="margin-right: 10px; cursor: pointer"
+      alt=""
+    />
+    <img
+      src="../../../assets/icons/delete.png"
+      @click="changeDelete"
+      style="margin-right: 10px; cursor: pointer"
+      alt=""
+    />
+    <img
+      src="../../../assets/icons/up.png"
+      @click="changeUp"
+      style="margin-right: 10px; cursor: pointer"
+      alt=""
+    />
+    <img
+      src="../../../assets/icons/down.png"
+      @click="changeDown"
+      style="margin-right: 10px; cursor: pointer"
+      alt=""
+    />
+
+    <!-- <el-button class="otp-btn" type="primary" @click="changeSubscribe">预约</el-button>
+    <el-button class="otp-btn" type="danger" @click="changeSubscribe">取消</el-button> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  //   import { SubscribeItem } from '@/api/subscribe/subscribe';
+
+  interface User {
+    name?: string;
+    tag?: string;
+    code?: string;
+    hasChildren?: boolean;
+    children?: User[];
+  }
+
+  const props = defineProps<{
+    subItem: User;
+    handleConig: (row) => unknown;
+    handleAdd: (row) => unknown;
+    handleEdit: (row) => unknown;
+    handleDelete: (row) => unknown;
+    handleUp: (row) => unknown;
+    handleDown: (row) => unknown;
+  }>();
+
+  const isBook = computed(() => (props.subscribeItem.booking === '0' ? true : false));
+
+  const changeConig = () => {
+    props.handleConig(props.subItem);
+  };
+
+  const changeAdd = () => {
+    props.handleAdd(props.subItem);
+  };
+
+  const changeEdit = () => {
+    props.handleEdit(props.subItem);
+  };
+
+  const changeDelete = () => {
+    props.handleDelete(props.subItem);
+  };
+
+  const changeUp = () => {
+    props.handleUp(props.subItem);
+  };
+
+  const changeDown = () => {
+    props.handleDown(props.subItem);
+  };
+</script>
+
+<style scoped>
+  .wordStyle {
+    height: 22px;
+    font-size: 14px;
+    color: #1890ff;
+    line-height: 22px;
+    cursor: pointer;
+  }
+  .otp-btn {
+    width: 52px;
+    height: 26px;
+  }
+
+  :deep(.el-button--primary) {
+    --el-button-bg-color: #3f9eff;
+    --el-button-hover-bg-color: #64b0fe;
+    --el-button-active-bg-color: #2f8ae7;
+  }
+  :deep(.el-button--danger) {
+    --el-button-bg-color: #f56c6c;
+    --el-button-hover-bg-color: #f68888;
+    --el-button-active-bg-color: #c35353;
+  }
+</style>

src/views/dashboard/monitor/monitor.vue

@@ -1,9 +1,9 @@
 <template>
   <page-wrapper>
-    <el-card :bordered="false" class="proCard">
+    <el-card :bordered="false" class="proCard" style="position: relative">
       <BasicTable
         :columns="colomns"
-        :data-source="tableData.length > 0 ? tableData : tableDedault"
+        :data-source="tableData"
         :row-key="(row) => row.name"
         :action-column="actionColumn"
         :pagination="{ total: total, pageSize: pageSize }"
@@ -14,6 +14,7 @@
           fullscreen: false,
           striped: false,
           setting: false,
+          order: false,
         }"
         ref="tableRef"
         @checked-row-change="onCheckedRow"
@@ -33,9 +34,80 @@
           </el-button>
         </template>
       </BasicTable>
+      <div v-if="tableData.length === 0" class="data-none"
+        ><img src="../../../assets/icons/no-content.png" alt="" />
+        <div class="data-none-word">目前无内容，请先添加场景</div></div
+      >
     </el-card>
 
     <!-- 添加的抽屉内容 -->
+
+    <!-- 公司 -->
+    <el-drawer class="test" v-model="tableCom" with-header="true" size="30%">
+      <template #header="{ titleId }">
+        <p :id="titleId">添加公司</p>
+      </template>
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="90px"
+        class="demo-ruleForm"
+        size="default"
+        status-icon
+      >
+        <el-form-item label="公司名称" prop="name">
+          <el-input v-model="ruleForm.name" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="上级场景" prop="seniorScene">
+          <el-input v-model="ruleForm.seniorScene" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="公司代码" prop="workshopCode">
+          <el-input v-model="ruleForm.sceneCode" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="标签&模板" prop="sceneCode">
+          <div style="width: 200px; height: 30px"></div>
+          <div
+            v-for="(item, index) in selectItems"
+            :key="index"
+            style="margin-bottom: 16px; display: flex"
+          >
+            <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
+              <el-option
+                v-for="item1 in options"
+                :key="item1.value"
+                :label="item1.label"
+                :value="item1.value"
+              />
+            </el-select>
+            <img
+              src="../../../assets/icons/link.png"
+              alt=""
+              style="width: 16px; margin-left: 2px; margin-right: 2px" />
+            <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
+              <el-option
+                v-for="item2 in options"
+                :key="item2.value"
+                :label="item2.label"
+                :value="item2.value"
+              /> </el-select
+          ></div>
+          <div style="width: 200px">
+            <el-icon size="large" @click="addChange" style="cursor: pointer"><CirclePlus /></el-icon
+          ></div>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
+        </el-form-item>
+      </el-form>
+      <div style="margin-left: 100px; margin-top: 100px">
+        <el-button type="warning" @click="resetDraw">重置</el-button>
+        <el-button type="primary" @click="addNewTypeCom"> 提交 </el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 车间 -->
+
     <el-drawer class="test" v-model="table" with-header="true" size="40%">
       <template #header="{ titleId }">
         <p :id="titleId">添加类别</p>
@@ -66,15 +138,16 @@
         </el-form-item>
       </el-form>
       <div style="margin-left: 100px; margin-top: 100px">
-        <el-button type="warning" @click="drawerReset">重置</el-button>
+        <el-button type="warning" @click="resetDraw">重置</el-button>
         <el-button type="primary" @click="addNewType"> 提交 </el-button>
       </div>
     </el-drawer>
 
-    <!-- 编辑的抽屉内容 -->
-    <el-drawer class="test" v-model="editDrawerVisible" with-header="true" size="40%">
+    <!-- 工位 -->
+
+    <el-drawer class="test" v-model="table" with-header="true" size="40%">
       <template #header="{ titleId }">
-        <p :id="titleId">添加车间</p>
+        <p :id="titleId">添加类别</p>
       </template>
       <el-form
         ref="ruleFormRef"
@@ -88,8 +161,8 @@
         <el-form-item label="车间名称" prop="name">
           <el-input v-model="ruleForm.name" />
         </el-form-item>
-        <el-form-item label="上级场景">
-          <el-input v-model="ruleForm.seniorScene" disabled="true" />
+        <el-form-item label="上级场景" prop="seniorScene">
+          <el-input v-model="ruleForm.seniorScene" />
         </el-form-item>
         <el-form-item label="车间代码" prop="workshopCode">
           <el-input v-model="ruleForm.workshopCode" />
@@ -101,43 +174,57 @@
           <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
         </el-form-item>
       </el-form>
+      <div style="margin-left: 100px; margin-top: 100px">
+        <el-button type="warning" @click="resetDraw">重置</el-button>
+        <el-button type="primary" @click="addNewType"> 提交 </el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 编辑的抽屉内容 -->
+    <el-drawer class="test" v-model="editDrawerVisible" with-header="true" size="40%">
+      <template #header="{ titleId }">
+        <p :id="titleId">编辑场景</p>
+      </template>
+      <el-form
+        ref="ruleFormRef2"
+        :model="ruleForm2"
+        :rules="rules2"
+        label-width="120px"
+        class="demo-ruleForm"
+        size="default"
+        status-icon
+      >
+        <el-form-item label="场景名称" prop="name">
+          <el-input v-model="ruleForm2.name" />
+        </el-form-item>
+        <el-form-item label="场景标签" prop="tag">
+          <el-input v-model="ruleForm2.tag" />
+        </el-form-item>
+        <el-form-item label="场景代码" prop="code">
+          <el-input v-model="ruleForm2.code" />
+        </el-form-item>
+        <!-- <el-form-item label="场景标签" prop="sceneCode">
+          <el-input v-model="ruleForm.sceneCode" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
+        </el-form-item> -->
+      </el-form>
+      <div style="margin-left: 100px; margin-top: 100px">
+        <el-button type="primary" @click="editedSub"> 提交 </el-button>
+      </div>
     </el-drawer>
   </page-wrapper>
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, reactive, h } from 'vue';
-  import { Plus, CaretBottom } from '@element-plus/icons-vue';
+  import { ref, onMounted, reactive, h, watch, computed } from 'vue';
+  import { Plus, CaretBottom, CirclePlus } from '@element-plus/icons-vue';
   import { TableAction, BasicTable, BasicColumn } from '@/components/Table';
   // import { getColumns } from './part-columns';
   import type { FormInstance, FormRules } from 'element-plus';
   import { ElMessageBox } from 'element-plus';
-  import { dataURLtoBlob } from '@/utils/file/base64Conver';
-  // import { SearchOutlined } from '@vicons/antd';
-  // import { PartItem, PartDeleteData, PartAddData, PartEditData } from '@/api/part/part-type';
-  // import usePartTypes from './use-parts';
-
-  // const parts = usePartTypes();
-  // const {
-  //   partItems,
-  //   queryTypeName,
-  //   getPartItems,
-  //   pageNum,
-  //   sortItem,
-  //   orderType,
-  //   addPartTpe,
-  //   deletePartType,
-  //   editPartType,
-  // } = parts;
-
-  // onMounted(() => {
-  //   getPartItems();
-  // });
-
-  // const conditionQuery = () => {
-  //   pageNum.value = 1;
-  //   getPartItems();
-  // };
+  import ActionColomn from './actionColomns.vue';
 
   const total = ref<number>(100);
   const pageSize = ref<number>(10);
@@ -145,7 +232,7 @@
   const colomns = [
     { label: '场景名称', prop: 'name', width: 300 },
     { label: '场景标签', prop: 'tag', width: 300 },
-    { label: '场景代码', prop: 'code' },
+    { label: '代码', prop: 'code' },
   ];
 
   interface User {
@@ -156,6 +243,33 @@
     children?: User[];
   }
 
+  interface DataSourceUser extends User {
+    parent: User | null;
+  }
+
+  const dataSourceWithParent = (d: (User | DataSourceUser)[], parent: DataSourceUser | null) => {
+    d.forEach((item, _index) => {
+      item.parent = parent;
+
+      if (item.children && item.children?.length > 0) {
+        dataSourceWithParent(item.children, item);
+      }
+    });
+
+    return d;
+  };
+
+  const options = [
+    {
+      value: 'Option1',
+      label: 'Option1',
+    },
+    {
+      value: 'Option2',
+      label: 'Option2',
+    },
+  ];
+
   const tableDedault = ref<User[]>([{ name: '请添加第一个公司场景' }]);
 
   const tableData = ref<User[]>([
@@ -206,25 +320,34 @@
       code: 'wangxiaohu',
     },
   ]);
+  onMounted(() => {
+    dataSourceWithParent(tableData.value, null);
+    console.log(tableData.value);
+  });
+
+  watch(
+    tableData.value,
+    () => {
+      dataSourceWithParent(tableData.value, null);
+    },
+    { deep: true },
+  );
 
   // const tableData: User[] =
   function onCheckedRow(rowKeys) {
     console.log(rowKeys);
   }
 
-  const orderByItem = (sortInfo: any) => {
-    // sortItem.value = sortInfo.prop;
-    // orderType.value = sortInfo.order;
-    // getPartItems();
-  };
+  const orderByItem = () => {};
   const handlePageNumChange = () => {};
   const handlePageSizeChange = () => {};
 
   //添加组件的添加功能
   const table = ref(false);
+  const tableCom = ref(false);
 
   const companyAdd = () => {
-    table.value = true;
+    tableCom.value = true;
     ruleForm.seniorScene = '顶级场景';
   };
 
@@ -255,12 +378,51 @@
 
   const resetDraw = () => {
     ruleForm.name = '';
-    ruleForm.seniorScene = '';
+    // ruleForm.seniorScene = '';
     ruleForm.workshopCode = '';
     ruleForm.sceneCode = '';
+    addEnable.value = '1';
+    selectItems.value = [];
+  };
+
+  const addChange = () => {
+    selectItems.value.push({
+      tag: '',
+      template: '',
+    });
+    console.log(selectItems.value);
+  };
+
+  const addNewTypeCom = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+
+    // const filteredData = computed(() => {
+    //   return selectItems.value.filter((item) => item.tag !== '' && item.name !== '');
+    // });
+    selectItems.value = selectItems.value.filter((item) => {
+      return item.tag && item.template;
+    });
+
+    const newData = {
+      name: ruleForm.name,
+      tag: selectItems.value,
+      code: ruleForm.sceneCode,
+    };
+
+    if (ruleForm.seniorScene === '顶级场景') {
+      tableData.value.push(newData);
+      console.log(tableData.value);
+    } else {
+      updateData(tableData.value, ruleForm.seniorScene, newData);
+      console.log(tableData.value);
+    }
+
+    resetDraw();
+    tableCom.value = false;
   };
 
-  const addNewType = () => {
+  const addNewType = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
     const newData = {
       name: ruleForm.name,
       tag: ruleForm.sceneCode,
@@ -269,42 +431,64 @@
 
     if (ruleForm.seniorScene === '顶级场景') {
       tableData.value.push(newData);
+      console.log(tableData.value);
     } else {
       updateData(tableData.value, ruleForm.seniorScene, newData);
+      console.log(tableData.value);
     }
+    console.log(selectItems.value);
 
     resetDraw();
-    table.value = false;
+    tableCom.value = false;
   };
-  //添加中的内容板块
-  // const name = ref('');
-  // const seniorScene = ref('');
-  // const workshopCode = ref('');
-  // const sceneCode = ref('');
 
   // 新增类型的参数值
   const addName = ref('');
   const addEnable = ref('1');
+  const tagSingle = ref<string>();
+  const templateSingle = ref<string>();
+
+  const selectItems = ref([{ tag: '', template: '' }] as { tag: string; template: string }[]);
+
+  // ruleForm.tagCom?.push(tagSingle.value!);
+  // ruleForm.templateCom?.push(templateSingle.value!);
+  // console.log(ruleForm.tagCom);
+  // console.log(ruleForm.templateCom);
+  // };
 
   const ruleFormRef = ref<FormInstance>();
 
   interface RuleForm {
-    name: string;
-    seniorScene: string;
-    workshopCode: string;
-    sceneCode: string;
+    name: string; //名称
+    seniorScene: string; //上级场景
+    workshopCode: string; //代码
+    sceneCode: string; //场景代码
+    tagCom?: string[]; //公司场景标签 可选多个
+    templateCom?: string[]; //公司场景模板 可选多个
+    tagWorkshop?: string; //场景标签  车间
+    templateWorkshop?: string; //车间模板
+    leader?: string; //负责人
   }
   const ruleForm = reactive<RuleForm>({
     name: '',
     seniorScene: '',
     workshopCode: '',
     sceneCode: '',
+    tagCom: [],
+    templateCom: [],
+    tagWorkshop: '',
+    templateWorkshop: '',
+    leader: '',
   });
   const rules = reactive<FormRules<RuleForm>>({
     name: [
       { required: true, message: '', trigger: 'blur' },
       { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
     ],
+    seniorScene: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
     workshopCode: [
       { required: true, message: '', trigger: 'blur' },
       { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
@@ -313,45 +497,118 @@
       { required: true, message: '', trigger: 'blur' },
       { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
     ],
+    tagCom: [{ required: true, message: '', trigger: 'blur' }],
+    templateCom: [{ required: true, message: '', trigger: 'blur' }],
+    tagWorkshop: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    templateWorkshop: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    leader: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+  });
+
+  //编辑规则
+  const ruleFormRef2 = ref<FormInstance>();
+
+  interface RuleForm2 {
+    name: string;
+    tag: string;
+    code: string;
+  }
+  const ruleForm2 = reactive<RuleForm2>({
+    name: '',
+    tag: '',
+    code: '',
+  });
+  const rules2 = reactive<FormRules2<RuleForm2>>({
+    name: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    tag: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    code: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
   });
 
   //drawer中的按钮功能
-  const drawerReset = () => {
-    addName.value = '';
-    addEnable.value = '1';
-  };
+  // const drawerReset = () => {
+  //   addName.value = '';
+  //   addEnable.value = '1';
+  // };
+
+  //操作列
+  // const actionColumn: BasicColumn = reactive({
+  //   width: 350,
+  //   label: '操作',
+  //   key: 'action',
+  //   fixed: 'right',
+  //   render(record) {
+  //     return h(TableAction as any, {
+  //       style: 'icon',
+  //       actions: [
+  //         {
+  //           label: '页面配置',
+  //           isConfirm: false,
+  //           onClick: handleConfig.bind(null, record.row),
+  //         },
+  //         {
+  //           label: '添加下一级',
+  //           isConfirm: false,
+  //           onClick: handleAdd.bind(null, record.row),
+  //         },
+  //         {
+  //           label: '删除',
+  //           isConfirm: false,
+  //           onClick: handleDelete.bind(null, record.row),
+  //         },
+  //         {
+  //           label: '编辑',
+  //           onClick: handleEdit.bind(null, record.row),
+  //         },
+  //       ],
+  //     });
+  //   },
+  // });
 
   //操作列
   const actionColumn: BasicColumn = reactive({
-    width: 250,
+    width: 350,
     label: '操作',
+    prop: 'booking',
     key: 'action',
     fixed: 'right',
     render(record) {
-      return h(TableAction as any, {
-        style: 'button',
-        actions: [
-          {
-            label: '添加下一级',
-            isConfirm: false,
-            onClick: handleAdd.bind(null, record.row),
-          },
-          {
-            label: '删除',
-            isConfirm: false,
-            onClick: handleDelete.bind(null, record.row),
-          },
-          {
-            label: '编辑',
-            onClick: handleEdit.bind(null, record.row),
-          },
-        ],
+      return h(ActionColomn, {
+        subItem: record.row,
+        handleConig: handleConfig,
+        handleAdd: handleAdd,
+        handleEdit: handleEdit,
+        handleDelete: handleDelete,
+        handleUp: rowUp,
+        handleDown: rowDown,
       });
     },
   });
 
   //表单中的Operations
 
+  const handleClick = () => {};
+
+  const handleConfig = (row) => {
+    console.log(row);
+  };
+
   const handleAdd = (row) => {
     console.log(row);
 
@@ -359,6 +616,37 @@
     ruleForm.seniorScene = row.name;
   };
 
+  const editedItem = ref<User>({} as User);
+
+  // 在这里实现删除行的函数
+  const deleteTableRow = (name) => {
+    const deleteRecursive = (data) => {
+      for (let i = 0; i < data.length; i++) {
+        const currentItem = data[i];
+
+        if (currentItem.name === name) {
+          // 删除当前项
+          data.splice(i, 1);
+          return true;
+        }
+
+        // 如果有子项，递归查找
+        if (currentItem.children && currentItem.children.length > 0) {
+          const found = deleteRecursive(currentItem.children);
+
+          if (found) {
+            return true; // 如果在子项中找到目标项，停止继续查找
+          }
+        }
+      }
+
+      return false; // 表示未找到目标项
+    };
+
+    // 从顶层开始递归删除
+    deleteRecursive(tableData.value);
+  };
+
   const handleDelete = (row: Recordable) => {
     ElMessageBox.confirm('您确认要删除该数据吗？', 'Warning', {
       confirmButtonText: '确认',
@@ -366,6 +654,9 @@
       type: 'warning',
     })
       .then(() => {
+        if (row && row.name) {
+          deleteTableRow(row.name);
+        }
         // console.log('确认删除物件');
         // const deleteData = {
         //   partTypeId: row.partTypeId,
@@ -380,15 +671,49 @@
   };
 
   const handleEdit = (row) => {
-    // editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
-    // editDrawerVisible.value = true;
-    // console.log(editedItem.value);
+    editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
+    ruleForm2.name = editedItem.value.name!;
+    ruleForm2.tag = editedItem.value.tag!;
+    ruleForm2.code = editedItem.value.code!;
+    editDrawerVisible.value = true;
   };
 
   const editDrawerVisible = ref(false);
   // const editedItem = ref<PartItem>({} as PartItem);
 
-  const editedNewType = () => {
+  //编辑时的提交按钮功能
+
+  const editTableRow = (name, newName, newTag, newCode) => {
+    const editTRecursive = (data) => {
+      for (let i = 0; i < data.length; i++) {
+        const currentItem = data[i];
+
+        if (currentItem.name === name) {
+          // 修改
+          currentItem.name = newName;
+          currentItem.tag = newTag;
+          currentItem.code = newCode;
+          return true;
+        }
+
+        // 如果有子项，递归查找
+        if (currentItem.children && currentItem.children.length > 0) {
+          const found = editTRecursive(currentItem.children);
+
+          if (found) {
+            return true; // 如果在子项中找到目标项，停止继续查找
+          }
+        }
+      }
+
+      return false; // 表示未找到目标项
+    };
+
+    // 从顶层开始递归删除
+    editTRecursive(tableData.value);
+  };
+
+  const editedSub = () => {
     // const editedData = {
     //   typeName: editedItem.value.typeName,
     //   partTypeId: editedItem.value.partTypeId,
@@ -398,9 +723,12 @@
     // console.log(editedData);
     // editPartType(editedData);
     // editDrawerVisible.value = false;
+
+    editTableRow(editedItem.value.name, ruleForm2.name, ruleForm2.tag, ruleForm2.code);
+    editDrawerVisible.value = false;
   };
   //表单中的启动状态
-  const handleSwitchChange = (row: PartItem) => {
+  const handleSwitchChange = (_row: PartItem) => {
     // row.enable = row.enable === '1' ? '0' : '1';
     // const editData = {
     //   partTypeId: row.partTypeId,
@@ -410,10 +738,74 @@
     // editPartType(editData);
   };
 
+  //排序
+  // const isLastCss = (parent, children, row) => {
+  //   return (
+  //     (parent && children.indexOf(row) === children.length - 1) ||
+  //     tableData.value.indexOf(row) === tableData.value.length - 1
+  //   );
+  // };
+
+  // const isFirstCss = (parent, children, row) => {
+  //   return (parent && children.indexOf(row) === 0) || tableData.value.indexOf(row) === 0;
+  // };
+
+  const rowUp = (row: User) => {
+    if (row.parent) {
+      const parentIndex = row.parent.children!.indexOf(row);
+      if (parentIndex > 0) {
+        const previousRow = row.parent.children![parentIndex - 1];
+        // 进行交换位置
+        row.parent.children!.splice(parentIndex - 1, 2, row, previousRow);
+      }
+    } else {
+      const index = tableData.value.indexOf(row);
+      if (index > 0) {
+        tableData.value.splice(index - 1, 2, row, tableData.value[index - 1]);
+      }
+    }
+  };
+
+  const rowDown = (row: User) => {
+    if (row.parent) {
+      const parentIndex = row.parent.children!.indexOf(row);
+      if (parentIndex < row.parent.children?.length - 1) {
+        const behindRow = row.parent.children![parentIndex + 1];
+        // 进行交换位置
+        row.parent.children!.splice(parentIndex, 2, behindRow, row);
+      }
+    } else {
+      const index = tableData.value.indexOf(row);
+      if (index < tableData.value.length - 1) {
+        tableData.value.splice(index, 2, tableData.value[index + 1], row);
+      }
+    }
+    // }
+  };
   // const columns = getColumns(handleSwitchChange);
 </script>
 
 <style scoped>
+  /* .card{
+    displa;
+  } */
+
+  .data-none {
+    position: absolute;
+    /* left: 383px; */
+    right: 492px;
+    top: 200px;
+  }
+
+  .data-none-word {
+    width: 264px;
+    height: 30px;
+    font-size: 22px;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 30px;
+    margin-left: 61px;
+  }
+
   .cark-line {
     margin-top: 16px;
   }
@@ -471,7 +863,7 @@
     align-items: center;
   }
   /* :deep(.el-table--default .cell) {
-    white-space: nowrap;
-    overflow: auto;
-  } */
+        white-space: nowrap;
+        overflow: auto;
+      } */
 </style>