|
|
@@ -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>
|
zhudie
