|
|
@@ -2,129 +2,87 @@
|
|
|
<div class="tenant">
|
|
|
<!-- <Banner /> -->
|
|
|
<div class="content">
|
|
|
- <byTable
|
|
|
- :source="sourceList.data"
|
|
|
- :pagination="sourceList.pagination"
|
|
|
- :config="config"
|
|
|
- :loading="loading"
|
|
|
- highlight-current-row
|
|
|
- :selectConfig="selectConfig"
|
|
|
- :table-events="{
|
|
|
+ <byTable :source="sourceList.data" :pagination="sourceList.pagination" :config="config" :loading="loading" highlight-current-row
|
|
|
+ :selectConfig="selectConfig" :table-events="{
|
|
|
//element talbe事件都能传
|
|
|
select: select,
|
|
|
- }"
|
|
|
- :action-list="[
|
|
|
+ }" :action-list="[
|
|
|
{
|
|
|
text: '添加工艺',
|
|
|
action: () => openModal('add'),
|
|
|
},
|
|
|
- ]"
|
|
|
- @get-list="getList"
|
|
|
- >
|
|
|
+ ]" @get-list="getList">
|
|
|
<template #line="{ item }">
|
|
|
<span v-for="(x, i) in item.processRouteNameList" :key="i">
|
|
|
{{ x }}
|
|
|
- <span
|
|
|
- style="margin: 0 3px"
|
|
|
- v-if="i + 1 < item.processRouteNameList.length"
|
|
|
- >>
|
|
|
+ <span style="margin: 0 3px" v-if="i + 1 < item.processRouteNameList.length">>
|
|
|
</span>
|
|
|
</span>
|
|
|
</template>
|
|
|
<template #product="{ item }">
|
|
|
<span v-for="(x, i) in item.applicableProductsNameList" :key="i">
|
|
|
{{ x }}
|
|
|
- <span v-if="i + 1 < item.applicableProductsNameList.length"
|
|
|
- >,
|
|
|
+ <span v-if="i + 1 < item.applicableProductsNameList.length">,
|
|
|
</span>
|
|
|
</span>
|
|
|
</template>
|
|
|
</byTable>
|
|
|
</div>
|
|
|
- <el-dialog
|
|
|
- :title="modalType == 'add' ? '添加工艺' : '编辑工艺'"
|
|
|
- v-model="dialogVisible"
|
|
|
- width="660"
|
|
|
- v-loading="loading"
|
|
|
- destroy-on-close
|
|
|
- >
|
|
|
- <byForm
|
|
|
- :formConfig="formConfig"
|
|
|
- :formOption="formOption"
|
|
|
- v-model="formData.data"
|
|
|
- :rules="rules"
|
|
|
- ref="byform"
|
|
|
- >
|
|
|
- <template #lineSlot>
|
|
|
- <el-transfer
|
|
|
- v-model="selectLine"
|
|
|
- filterable
|
|
|
- filter-placeholder="搜索"
|
|
|
- :data="lineData"
|
|
|
- :titles="['可选', '已选']"
|
|
|
- target-order="push"
|
|
|
- >
|
|
|
+ <el-dialog :title="modalType == 'add' ? '添加工艺' : '编辑工艺'" v-model="dialogVisible" width="90%" v-loading="loading" destroy-on-close>
|
|
|
+ <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform">
|
|
|
+ <!-- <template #lineSlot>
|
|
|
+ <el-transfer v-model="selectLine" filterable filter-placeholder="搜索" :data="lineData" :titles="['可选', '已选']" target-order="push">
|
|
|
<template #default="{ option }">
|
|
|
<div class="parent">
|
|
|
- <!-- 只有选择的数据才能拖拽 -->
|
|
|
- <div
|
|
|
- :draggable="selectLine.includes(option.key)"
|
|
|
- @dragstart="dragStar($event, option)"
|
|
|
- @dragover="dragOver($event, option)"
|
|
|
- @drop="handleDrop($event)"
|
|
|
- style="cursor: default"
|
|
|
- :id="option.key"
|
|
|
- >
|
|
|
+ <div :draggable="selectLine.includes(option.key)" @dragstart="dragStar($event, option)" @dragover="dragOver($event, option)"
|
|
|
+ @drop="handleDrop($event)" style="cursor: default" :id="option.key">
|
|
|
{{ option.label }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-transfer>
|
|
|
+ </template> -->
|
|
|
+ <template #lineSlot>
|
|
|
+ <div class="processChart" style="width:100%">
|
|
|
+ <div class="from">
|
|
|
+ <div class="commons-title">工序</div>
|
|
|
+ <!-- <div>
|
|
|
+ <el-form labelPosition='top'>
|
|
|
+ <el-form-item label="工序" label-width="80px">
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="commons-title">工艺路线</div>
|
|
|
+ <div class="chart-warp">
|
|
|
+ <vueFlow :dataId="dataId" ref="vueFlowDom"></vueFlow>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</template>
|
|
|
<template #productSlot>
|
|
|
<div>
|
|
|
<el-button type="primary" @click="openProduct = true">
|
|
|
添加产品
|
|
|
</el-button>
|
|
|
- <div
|
|
|
- style="margin-top: 15px"
|
|
|
- v-if="productList && productList.length > 0"
|
|
|
- >
|
|
|
- <el-tag
|
|
|
- style="margin-right: 10px"
|
|
|
- type="info"
|
|
|
- closable
|
|
|
- v-for="(product, index) in productList"
|
|
|
- :key="product.id"
|
|
|
- @close="handleRemove(index)"
|
|
|
- >{{ product.name }}（{{ product.spec }}）</el-tag
|
|
|
- >
|
|
|
+ <div style="margin-top: 15px" v-if="productList && productList.length > 0">
|
|
|
+ <el-tag style="margin-right: 10px" type="info" closable v-for="(product, index) in productList" :key="product.id"
|
|
|
+ @close="handleRemove(index)">{{ product.name }}（{{ product.spec }}）</el-tag>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</byForm>
|
|
|
<template #footer>
|
|
|
<el-button @click="dialogVisible = false" size="large">取 消</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- v-no-double-click="submitForm"
|
|
|
- size="large"
|
|
|
- :loading="submitLoading"
|
|
|
- >
|
|
|
+ <el-button type="primary" v-no-double-click="submitForm" size="large" :loading="submitLoading">
|
|
|
确 定
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
- <el-dialog
|
|
|
- v-model="openProduct"
|
|
|
- title="选择产品"
|
|
|
- width="70%"
|
|
|
- append-to-body
|
|
|
- >
|
|
|
- <SelectProduct
|
|
|
- @handleSelect="handleSelect"
|
|
|
- :isTechnology="'0'"
|
|
|
- ></SelectProduct>
|
|
|
+ <el-dialog v-model="openProduct" title="选择产品" width="70%" append-to-body>
|
|
|
+ <SelectProduct @handleSelect="handleSelect" :isTechnology="'0'"></SelectProduct>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
<el-button @click="openProduct = false">取消</el-button>
|
|
|
@@ -140,6 +98,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
import byTable from "@/components/byTable/index";
|
|
|
import byForm from "@/components/byForm/index";
|
|
|
import SelectProduct from "@/components/product/SelectProduct";
|
|
|
+import vueFlow from "@/views/JXSK/processConfig/vueFlow.vue";
|
|
|
|
|
|
import { computed, defineComponent, ref, toRaw } from "vue";
|
|
|
const loading = ref(false);
|
|
|
@@ -357,6 +316,8 @@ const getProcesses = async () => {
|
|
|
}));
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+const dataId = ref("1702504334962466818");
|
|
|
const openModal = () => {
|
|
|
dialogVisible.value = true;
|
|
|
modalType.value = "add";
|
|
|
@@ -364,21 +325,28 @@ const openModal = () => {
|
|
|
selectLine.value = [];
|
|
|
productList.value = [];
|
|
|
};
|
|
|
-
|
|
|
+const vueFlowDom = ref(null);
|
|
|
const submitForm = () => {
|
|
|
byform.value.handleSubmit((valid) => {
|
|
|
- if (!selectLine.value.length > 0)
|
|
|
- return ElMessage({
|
|
|
- message: "请添加工艺路线",
|
|
|
- type: "info",
|
|
|
- });
|
|
|
+ // if (!selectLine.value.length > 0)
|
|
|
+ // return ElMessage({
|
|
|
+ // message: "请添加工艺路线",
|
|
|
+ // type: "info",
|
|
|
+ // });
|
|
|
+
|
|
|
if (!productList.value.length > 0)
|
|
|
return ElMessage({
|
|
|
message: "请添加适用产品",
|
|
|
type: "info",
|
|
|
});
|
|
|
+ const data = vueFlowDom.value.submitAll();
|
|
|
+ if (!data) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ formData.data.nodeObject = data.nodeObject;
|
|
|
+ formData.data.lineObject = data.lineObject;
|
|
|
submitLoading.value = true;
|
|
|
- formData.data.processRouteList = selectLine.value; //选择的工序数据
|
|
|
+ // formData.data.processRouteList = selectLine.value; //选择的工序数据
|
|
|
formData.data.productList = productList.value.map((x) => ({
|
|
|
productId: x.id,
|
|
|
})); //选择的产品数据
|
|
|
@@ -482,4 +450,28 @@ const swapItems = (sourceKey, targetKey) => {
|
|
|
.tenant {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
+
|
|
|
+.processChart {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ .from {
|
|
|
+ width: 400px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: calc(100% - 420px);
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 20px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.chart-warp {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 280px);
|
|
|
+}
|
|
|
</style>
|
cz