|
|
@@ -1,919 +0,0 @@
|
|
|
-<template>
|
|
|
- <page-wrapper>
|
|
|
- <el-card :bordered="false" class="proCard" style="position: relative">
|
|
|
- <BasicTable
|
|
|
- :columns="colomns"
|
|
|
- :data-source="tableData"
|
|
|
- :row-key="(row) => row.name"
|
|
|
- :action-column="actionColumn"
|
|
|
- :pagination="{ total: total, pageSize: pageSize }"
|
|
|
- :tableSetting="{
|
|
|
- width: 200,
|
|
|
- size: false,
|
|
|
- redo: false,
|
|
|
- fullscreen: false,
|
|
|
- striped: false,
|
|
|
- setting: false,
|
|
|
- order: false,
|
|
|
- }"
|
|
|
- ref="tableRef"
|
|
|
- @checked-row-change="onCheckedRow"
|
|
|
- @order-change="orderByItem"
|
|
|
- @page-num-change="handlePageNumChange"
|
|
|
- @page-size-change="handlePageSizeChange"
|
|
|
- style="height: 800px"
|
|
|
- >
|
|
|
- <template #tableTitle>
|
|
|
- <el-button type="primary" @click="companyAdd">
|
|
|
- <template #icon>
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- 添加
|
|
|
- </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="35%">
|
|
|
- <template #header="{ titleId }">
|
|
|
- <p :id="titleId">{{ companyAddTitle }}</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" disabled />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="公司代码" prop="workshopCode">
|
|
|
- <el-input v-model="ruleForm.workshopCode" 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>
|
|
|
- <img
|
|
|
- src="../../../assets/icons/close.png"
|
|
|
- @click="deleScene(index)"
|
|
|
- alt=""
|
|
|
- style="
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- margin-top: 10px;
|
|
|
- margin-left: 3px;
|
|
|
- cursor: pointer;
|
|
|
- "
|
|
|
- /></div>
|
|
|
- <div style="width: 200px">
|
|
|
- <el-icon size="28px" @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="position: absolute; left: 108px; bottom: 67px">
|
|
|
- <el-button v-if="companyAddTitle === '添加公司'" type="warning" @click="resetDraw"
|
|
|
- >重置</el-button
|
|
|
- >
|
|
|
- <el-button type="primary" v-if="companyAddTitle === '添加公司'" @click="addNewTypeCom">
|
|
|
- 提交
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" v-if="companyAddTitle !== '添加公司'" @click="editedSub">
|
|
|
- 提交
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </el-drawer>
|
|
|
-
|
|
|
- <!-- 车间和工位 -->
|
|
|
-
|
|
|
- <el-drawer class="test" v-model="table" with-header="true" size="35%">
|
|
|
- <template #header="{ titleId }">
|
|
|
- <p :id="titleId">{{ addTitle }}</p>
|
|
|
- </template>
|
|
|
- <el-form
|
|
|
- ref="ruleFormRef"
|
|
|
- :model="ruleForm"
|
|
|
- :rules="rules"
|
|
|
- label-width="120px"
|
|
|
- class="demo-ruleForm"
|
|
|
- size="default"
|
|
|
- status-icon
|
|
|
- >
|
|
|
- <el-form-item :label="`${addName}`" prop="name">
|
|
|
- <el-input v-model="ruleForm.name" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上级场景" prop="seniorScene">
|
|
|
- <el-input v-model="ruleForm.seniorScene" disabled />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="车间代码" prop="workshopCode">
|
|
|
- <el-input v-model="ruleForm.workshopCode" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="level === 0" label="场景标签" prop="tagWorkshop">
|
|
|
- <el-radio-group
|
|
|
- v-model="ruleForm.tagWorkshop"
|
|
|
- size="10px"
|
|
|
- style="display: flex; justify-content: space-between"
|
|
|
- >
|
|
|
- <el-radio-button :label="item" :key="item" v-for="item in tagList" class="tag-select" />
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="level === 0" label="车间模板" prop="templateWorkshop">
|
|
|
- <el-radio-group
|
|
|
- v-model="ruleForm.templateWorkshop"
|
|
|
- size="10px"
|
|
|
- style="display: flex; justify-content: space-between"
|
|
|
- >
|
|
|
- <el-radio-button
|
|
|
- :label="item"
|
|
|
- :key="item"
|
|
|
- v-for="item in templateList"
|
|
|
- class="tag-select"
|
|
|
- />
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item v-if="level === 1" label="负责人" prop="leader">
|
|
|
- <el-input v-model="ruleForm.leader" />
|
|
|
- </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="position: absolute; left: 108px; bottom: 67px">
|
|
|
- <el-button
|
|
|
- v-if="addTitle === '添加车间' || addTitle === '添加工位'"
|
|
|
- type="warning"
|
|
|
- @click="resetDraw"
|
|
|
- >重置</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- v-if="addTitle === '添加车间' || addTitle === '添加工位'"
|
|
|
- type="primary"
|
|
|
- @click="addNewType"
|
|
|
- >
|
|
|
- 提交
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- v-if="addTitle === '编辑车间' || addTitle === '编辑工位'"
|
|
|
- type="primary"
|
|
|
- @click="editedSub"
|
|
|
- >
|
|
|
- 提交
|
|
|
- </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 v-if="level === 1" 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>
|
|
|
- <div style="position: absolute; left: 108px; bottom: 67px">
|
|
|
- <el-button type="primary" @click="editedSub"> 提交 </el-button>
|
|
|
- </div>
|
|
|
- </el-drawer> -->
|
|
|
- </page-wrapper>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
- import { ref, onMounted, reactive, h, watch } from 'vue';
|
|
|
- import { Plus, CirclePlus } from '@element-plus/icons-vue';
|
|
|
- import { BasicTable, BasicColumn } from '@/components/Table';
|
|
|
- import type { FormInstance, FormRules } from 'element-plus';
|
|
|
- import { ElMessageBox } from 'element-plus';
|
|
|
- import ActionColomn from './actionColomns.vue';
|
|
|
- import {
|
|
|
- User,
|
|
|
- colomns,
|
|
|
- dataSourceWithParent,
|
|
|
- deleteTableRow,
|
|
|
- editTableRow,
|
|
|
- findItemLevel,
|
|
|
- options,
|
|
|
- tableData,
|
|
|
- updateData,
|
|
|
- } from './constant';
|
|
|
- import {
|
|
|
- ComAddDatas,
|
|
|
- companyAdd,
|
|
|
- companyEdit,
|
|
|
- companyDel,
|
|
|
- WorkshopAddDatas,
|
|
|
- workshopAdd,
|
|
|
- workshopEdit,
|
|
|
- workshopDel,
|
|
|
- WorkspaceAddDatas,
|
|
|
- workspaceAdd,
|
|
|
- workspaceEdit,
|
|
|
- workspaceDel,
|
|
|
- SceneListType,
|
|
|
- GetListWorkshop,
|
|
|
- getSceneList,
|
|
|
- } from '@/api/scene/sceneOperate';
|
|
|
-
|
|
|
- const total = ref<number>(100);
|
|
|
- const pageSize = ref<number>(10);
|
|
|
-
|
|
|
- onMounted(() => {
|
|
|
- //添加父级，主要用于排序功能
|
|
|
- dataSourceWithParent(tableData.value, null);
|
|
|
- // console.log(tableData.value);
|
|
|
- });
|
|
|
-
|
|
|
- //用于新增数据后，将新增数据加入父级
|
|
|
- watch(
|
|
|
- tableData.value,
|
|
|
- () => {
|
|
|
- dataSourceWithParent(tableData.value, null);
|
|
|
- console.log(tableData.value);
|
|
|
- },
|
|
|
- { deep: true },
|
|
|
- );
|
|
|
-
|
|
|
- function onCheckedRow(rowKeys) {
|
|
|
- console.log(rowKeys);
|
|
|
- }
|
|
|
-
|
|
|
- const orderByItem = () => {};
|
|
|
- const handlePageNumChange = () => {};
|
|
|
- const handlePageSizeChange = () => {};
|
|
|
-
|
|
|
- //添加组件的添加功能
|
|
|
- const table = ref(false); //添加公司级的场景
|
|
|
- const tableCom = ref(false); //添加车间或者工位
|
|
|
-
|
|
|
- //添加公司级场景
|
|
|
-
|
|
|
- const companyAddTitle = ref('添加公司');
|
|
|
-
|
|
|
- const companyAdd = () => {
|
|
|
- tableCom.value = true;
|
|
|
- resetDraw();
|
|
|
- ruleForm.seniorScene = '顶级场景';
|
|
|
- companyAddTitle.value = '添加公司';
|
|
|
- };
|
|
|
-
|
|
|
- //重置编辑框
|
|
|
- const resetDraw = () => {
|
|
|
- ruleForm.name = '';
|
|
|
- // ruleForm.seniorScene = '';
|
|
|
- ruleForm.workshopCode = '';
|
|
|
- ruleForm.sceneCode = '';
|
|
|
- addEnable.value = '1';
|
|
|
- selectItems.value = [{ tag: '', template: '' }];
|
|
|
- ruleForm.leader = '';
|
|
|
- ruleForm.templateWorkshop = '';
|
|
|
- ruleForm.tagWorkshop = '';
|
|
|
- };
|
|
|
-
|
|
|
- //用于新增场景
|
|
|
- const selectItems = ref([{ tag: '', template: '' }] as { tag: string; template: string }[]);
|
|
|
- const addChange = () => {
|
|
|
- selectItems.value.push({
|
|
|
- tag: '',
|
|
|
- template: '',
|
|
|
- });
|
|
|
- console.log(selectItems.value);
|
|
|
- };
|
|
|
-
|
|
|
- //删除顶级场景的场景
|
|
|
- const deleScene = (index) => {
|
|
|
- // console.log('row', index);
|
|
|
- ElMessageBox.confirm('请确认是否关闭该场景？', '状态关闭', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- selectItems.value.splice(index, 1);
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- console.log('取消删除物件');
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- //找出数据中的全部code
|
|
|
- const flattenCodes = (data) => {
|
|
|
- const codes = [];
|
|
|
- const traverse = (node) => {
|
|
|
- codes.push(node.code);
|
|
|
- if (node.children && node.children.length > 0) {
|
|
|
- node.children.forEach(traverse);
|
|
|
- }
|
|
|
- };
|
|
|
- data.forEach(traverse);
|
|
|
- return codes;
|
|
|
- };
|
|
|
-
|
|
|
- //添加公司场景的提交按钮
|
|
|
- const addNewTypeCom = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
-
|
|
|
- //选出不为空字符串的数据
|
|
|
- selectItems.value = selectItems.value.filter((item) => {
|
|
|
- return item.tag && item.template;
|
|
|
- });
|
|
|
- ruleForm.tagCom = selectItems.value.map((item) => {
|
|
|
- return item.tag + '-' + item.template;
|
|
|
- });
|
|
|
-
|
|
|
- const newData = {
|
|
|
- name: ruleForm.name,
|
|
|
- Toptag: ruleForm.tagCom,
|
|
|
- code: ruleForm.workshopCode,
|
|
|
- status: addEnable.value,
|
|
|
- seniorScene: ruleForm.seniorScene,
|
|
|
- };
|
|
|
-
|
|
|
- //取出数据中所有的code数据
|
|
|
- const allCodes = flattenCodes(tableData.value);
|
|
|
-
|
|
|
- //判断新数据中是否与原有的code重复
|
|
|
- if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
|
|
|
- ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'error',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- ruleForm.workshopCode = '';
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- console.log('取消删除物件');
|
|
|
- });
|
|
|
- } else {
|
|
|
- tableData.value.push(newData);
|
|
|
- resetDraw();
|
|
|
- tableCom.value = false;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- //新增工位或者车间的提交按钮
|
|
|
- const addNewType = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return;
|
|
|
- const newData = {
|
|
|
- name: ruleForm.name,
|
|
|
- seniorScene: ruleForm.seniorScene,
|
|
|
- tag: ruleForm.tagWorkshop,
|
|
|
- code: ruleForm.workshopCode,
|
|
|
- templeteRoom: ruleForm.templateWorkshop,
|
|
|
- status: addEnable.value,
|
|
|
- leader: ruleForm.leader,
|
|
|
- Toptag: tagList.value,
|
|
|
- };
|
|
|
- const allCodes = flattenCodes(tableData.value);
|
|
|
-
|
|
|
- if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
|
|
|
- ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'error',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- ruleForm.sceneCode = '';
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- console.log('取消删除物件');
|
|
|
- });
|
|
|
- } else {
|
|
|
- updateData(tableData.value, ruleForm.seniorScene, newData);
|
|
|
- resetDraw();
|
|
|
- table.value = false;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 新增类型的参数值
|
|
|
- const addEnable = ref('1'); //启动按钮的值
|
|
|
-
|
|
|
- //表格中的规则
|
|
|
- const ruleFormRef = ref<FormInstance>();
|
|
|
-
|
|
|
- interface RuleForm {
|
|
|
- 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' },
|
|
|
- ],
|
|
|
- sceneCode: [
|
|
|
- { 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' },
|
|
|
- ],
|
|
|
- });
|
|
|
-
|
|
|
- //操作列
|
|
|
- const actionColumn: BasicColumn = reactive({
|
|
|
- width: 350,
|
|
|
- label: '操作',
|
|
|
- prop: 'booking',
|
|
|
- key: 'action',
|
|
|
- fixed: 'right',
|
|
|
- render(record) {
|
|
|
- return h(ActionColomn, {
|
|
|
- subItem: record.row,
|
|
|
- handleConig: handleConfig,
|
|
|
- handleAdd: handleAdd,
|
|
|
- handleEdit: handleEdit,
|
|
|
- handleDelete: handleDelete,
|
|
|
- handleUp: rowUp,
|
|
|
- handleDown: rowDown,
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- //表单中的Operations
|
|
|
-
|
|
|
- //页面设置函数
|
|
|
- const handleConfig = (row) => {
|
|
|
- console.log(row);
|
|
|
- };
|
|
|
-
|
|
|
- const addTitle = ref('');
|
|
|
- const addName = ref('');
|
|
|
- const level = ref<number>();
|
|
|
-
|
|
|
- const handleAdd = (row) => {
|
|
|
- console.log(row);
|
|
|
- console.log(row.code);
|
|
|
-
|
|
|
- //得出当前的数据的层级
|
|
|
- level.value = findItemLevel(tableData.value, row.code);
|
|
|
- console.log('level', level.value);
|
|
|
-
|
|
|
- if (level.value === 0) {
|
|
|
- addTitle.value = '添加车间';
|
|
|
- addName.value = '车间名称';
|
|
|
- } else if (level.value === 1) {
|
|
|
- addTitle.value = '添加工位';
|
|
|
- addName.value = '工位名称';
|
|
|
- } else {
|
|
|
- return;
|
|
|
- }
|
|
|
- resetDraw();
|
|
|
-
|
|
|
- table.value = true;
|
|
|
- ruleForm.seniorScene = row.name;
|
|
|
- tagList.value = row?.Toptag;
|
|
|
- };
|
|
|
-
|
|
|
- //添加车间中的场景标签
|
|
|
- const tagList = ref(['生产安全', '安全环保', '物流安全', '园区生活']);
|
|
|
- const templateList = ['厂房', '危险点', '食堂', '停车场'];
|
|
|
-
|
|
|
- const editedItem = ref<User>({} as User);
|
|
|
-
|
|
|
- // 在这里实现删除行的函数
|
|
|
-
|
|
|
- const handleDelete = (row: Recordable) => {
|
|
|
- console.log('row', row);
|
|
|
- if (row.children?.length > 0) {
|
|
|
- ElMessageBox.confirm('存在下级场景，无法删除该场景', '无法删除该条信息', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'error',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- console.log('存在子集');
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- console.log('取消删除物件');
|
|
|
- });
|
|
|
- } else {
|
|
|
- ElMessageBox.confirm('确认要删除该场景吗', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- if (row && row.name) {
|
|
|
- deleteTableRow(tableData.value, row.name);
|
|
|
- }
|
|
|
- // console.log('确认删除物件');
|
|
|
- // const deleteData = {
|
|
|
- // partTypeId: row.partTypeId,
|
|
|
- // isDelete: '1',
|
|
|
- // } as PartDeleteData;
|
|
|
- // console.log(deleteData);
|
|
|
- // deletePartType(deleteData);
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- console.log('取消删除物件');
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const handleEdit = (row) => {
|
|
|
- editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
|
|
|
- level.value = findItemLevel(tableData.value, row.code);
|
|
|
- if (level.value === 0) {
|
|
|
- tableCom.value = true;
|
|
|
- companyAddTitle.value = '编辑公司';
|
|
|
- selectItems.value = [];
|
|
|
-
|
|
|
- if (row.Toptag && Array.isArray(row.Toptag)) {
|
|
|
- selectItems.value = row.Toptag.map((item) => ({
|
|
|
- tag: item.split('-')[0],
|
|
|
- template: item.split('-')[1],
|
|
|
- }));
|
|
|
- }
|
|
|
- ruleForm.name = editedItem.value.name!;
|
|
|
- ruleForm.seniorScene = editedItem.value.seniorScene!;
|
|
|
- ruleForm.workshopCode = editedItem.value.code!;
|
|
|
- addEnable.value = editedItem.value.status!;
|
|
|
-
|
|
|
- // ruleForm.seniorScene = editedItem.value.Toptag!;
|
|
|
- } else if (level.value === 1) {
|
|
|
- level.value = level.value - 1;
|
|
|
- addTitle.value = '编辑车间';
|
|
|
- addName.value = '车间名称';
|
|
|
- table.value = true;
|
|
|
- ruleForm.name = editedItem.value.name!;
|
|
|
- ruleForm.seniorScene = editedItem.value.seniorScene!;
|
|
|
- ruleForm.workshopCode = editedItem.value.code!;
|
|
|
- addEnable.value = editedItem.value.status!;
|
|
|
- ruleForm.tagWorkshop = editedItem.value.tag;
|
|
|
- ruleForm.templateWorkshop = editedItem.value.templeteRoom;
|
|
|
- tagList.value = editedItem.value.Toptag!;
|
|
|
- } else if (level.value === 2) {
|
|
|
- level.value = level.value - 1;
|
|
|
- addTitle.value = '编辑工位';
|
|
|
- addName.value = '工位名称';
|
|
|
- table.value = true;
|
|
|
- ruleForm.name = editedItem.value.name!;
|
|
|
- ruleForm.seniorScene = editedItem.value.seniorScene!;
|
|
|
- ruleForm.workshopCode = editedItem.value.code!;
|
|
|
- ruleForm.leader = editedItem.value.leader!;
|
|
|
- }
|
|
|
-
|
|
|
- // editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
|
|
|
- // ruleForm2.name = editedItem.value.name!;
|
|
|
- // ruleForm2.tag = editedItem.value.tag!;
|
|
|
- // ruleForm2.code = editedItem.value.code!;
|
|
|
- // level.value = findItemLevel(tableData.value, row.code);
|
|
|
- // editDrawerVisible.value = true;
|
|
|
- };
|
|
|
-
|
|
|
- const editDrawerVisible = ref(false);
|
|
|
-
|
|
|
- //编辑时的提交按钮功能
|
|
|
-
|
|
|
- const editedSub = () => {
|
|
|
- // const editedData = {
|
|
|
- // typeName: editedItem.value.typeName,
|
|
|
- // partTypeId: editedItem.value.partTypeId,
|
|
|
- // enable: editedItem.value.enable,
|
|
|
- // num: editedItem.value.num,
|
|
|
- // } as PartEditData;
|
|
|
- // console.log(editedData);
|
|
|
- // editPartType(editedData);
|
|
|
- // editDrawerVisible.value = false;
|
|
|
- // level.value = findItemLevel(tableData.value, editedItem.value.code);
|
|
|
- // console.log();
|
|
|
-
|
|
|
- console.log(2222222222222);
|
|
|
-
|
|
|
- const allCodes = flattenCodes(tableData.value);
|
|
|
- console.log('editedItem.value.code', editedItem.value.code);
|
|
|
- console.log('ruleForm.workshopCode', ruleForm.workshopCode);
|
|
|
-
|
|
|
- if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
|
|
|
- if (editedItem.value.code !== ruleForm.workshopCode) {
|
|
|
- ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'error',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- // ruleForm.workshopCode = '';
|
|
|
- console.log('代码重复');
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- console.log('取消删除物件');
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(11111111111);
|
|
|
- level.value = findItemLevel(tableData.value, editedItem.value.code);
|
|
|
- console.log('level', level.value);
|
|
|
-
|
|
|
- if (level.value === 0) {
|
|
|
- selectItems.value = selectItems.value.filter((item) => {
|
|
|
- return item.tag && item.template;
|
|
|
- });
|
|
|
- ruleForm.tagCom = selectItems.value.map((item) => {
|
|
|
- return item.tag + '-' + item.template;
|
|
|
- });
|
|
|
-
|
|
|
- editTableRow(
|
|
|
- tableData.value,
|
|
|
- level.value,
|
|
|
- editedItem.value.name,
|
|
|
- ruleForm.name,
|
|
|
- ruleForm.workshopCode,
|
|
|
- addEnable.value,
|
|
|
- '',
|
|
|
- '',
|
|
|
- '',
|
|
|
- ruleForm.tagCom!,
|
|
|
- );
|
|
|
-
|
|
|
- tableCom.value = false;
|
|
|
- } else if (level.value === 1) {
|
|
|
- console.log(111111, ruleForm.templateWorkshop, ruleForm.tagWorkshop);
|
|
|
-
|
|
|
- editTableRow(
|
|
|
- tableData.value,
|
|
|
- level.value,
|
|
|
- editedItem.value.name,
|
|
|
- ruleForm.name,
|
|
|
- ruleForm.workshopCode,
|
|
|
- addEnable.value,
|
|
|
- '',
|
|
|
- ruleForm.templateWorkshop,
|
|
|
- ruleForm.tagWorkshop,
|
|
|
- [],
|
|
|
- );
|
|
|
- table.value = false;
|
|
|
- } else if (level.value === 2) {
|
|
|
- editTableRow(
|
|
|
- tableData.value,
|
|
|
- level.value,
|
|
|
- editedItem.value.name,
|
|
|
- ruleForm.name,
|
|
|
- ruleForm.workshopCode,
|
|
|
- addEnable.value,
|
|
|
- ruleForm.leader,
|
|
|
- '',
|
|
|
- '',
|
|
|
- [],
|
|
|
- );
|
|
|
- table.value = false;
|
|
|
- }
|
|
|
- };
|
|
|
- //表单中的启动状态
|
|
|
- // const handleSwitchChange = (_row: PartItem) => {
|
|
|
- // // row.enable = row.enable === '1' ? '0' : '1';
|
|
|
- // // const editData = {
|
|
|
- // // partTypeId: row.partTypeId,
|
|
|
- // // enable: row.enable,
|
|
|
- // // };
|
|
|
- // // console.log(editData);
|
|
|
- // // editPartType(editData);
|
|
|
- // };
|
|
|
-
|
|
|
- //向上排序
|
|
|
- const rowUp = (row) => {
|
|
|
- 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) => {
|
|
|
- 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);
|
|
|
- }
|
|
|
- }
|
|
|
- // }
|
|
|
- };
|
|
|
-</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;
|
|
|
- }
|
|
|
- .caret-rotate {
|
|
|
- transition: transform 0.3s linear;
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
- .caret-collapse {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
- .space-collapse {
|
|
|
- height: 0;
|
|
|
- overflow: hidden;
|
|
|
- transition: all 0.3s linear;
|
|
|
- }
|
|
|
- .space-open {
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
- .contentName {
|
|
|
- margin-bottom: 50px;
|
|
|
- }
|
|
|
- .contentOne {
|
|
|
- margin-right: 40px;
|
|
|
- }
|
|
|
- .contentNum {
|
|
|
- margin-bottom: 50px;
|
|
|
- }
|
|
|
- .contentTwo {
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .titleId {
|
|
|
- font-size: 30px;
|
|
|
- text-align: left;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .showBody {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- padding-bottom: 50px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .addContent {
|
|
|
- width: 300px;
|
|
|
- }
|
|
|
-
|
|
|
- .showContent {
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .switchContent {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 50px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .tag-select {
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
- /* background: #ffffff; */
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
- }
|
|
|
- /* :deep(.el-table--default .cell) {
|
|
|
- white-space: nowrap;
|
|
|
- overflow: auto;
|
|
|
- } */
|
|
|
-</style>
|
zhudie