From 284ba780b1fab0e90966052614d65137ad121dc6 Mon Sep 17 00:00:00 2001
From: "LAPTOP-R6EHHS26\\86155" <2217640373@qq.com>
Date: Thu, 19 Oct 2023 16:04:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9tag=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/technology/process/content.vue | 467 ++++++++++++++++------
src/views/technology/process/index.vue | 8 +-
src/views/technology/recipe/content.vue | 482 ++++++++++++++++-------
3 files changed, 693 insertions(+), 264 deletions(-)
diff --git a/src/views/technology/process/content.vue b/src/views/technology/process/content.vue
index 1bef5e14..2073368b 100644
--- a/src/views/technology/process/content.vue
+++ b/src/views/technology/process/content.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <el-row v-if="optType !='view'" :gutter="10" class="mb8">
+ <el-row v-if="optType != 'view'" :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
@@ -9,7 +9,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['mes:pro:processcontent:add']"
- >新增</el-button>
+ >新增</el-button
+ >
</el-col>
<el-col :span="1.5">
<el-button
@@ -20,7 +21,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['mes:pro:processcontent:edit']"
- >修改</el-button>
+ >修改</el-button
+ >
</el-col>
<el-col :span="1.5">
<el-button
@@ -31,7 +33,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['mes:pro:processcontent:remove']"
- >删除</el-button>
+ >删除</el-button
+ >
</el-col>
<el-col :span="1.5">
<el-button
@@ -41,19 +44,54 @@
size="mini"
@click="handleExport"
v-hasPermi="['mes:pro:processcontent:export']"
- >导出</el-button>
+ >导出</el-button
+ >
</el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+ <right-toolbar
+ :showSearch.sync="showSearch"
+ @queryTable="getList"
+ ></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="processcontentList" @selection-change="handleSelectionChange">
+ <el-table
+ v-loading="loading"
+ :data="processcontentList"
+ @selection-change="handleSelectionChange"
+ >
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="顺序编号" align="center" prop="orderNum" />
- <el-table-column label="步骤说明" width="400px" align="center" prop="contentText" :show-overflow-tooltip="true"/>
- <el-table-column label="辅助设备" align="center" prop="device" :show-overflow-tooltip="true"/>
- <el-table-column label="BOM材料" align="center" prop="material" :show-overflow-tooltip="true"/>
- <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
- <el-table-column label="操作" width="100px" v-if="optType !='view'" align="center" class-name="small-padding fixed-width">
+ <el-table-column
+ label="步骤说明"
+ width="400px"
+ align="center"
+ prop="contentText"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="辅助设备"
+ align="center"
+ prop="device"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="BOM材料"
+ align="center"
+ prop="material"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="备注"
+ align="center"
+ prop="remark"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="操作"
+ width="100px"
+ v-if="optType != 'view'"
+ align="center"
+ class-name="small-padding fixed-width"
+ >
<template slot-scope="scope">
<el-button
size="mini"
@@ -61,20 +99,22 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['mes:pro:processcontent:edit']"
- >修改</el-button>
+ >修改</el-button
+ >
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['mes:pro:processcontent:remove']"
- >删除</el-button>
+ >删除</el-button
+ >
</template>
</el-table-column>
</el-table>
<pagination
- v-show="total>0"
+ v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@@ -84,13 +124,17 @@
<!-- 添加或修改生产工序内容对话框 -->
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
- <el-row >
- <el-col :span="12">
- <el-form-item label="顺序编号" prop="orderNum">
- <el-input-number :min="1" v-model="form.orderNum" placeholder="请输入顺序编号" />
- </el-form-item>
- </el-col>
- <!--
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="顺序编号" prop="orderNum">
+ <el-input-number
+ :min="1"
+ v-model="form.orderNum"
+ placeholder="请输入顺序编号"
+ />
+ </el-form-item>
+ </el-col>
+ <!--
<el-col :span="12">
<el-form-item label="材料URL" prop="docUrl">
<el-input v-model="form.docUrl" placeholder="请输入材料URL" />
@@ -98,38 +142,118 @@
</el-col>-->
</el-row>
<el-row>
- <el-col :span="24">
- <el-form-item label="辅助设备" prop="device">
- <el-input v-model="form.device" placeholder="请选择辅助设备" >
- <el-button slot="append" @click="handleSelectEquipment" icon="el-icon-search"></el-button>
- </el-input>
- <ItemSelect ref="itemSelect" @onSelected="onItemSelectedEquipment" > </ItemSelect>
- </el-form-item>
- </el-col>
+ <el-col :span="24">
+ <!-- <el-form-item label="辅助设备" prop="device">
+ <el-input v-model="form.device" placeholder="请选择辅助设备">
+ <el-button
+ slot="append"
+ @click="handleSelectEquipment"
+ icon="el-icon-search"
+ ></el-button>
+ </el-input>
+ <ItemSelect
+ ref="itemSelect"
+ @onSelected="onItemSelectedEquipment"
+ >
+ </ItemSelect>
+ </el-form-item> -->
+ </el-col>
+ <el-col :span="24">
+ <div class="tagbox">
+ <div class="tagboxlabel" style="font-weight: 600; color: #606266">
+ 辅助设备
+ </div>
+ <div class="tag" style="" placeholder="请选择辅助设备">
+ <el-tag
+ :key="index"
+ class="tagitem"
+ v-for="(tag, index) in selectsubsidiaryListtag"
+ closable
+ :disable-transitions="false"
+ @close="handleClose(tag)"
+ >
+ {{ tag }}
+ </el-tag>
+ </div>
+ <el-button
+ slot="append"
+ class="button1"
+ @click="handleSelectEquipment"
+ icon="el-icon-search"
+ ></el-button>
+ <ItemSelect
+ ref="itemSelect"
+ @onSelected="onItemSelectedEquipment"
+ >
+ </ItemSelect>
+ </div>
+ </el-col>
</el-row>
<el-row>
<el-col :span="24">
- <el-form-item label="BOM材料" prop="material">
- <el-input v-model="form.material" placeholder="请选择BOM材料" >
- <el-button slot="append" @click="handleSelectBom" icon="el-icon-search"></el-button>
+ <!-- <el-form-item label="BOM材料" prop="material">
+ <el-input v-model="form.material" placeholder="请选择BOM材料">
+ <el-button
+ slot="append"
+ @click="handleSelectBom"
+ icon="el-icon-search"
+ ></el-button>
</el-input>
- <ItemSelectBom ref="itemSelectBom" @onSelected="onItemSelectedBom" ></ItemSelectBom>
- </el-form-item>
+ <ItemSelectBom
+ ref="itemSelectBom"
+ @onSelected="onItemSelectedBom"
+ ></ItemSelectBom>
+ </el-form-item> -->
+ <div class="tagbox">
+ <div class="tagboxlabel" style="font-weight: 600; color: #606266">
+ BOM材料
+ </div>
+ <div class="tag" style="" placeholder="请选择BOM材料">
+ <el-tag
+ :key="index"
+ class="tagitem"
+ v-for="(tag, index) in selectBOMListtag"
+ closable
+ :disable-transitions="false"
+ @close="handleCloseBOM(tag)"
+ >
+ {{ tag }}
+ </el-tag>
+ </div>
+ <el-button
+ slot="append"
+ class="button1"
+ @click="handleSelectBom"
+ icon="el-icon-search"
+ ></el-button>
+ <ItemSelectBom
+ ref="itemSelectBom"
+ @onSelected="onItemSelectedBom"
+ ></ItemSelectBom>
+ </div>
</el-col>
</el-row>
<el-row>
- <el-col :span="24">
- <el-form-item label="步骤说明" prop="contentText">
- <el-input v-model="form.contentText" type="textarea" placeholder="请输入内容" />
- </el-form-item>
- </el-col>
+ <el-col :span="24">
+ <el-form-item label="步骤说明" prop="contentText">
+ <el-input
+ v-model="form.contentText"
+ type="textarea"
+ placeholder="请输入内容"
+ />
+ </el-form-item>
+ </el-col>
</el-row>
<el-row>
- <el-col :span="24">
- <el-form-item label="备注" prop="remark">
- <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
- </el-form-item>
- </el-col>
+ <el-col :span="24">
+ <el-form-item label="备注" prop="remark">
+ <el-input
+ v-model="form.remark"
+ type="textarea"
+ placeholder="请输入内容"
+ />
+ </el-form-item>
+ </el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -141,14 +265,20 @@
</template>
<script>
-import { listProcesscontent, getProcesscontent, delProcesscontent, addProcesscontent, updateProcesscontent } from "@/api/technology/processcontent";
-import ItemSelect from "./single.vue";
-import ItemSelectBom from "./singleBom.vue";
-import { Message } from 'element-ui'
+import {
+ listProcesscontent,
+ getProcesscontent,
+ delProcesscontent,
+ addProcesscontent,
+ updateProcesscontent,
+} from "@/api/technology/processcontent";
+import ItemSelect from "./single.vue";
+import ItemSelectBom from "./singleBom.vue";
+import { Message } from "element-ui";
export default {
name: "Processcontent",
- components: {ItemSelect,ItemSelectBom},
+ components: { ItemSelect, ItemSelectBom },
data() {
return {
// 遮罩层
@@ -170,8 +300,8 @@ export default {
// 是否显示弹出层
open: false,
// 查询参数
- checkMaterial :null,
- checkDevice :null,
+ checkMaterial: null,
+ checkDevice: null,
queryParams: {
pageNum: 1,
pageSize: 10,
@@ -187,85 +317,121 @@ export default {
// 表单校验
rules: {
processId: [
- { required: true, message: "工序不能为空", trigger: "blur" }
+ { required: true, message: "工序不能为空", trigger: "blur" },
],
- }
+ },
+ // 新增-辅助设备选中listtag
+ selectsubsidiaryListtag: [],
+ selectBOMListtag: [],
};
},
- props :{
- processId: undefined,
- optType: undefined
+ props: {
+ processId: undefined,
+ optType: undefined,
},
created() {
this.getList();
},
methods: {
+ // 新增—设备选择
+ handleClose(tag) {
+ this.selectsubsidiaryListtag.splice(
+ this.selectsubsidiaryListtag.indexOf(tag),
+ 1
+ );
+ this.form.device = "";
+ var code = [];
+ this.selectsubsidiaryListtag.forEach((item) => {
+ if (item) {
+ code.push(item);
+ }
+ });
+ console.log(code, this.selectsubsidiaryListtag);
+ this.form.device = code.join(",");
+ },
+ // 新增—BOM选择
+ handleCloseBOM(tag) {
+ this.selectBOMListtag.splice(this.selectBOMListtag.indexOf(tag), 1);
+ this.form.material = "";
+ var code = [];
+ this.selectBOMListtag.forEach((item) => {
+ if (item) {
+ code.push(item);
+ }
+ });
+ console.log(code, this.selectBOMListtag);
+ this.form.material = code.join(",");
+ },
//新增 设备选择弹出框
- onItemSelectedEquipment(obj){
- if(this.form.device == null || this.form.device == ""){
- console.log("device是空，if获取的obj",obj);
- console.log("device是空，if获取的device",this.form.device);
+ onItemSelectedEquipment(obj) {
+ if (this.form.device == null || this.form.device == "") {
+ console.log("device是空，if获取的obj", obj);
+ console.log("device是空，if获取的device", this.form.device);
this.form.device = obj;
- }else{
- if(obj != undefined && obj != null && obj != "" ){
- const a = obj.split(',');
- const len = obj.split(',').length;
- console.log('切割的数组',obj.split(','));
- a.forEach(item => {
- const b = this.form.device.split(',');
+ this.selectsubsidiaryListtag = obj.split(",");
+ } else {
+ if (obj != undefined && obj != null && obj != "") {
+ const a = obj.split(",");
+ const len = obj.split(",").length;
+ console.log("切割的数组", obj.split(","));
+ a.forEach((item) => {
+ const b = this.form.device.split(",");
const size = b.length;
- console.log("size",size,b[size-1])
- const item1 = item+',';
- console.log("打印item1",item1);
+ console.log("size", size, b[size - 1]);
+ const item1 = item + ",";
+ console.log("打印item1", item1);
this.checkDevice = this.form.device.search(item1) != -1;
- console.log("check的值",this.checkDevice);
- if(this.checkDevice == true || b[size-1] == item){
- console.log("重复添加",true);
- Message.warning('您已经添加过该设备,请勿重复添加！！！');
- }else if(this.checkDevice == false){
- this.form.device = this.form.device +","+item;
+ console.log("check的值", this.checkDevice);
+ if (this.checkDevice == true || b[size - 1] == item) {
+ console.log("重复添加", true);
+ Message.warning("您已经添加过该设备,请勿重复添加！！！");
+ } else if (this.checkDevice == false) {
+ this.selectsubsidiaryListtag.push(item);
+ this.form.device = this.form.device + "," + item;
}
- })
+ });
}
}
},
//新增 BOM选择弹出框
- onItemSelectedBom(obj){
- if(this.form.material == null ||this.form.material == ""){
- console.log("material是空，if获取的obj",obj);
- console.log("material是空，if获取的material",this.form.material);
+ onItemSelectedBom(obj) {
+ if (this.form.material == null || this.form.material == "") {
+ console.log("material是空，if获取的obj", obj);
+ console.log("material是空，if获取的material", this.form.material);
this.form.material = obj;
- }else{
- if(obj != undefined && obj != null){
- const a = obj.split(',');
- const len = obj.split(',').length;
- console.log('切割的数组',obj.split(','));
- a.forEach(item => {
+ this.selectBOMListtag = obj.split(",");
+ } else {
+ if (obj != undefined && obj != null) {
+ const a = obj.split(",");
+ const len = obj.split(",").length;
+ console.log("切割的数组", obj.split(","));
+ a.forEach((item) => {
this.checkMaterial = this.form.material.search(item) != -1;
- console.log("check的值",this.check);
- if(this.checkMaterial == true){
- console.log("重复添加",true);
- Message.warning('您已经添加过该物料Bom,请勿重复添加！！！');
- }else if(this.checkMaterial == false){
- this.form.material = this.form.material +","+item;
+ console.log("check的值", this.check);
+ if (this.checkMaterial == true) {
+ console.log("重复添加", true);
+ Message.warning("您已经添加过该物料Bom,请勿重复添加！！！");
+ } else if (this.checkMaterial == false) {
+ this.selectBOMListtag.push(item);
+ this.form.material = this.form.material + "," + item;
}
- })
+ });
}
}
},
//新增 设备选择弹出框
- handleSelectEquipment(){
+ handleSelectEquipment() {
this.$refs.itemSelect.showFlag = true;
},
// //新增 设备选择弹出框
- handleSelectBom(){
+ handleSelectBom() {
this.$refs.itemSelectBom.showFlag = true;
},
/** 查询生产工序内容列表 */
getList() {
this.loading = true;
- listProcesscontent(this.queryParams).then(response => {
+ listProcesscontent(this.queryParams).then((response) => {
this.processcontentList = response.rows;
this.total = response.total;
this.loading = false;
@@ -290,7 +456,7 @@ export default {
createBy: null,
createTime: null,
updateBy: null,
- updateTime: null
+ updateTime: null,
};
this.resetForm("form");
},
@@ -306,22 +472,36 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
- this.ids = selection.map(item => item.contentId)
- this.single = selection.length!==1
- this.multiple = !selection.length
+ this.ids = selection.map((item) => item.contentId);
+ this.single = selection.length !== 1;
+ this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加操作步骤";
+ this.selectsubsidiaryListtag = [];
+ this.selectBOMListtag = [];
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
- const contentId = row.contentId || this.ids
- getProcesscontent(contentId).then(response => {
+ const contentId = row.contentId || this.ids;
+ this.selectsubsidiaryListtag = [];
+ this.selectBOMListtag = [];
+ getProcesscontent(contentId).then((response) => {
this.form = response.data;
+ if (this.form.material != "" && this.form.material != null) {
+ this.selectBOMListtag = JSON.parse(
+ JSON.stringify(this.form.material.split(","))
+ );
+ }
+ if (this.form.device != "" && this.form.device != null) {
+ this.selectsubsidiaryListtag = JSON.parse(
+ JSON.stringify(this.form.device.split(","))
+ );
+ }
this.open = true;
this.title = "修改操作步骤";
});
@@ -329,16 +509,16 @@ export default {
/** 提交按钮 */
submitForm() {
// debugger
- this.$refs["form"].validate(valid => {
+ this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.contentId != null) {
- updateProcesscontent(this.form).then(response => {
+ updateProcesscontent(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
- addProcesscontent(this.form).then(response => {
+ addProcesscontent(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@@ -350,19 +530,70 @@ export default {
/** 删除按钮操作 */
handleDelete(row) {
const contentIds = row.contentId || this.ids;
- this.$modal.confirm('是否确认删除操作步骤？').then(function() {
- return delProcesscontent(contentIds);
- }).then(() => {
- this.getList();
- this.$modal.msgSuccess("删除成功");
- }).catch(() => {});
+ this.$modal
+ .confirm("是否确认删除操作步骤？")
+ .then(function () {
+ return delProcesscontent(contentIds);
+ })
+ .then(() => {
+ this.getList();
+ this.$modal.msgSuccess("删除成功");
+ })
+ .catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
- this.download('technology/pro/processcontent/export', {
- ...this.queryParams
- }, `processcontent_${new Date().getTime()}.xlsx`)
- }
- }
+ this.download(
+ "technology/pro/processcontent/export",
+ {
+ ...this.queryParams,
+ },
+ `processcontent_${new Date().getTime()}.xlsx`
+ );
+ },
+ },
};
</script>
+
+<style lang="scss" scoped>
+.tagbox {
+ display: flex;
+ /* overflow: scroll; */
+ position: relative;
+ width: 100%;
+ // padding-left: 26px;
+ margin-bottom: 15px;
+ .tagboxlabel {
+ width: 109px;
+ text-align: right;
+ vertical-align: middle;
+ font-size: 14px;
+ color: black;
+ line-height: 40px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ margin-right: 15px;
+ }
+ .tag {
+ width: 82%;
+ border: 1px #dcdfe6 solid;
+ height: 70px;
+ padding: 5px 15px;
+ overflow-y: scroll;
+ .tagitem {
+ margin-left: 5px;
+ }
+ }
+ .button1 {
+ width: 57px;
+ height: 35px;
+ margin-left: 10px;
+ background: #f5f7fa;
+ }
+}
+div.tag:empty:before {
+ content: attr(placeholder);
+ color: #bbb;
+}
+</style>
+
diff --git a/src/views/technology/process/index.vue b/src/views/technology/process/index.vue
index 6eb8e2d4..425a70b8 100644
--- a/src/views/technology/process/index.vue
+++ b/src/views/technology/process/index.vue
@@ -341,8 +341,8 @@
</el-col>
<el-col :span="16">
<div class="tagbox">
- <div class="tagboxlabel">线体设备</div>
- <div class="tag" style="">
+ <div class="tagboxlabel" style="font-weight: 600;color: #606266;">线体设备</div>
+ <div class="tag" style="" placeholder="请选择线体设备">
<el-tag
:key="index"
class="tagitem"
@@ -910,4 +910,8 @@ export default {
background: #F5F7FA;
}
}
+div.tag:empty:before {
+ content: attr(placeholder);
+ color: #bbb;
+}
</style>
diff --git a/src/views/technology/recipe/content.vue b/src/views/technology/recipe/content.vue
index 79d80cdc..07cb7706 100644
--- a/src/views/technology/recipe/content.vue
+++ b/src/views/technology/recipe/content.vue
@@ -1,6 +1,6 @@
<template>
<div class="app-container">
- <el-row v-if="optType !='view'" :gutter="10" class="mb8">
+ <el-row v-if="optType != 'view'" :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
@@ -8,8 +8,8 @@
icon="el-icon-plus"
size="mini"
@click="handleAdd"
-
- >新增</el-button>
+ >新增</el-button
+ >
</el-col>
<el-col :span="1.5">
<el-button
@@ -19,8 +19,8 @@
size="mini"
:disabled="single"
@click="handleUpdate"
-
- >修改</el-button>
+ >修改</el-button
+ >
</el-col>
<el-col :span="1.5">
<el-button
@@ -30,8 +30,8 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
-
- >删除</el-button>
+ >删除</el-button
+ >
</el-col>
<el-col :span="1.5">
<el-button
@@ -40,45 +40,99 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
-
- >导出</el-button>
+ >导出</el-button
+ >
</el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+ <right-toolbar
+ :showSearch.sync="showSearch"
+ @queryTable="getList"
+ ></right-toolbar>
</el-row>
- <el-table v-loading="loading" :data="recipecontentList" @selection-change="handleSelectionChange">
+ <el-table
+ v-loading="loading"
+ :data="recipecontentList"
+ @selection-change="handleSelectionChange"
+ >
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="顺序编号" align="center" prop="orderNum" />
- <el-table-column label="步骤说明" width="300px" align="center" prop="contentText" :show-overflow-tooltip="true"/>
- <el-table-column label="辅助设备" align="center" prop="device" :show-overflow-tooltip="true"/>
- <el-table-column label="BOM材料" align="center" prop="material" :show-overflow-tooltip="true"/>
- <el-table-column label="用量" align="center" prop="dosage" :show-overflow-tooltip="true"/>
- <el-table-column label="单位" align="center" prop="unit" :show-overflow-tooltip="true"/>
- <el-table-column label="安全用量" align="center" prop="safeDosage" :show-overflow-tooltip="true"/>
- <el-table-column label="控制参数" align="center" prop="controlParameters" :show-overflow-tooltip="true"/>
- <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
- <el-table-column label="操作" width="100px" v-if="optType !='view'" align="center" class-name="small-padding fixed-width">
+ <el-table-column
+ label="步骤说明"
+ width="300px"
+ align="center"
+ prop="contentText"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="辅助设备"
+ align="center"
+ prop="device"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="BOM材料"
+ align="center"
+ prop="material"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="用量"
+ align="center"
+ prop="dosage"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="单位"
+ align="center"
+ prop="unit"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="安全用量"
+ align="center"
+ prop="safeDosage"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="控制参数"
+ align="center"
+ prop="controlParameters"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="备注"
+ align="center"
+ prop="remark"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="操作"
+ width="100px"
+ v-if="optType != 'view'"
+ align="center"
+ class-name="small-padding fixed-width"
+ >
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
-
- >修改</el-button>
+ >修改</el-button
+ >
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
-
- >删除</el-button>
+ >删除</el-button
+ >
</template>
</el-table-column>
</el-table>
<pagination
- v-show="total>0"
+ v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@@ -88,13 +142,17 @@
<!-- 添加或修改生产工序内容对话框 -->
<el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
- <el-row >
- <el-col :span="12">
- <el-form-item label="顺序编号" prop="orderNum">
- <el-input-number :min="1" v-model="form.orderNum" placeholder="请输入顺序编号" />
- </el-form-item>
- </el-col>
- <!--
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="顺序编号" prop="orderNum">
+ <el-input-number
+ :min="1"
+ v-model="form.orderNum"
+ placeholder="请输入顺序编号"
+ />
+ </el-form-item>
+ </el-col>
+ <!--
<el-col :span="12">
<el-form-item label="材料URL" prop="docUrl">
<el-input v-model="form.docUrl" placeholder="请输入材料URL" />
@@ -102,60 +160,130 @@
</el-col>-->
</el-row>
<el-row>
- <el-col :span="12">
+ <!-- <el-col :span="12">
<el-form-item label="辅助设备" prop="device">
<el-input v-model="form.device" placeholder="请选择辅助设备" >
<el-button slot="append" @click="handleSelectEquipment" icon="el-icon-search"></el-button>
</el-input>
<ItemSelect ref="itemSelect" @onSelected="onItemSelectedEquipment" > </ItemSelect>
</el-form-item>
- </el-col>
- <el-col :span="12">
+ </el-col> -->
+ <el-col :span="24">
+ <div class="tagbox">
+ <div class="tagboxlabel" style="font-weight: 600; color: #606266">
+ 辅助设备
+ </div>
+ <div class="tag" style="" placeholder="请选择辅助设备">
+ <el-tag
+ :key="index"
+ class="tagitem"
+ v-for="(tag, index) in selectsubsidiaryListtag"
+ closable
+ :disable-transitions="false"
+ @close="handleClose(tag)"
+ >
+ {{ tag }}
+ </el-tag>
+ </div>
+ <el-button
+ slot="append"
+ class="button1"
+ @click="handleSelectEquipment"
+ icon="el-icon-search"
+ ></el-button>
+ <ItemSelect
+ ref="itemSelect"
+ @onSelected="onItemSelectedEquipment"
+ >
+ </ItemSelect>
+ </div>
+ </el-col>
+ <!-- <el-col :span="12">
<el-form-item label="BOM材料" prop="material">
<el-input v-model="form.material" placeholder="请选择BOM材料" >
<el-button slot="append" @click="handleSelectBom" icon="el-icon-search"></el-button>
</el-input>
<ItemSelectBom ref="itemSelectBom" @onSelected="onItemSelectedBom" ></ItemSelectBom>
</el-form-item>
- </el-col>
+ </el-col> -->
+ <el-col :span="24">
+ <div class="tagbox">
+ <div class="tagboxlabel" style="font-weight: 600; color: #606266">
+ BOM材料
+ </div>
+ <div class="tag" style="" placeholder="请选择BOM材料">
+ <el-tag
+ :key="index"
+ class="tagitem"
+ v-for="(tag, index) in selectBOMListtag"
+ closable
+ :disable-transitions="false"
+ @close="handleCloseBOM(tag)"
+ >
+ {{ tag }}
+ </el-tag>
+ </div>
+ <el-button
+ slot="append"
+ class="button1"
+ @click="handleSelectBom"
+ icon="el-icon-search"
+ ></el-button>
+ <ItemSelectBom
+ ref="itemSelectBom"
+ @onSelected="onItemSelectedBom"
+ ></ItemSelectBom>
+ </div>
+ </el-col>
</el-row>
<el-row>
- <el-col :span="12">
- <el-form-item label="用量" prop="dosage">
- <el-input v-model="form.dosage" placeholder="请输入用量" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="单位" prop="unit">
- <el-input v-model="form.unit" placeholder="请输入单位" />
- </el-form-item>
- </el-col>
+ <el-col :span="12">
+ <el-form-item label="用量" prop="dosage">
+ <el-input v-model="form.dosage" placeholder="请输入用量" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="单位" prop="unit">
+ <el-input v-model="form.unit" placeholder="请输入单位" />
+ </el-form-item>
+ </el-col>
</el-row>
<el-row>
- <el-col :span="12">
- <el-form-item label="控制参数" prop="controlParameters">
- <el-input v-model="form.controlParameters" placeholder="请输入控制参数" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="安全用量" prop="safeDosage">
- <el-input v-model="form.safeDosage" placeholder="安全设置" />
- </el-form-item>
- </el-col>
+ <el-col :span="12">
+ <el-form-item label="控制参数" prop="controlParameters">
+ <el-input
+ v-model="form.controlParameters"
+ placeholder="请输入控制参数"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="安全用量" prop="safeDosage">
+ <el-input v-model="form.safeDosage" placeholder="安全设置" />
+ </el-form-item>
+ </el-col>
</el-row>
<el-row>
- <el-col :span="24">
- <el-form-item label="步骤说明" prop="contentText">
- <el-input v-model="form.contentText" type="textarea" placeholder="请输入内容" />
- </el-form-item>
- </el-col>
+ <el-col :span="24">
+ <el-form-item label="步骤说明" prop="contentText">
+ <el-input
+ v-model="form.contentText"
+ type="textarea"
+ placeholder="请输入内容"
+ />
+ </el-form-item>
+ </el-col>
</el-row>
<el-row>
- <el-col :span="24">
- <el-form-item label="备注" prop="remark">
- <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
- </el-form-item>
- </el-col>
+ <el-col :span="24">
+ <el-form-item label="备注" prop="remark">
+ <el-input
+ v-model="form.remark"
+ type="textarea"
+ placeholder="请输入内容"
+ />
+ </el-form-item>
+ </el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -167,23 +295,29 @@
</template>
<script>
-import { listProcesscontent, getProcesscontent, delProcesscontent, addProcesscontent, updateProcesscontent } from "@/api/technology/recipecontent";
-import ItemSelect from "./single.vue";
-import ItemSelectBom from "./singleBom.vue";
-import { Message } from 'element-ui'
+import {
+ listProcesscontent,
+ getProcesscontent,
+ delProcesscontent,
+ addProcesscontent,
+ updateProcesscontent,
+} from "@/api/technology/recipecontent";
+import ItemSelect from "./single.vue";
+import ItemSelectBom from "./singleBom.vue";
+import { Message } from "element-ui";
export default {
name: "Processcontent",
- components: {ItemSelect,ItemSelectBom},
+ components: { ItemSelect, ItemSelectBom },
data() {
return {
- checkMaterial :null,
- checkDevice :null,
+ checkMaterial: null,
+ checkDevice: null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
- idsName:[],
+ idsName: [],
// 非单个禁用
single: true,
// 非多个禁用
@@ -214,23 +348,26 @@ export default {
// 表单校验
rules: {
recipeId: [
- { required: true, message: "工序不能为空", trigger: "blur" }
+ { required: true, message: "工序不能为空", trigger: "blur" },
],
- }
+ },
+ // 新增-辅助设备选中listtag
+ selectsubsidiaryListtag: [],
+ selectBOMListtag: [],
};
},
- props :{
- recipeId: undefined,
- optType: undefined
+ props: {
+ recipeId: undefined,
+ optType: undefined,
},
created() {
this.getList();
},
methods: {
/** 查询生产工序内容列表 */
- getList() {
+ getList() {
this.loading = true;
- listProcesscontent(this.queryParams).then(response => {
+ listProcesscontent(this.queryParams).then((response) => {
this.recipecontentList = response.rows;
this.total = response.total;
this.loading = false;
@@ -255,7 +392,7 @@ export default {
createBy: null,
createTime: null,
updateBy: null,
- updateTime: null
+ updateTime: null,
};
this.resetForm("form");
},
@@ -271,9 +408,9 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
- this.ids = selection.map(item => item.contentId)
- this.single = selection.length!==1
- this.multiple = !selection.length
+ this.ids = selection.map((item) => item.contentId);
+ this.single = selection.length !== 1;
+ this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
@@ -284,9 +421,21 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
- const contentId = row.contentId || this.ids
- getProcesscontent(contentId).then(response => {
+ const contentId = row.contentId || this.ids;
+ this.selectsubsidiaryListtag = [];
+ this.selectBOMListtag = [];
+ getProcesscontent(contentId).then((response) => {
this.form = response.data;
+ if (this.form.material != "" && this.form.material != null) {
+ this.selectBOMListtag = JSON.parse(
+ JSON.stringify(this.form.material.split(","))
+ );
+ }
+ if (this.form.device != "" && this.form.device != null) {
+ this.selectsubsidiaryListtag = JSON.parse(
+ JSON.stringify(this.form.device.split(","))
+ );
+ }
this.open = true;
this.title = "修改操作步骤";
});
@@ -294,16 +443,16 @@ export default {
/** 提交按钮 */
submitForm() {
// debugger
- this.$refs["form"].validate(valid => {
+ this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.contentId != null) {
- updateProcesscontent(this.form).then(response => {
+ updateProcesscontent(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
- addProcesscontent(this.form).then(response => {
+ addProcesscontent(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@@ -312,84 +461,125 @@ export default {
}
});
},
+ // 新增—设备选择
+ handleClose(tag) {
+ this.selectsubsidiaryListtag.splice(
+ this.selectsubsidiaryListtag.indexOf(tag),
+ 1
+ );
+ this.form.device = "";
+ var code = [];
+ this.selectsubsidiaryListtag.forEach((item) => {
+ if (item) {
+ code.push(item);
+ }
+ });
+ console.log(code, this.selectsubsidiaryListtag);
+ this.form.device = code.join(",");
+ },
+ // 新增—BOM选择
+ handleCloseBOM(tag) {
+ this.selectBOMListtag.splice(this.selectBOMListtag.indexOf(tag), 1);
+ this.form.material = "";
+ var code = [];
+ this.selectBOMListtag.forEach((item) => {
+ if (item) {
+ code.push(item);
+ }
+ });
+ console.log(code, this.selectBOMListtag);
+ this.form.material = code.join(",");
+ },
//新增 设备选择弹出框
- onItemSelectedEquipment(obj){
- if(this.form.device == null || this.form.device == ""){
- console.log("device是空，if获取的obj",obj);
- console.log("device是空，if获取的device",this.form.device);
+ onItemSelectedEquipment(obj) {
+ if (this.form.device == null || this.form.device == "") {
+ console.log("device是空，if获取的obj", obj);
+ console.log("device是空，if获取的device", this.form.device);
this.form.device = obj;
- }else{
- if(obj != undefined && obj != null && obj != ""){
- const a = obj.split(',');
- console.log('切割的数组',obj.split(','));
- a.forEach(item => {
- const b = this.form.device.split(',');
+ this.selectsubsidiaryListtag = obj.split(",");
+ } else {
+ if (obj != undefined && obj != null && obj != "") {
+ const a = obj.split(",");
+ console.log("切割的数组", obj.split(","));
+ a.forEach((item) => {
+ const b = this.form.device.split(",");
const size = b.length;
- console.log("size",size,b[size-1])
- const item1 = item+',';
- console.log("打印item1",item1);
+ console.log("size", size, b[size - 1]);
+ const item1 = item + ",";
+ console.log("打印item1", item1);
this.checkDevice = this.form.device.search(item1) != -1;
- console.log("check的值",this.checkDevice);
- if(this.checkDevice == true ||b[size-1] == item){
- console.log("重复添加",true);
- Message.warning('您已经添加过该设备,请勿重复添加！！！');
- }else if(this.checkDevice == false){
- this.form.device = this.form.device +","+item;
+ console.log("check的值", this.checkDevice);
+ if (this.checkDevice == true || b[size - 1] == item) {
+ console.log("重复添加", true);
+ Message.warning("您已经添加过该设备,请勿重复添加！！！");
+ } else if (this.checkDevice == false) {
+ this.selectsubsidiaryListtag.push(item);
+ this.form.device = this.form.device + "," + item;
}
- })
+ });
}
}
},
- //新增 设备选择弹出框
- onItemSelectedBom(obj){
- if(this.form.material == null || this.form.material == ""){
- console.log("material是空，if获取的obj",obj);
- console.log("material是空，if获取的material",this.form.material);
+ //新增 BOM选择弹出框
+ onItemSelectedBom(obj) {
+ if (this.form.material == null || this.form.material == "") {
+ console.log("material是空，if获取的obj", obj);
+ console.log("material是空，if获取的material", this.form.material);
this.form.material = obj;
- }else{
- if(obj != undefined && obj != null && obj !=""){
- const a = obj.split(',');
- const len = obj.split(',').length;
- console.log('切割的数组',obj.split(','));
- a.forEach(item => {
+ this.selectBOMListtag = obj.split(",");
+ } else {
+ if (obj != undefined && obj != null && obj != "") {
+ const a = obj.split(",");
+ const len = obj.split(",").length;
+ console.log("切割的数组", obj.split(","));
+ a.forEach((item) => {
this.checkMaterial = this.form.material.search(item) != -1;
- console.log("check的值",this.check);
- if(this.checkMaterial == true){
- console.log("重复添加",true);
- Message.warning('您已经添加过该物料Bom,请勿重复添加！！！');
- }else if(this.checkMaterial == false){
- this.form.material = this.form.material +","+item;
+ console.log("check的值", this.check);
+ if (this.checkMaterial == true) {
+ console.log("重复添加", true);
+ Message.warning("您已经添加过该物料Bom,请勿重复添加！！！");
+ } else if (this.checkMaterial == false) {
+ this.selectBOMListtag.push(item);
+ this.form.material = this.form.material + "," + item;
}
- })
+ });
}
}
},
//新增 设备选择弹出框
- handleSelectEquipment(){
+ handleSelectEquipment() {
this.$refs.itemSelect.showFlag = true;
},
// 新增 设备选择弹出框
- handleSelectBom(){
+ handleSelectBom() {
this.$refs.itemSelectBom.showFlag = true;
},
/** 删除按钮操作 */
handleDelete(row) {
const contentIds = row.contentId || this.ids;
- this.$modal.confirm('是否确认删除操作步骤？').then(function() {
- return delProcesscontent(contentIds);
- }).then(() => {
- this.getList();
- this.$modal.msgSuccess("删除成功");
- }).catch(() => {});
+ this.$modal
+ .confirm("是否确认删除操作步骤？")
+ .then(function () {
+ return delProcesscontent(contentIds);
+ })
+ .then(() => {
+ this.getList();
+ this.$modal.msgSuccess("删除成功");
+ })
+ .catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
- this.download('technology/pro/recipecontent/export', {
- ...this.queryParams
- }, `recipecontent_${new Date().getTime()}.xlsx`)
- }
- }
+ this.download(
+ "technology/pro/recipecontent/export",
+ {
+ ...this.queryParams,
+ },
+ `recipecontent_${new Date().getTime()}.xlsx`
+ );
+ },
+ },
};
</script>
<style lang="scss" scoped>
@@ -401,7 +591,7 @@ export default {
// padding-left: 26px;
margin-bottom: 15px;
.tagboxlabel {
- width: 100px;
+ width: 109px;
text-align: right;
vertical-align: middle;
font-size: 14px;
@@ -409,7 +599,7 @@ export default {
line-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- margin-right: 12px;
+ margin-right: 15px;
}
.tag {
width: 82%;
@@ -425,7 +615,11 @@ export default {
width: 57px;
height: 35px;
margin-left: 10px;
- background: #F5F7FA;
+ background: #f5f7fa;
}
}
+div.tag:empty:before {
+ content: attr(placeholder);
+ color: #bbb;
+}
</style>
\ No newline at end of file