工艺管理、工艺产线完善

src/views/basic/processes.vue

@@ -1,285 +1,286 @@
 <template>
-	<div class="video-setting">
-		<el-card class="header" style="margin-bottom: 10px">
-			<el-button type="primary" @click="openModal('add')"
-				>添加生产线</el-button
-			>
-		</el-card>
-		<el-row :gutter="8">
-			<el-col :span="24">
-				<el-card class="box-card">
-					<!-- :searchMoreFn="openSearchModal" -->
-					<by-table
-						:data="tableList"
-						:columns="columns"
-						:selectConfig="selectConfig"
-						:loading="loading"
-						@search="searchList"
-					>
-					</by-table>
-                    <el-pagination
-                        style="margin-top:20px;text-align: right;"
-                        @size-change="handleSizeChange"
-                        @current-change="getList"
-                        :current-page.sync="req.pageNum"
-                        :page-sizes="[10, 20, 50, 100]"
-                        :page-size="req.pageSize"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="req.total">
-                    </el-pagination>
-					<el-dialog
-						:title="modalType == 'add' ? '添加' : '编辑' + '生产线'"
-						:visible.sync="formModalType"
-						width="30%"
-					>
-						<byFrom
-							ref="form"
-							v-model="dialogParams"
-							:form-config="dialogForm"
-							:insideRules="dialogRules"
-						></byFrom>
-					</el-dialog>
-				</el-card>
-			</el-col>
-		</el-row>
-	</div>
+  <div class="video-setting">
+    <el-card class="header" style="margin-bottom: 10px">
+      <el-button type="primary" @click="openModal('add')">添加生产线</el-button>
+    </el-card>
+    <el-row :gutter="8">
+      <el-col :span="24">
+        <el-card class="box-card">
+          <!-- :searchMoreFn="openSearchModal" -->
+          <by-table
+            :data="tableList"
+            :columns="columns"
+            :selectConfig="selectConfig"
+            :loading="loading"
+            @search="searchList"
+          >
+          </by-table>
+          <el-pagination
+            style="margin-top: 20px; text-align: right"
+            @size-change="handleSizeChange"
+            @current-change="getList"
+            :current-page.sync="req.pageNum"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="req.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="req.total"
+          >
+          </el-pagination>
+          <el-dialog
+            :title="modalType == 'add' ? '添加' : '编辑' + '生产线'"
+            :visible.sync="formModalType"
+            width="30%"
+          >
+            <byFrom
+              ref="form"
+              v-model="dialogParams"
+              :form-config="dialogForm"
+              :insideRules="dialogRules"
+            ></byFrom>
+          </el-dialog>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 <script>
-import byFrom from '@/components/form-test/index.vue'
-import byTable from '@/components/by-table/index.js'
+import byFrom from "@/components/form-test/index.vue";
+import byTable from "@/components/by-table/index.js";
 export default {
-	name: 'equipment-management',
-	components: { byFrom, byTable },
-	data() {
-		return {
-			viewModal: false,
-			req: {
-				pageNum: 1,
-				pageSize: 10,
-				keyword: '',
-				status: '',
-				productionWorkshopId: '',
-				total:0,
-			},
-			selectConfig: [
-				{
-					label: '是否包装',
-					prop: 'whetherPacking',
-					data: [
-						{
-							label: '是',
-							value: 1,
-						},
-						{
-							label: '否',
-							value: 0,
-						},
-						
-					],
-				},
-			],
-			columns: [
-				{
-					label: '工序名称',
-					prop: 'name',
-				},
-				{
-					label: '工序说明',
-					prop: 'introduce',
-				},
-				{
-					label: '工艺图纸',
-					prop: 'status',
-                    render: (h, params) => {
-                        return <a href={params}></a>
-                    },
-				},
-				{
-					label: '操作',
-					prop: 'title',
-					actions: [
-						{
-							text: '修改',
-							type: 'text',
-							fn: (scoped) => {
-                                console.log(scoped.row)
-                                
-								this.openModal('edit',scoped.row)
-							},
-						},
-						{
-							text: '删除',
-							type: 'text',
-							style: {
-								color: 'red',
-							},
-                            fn:(scoped) => {
-								this.$confirm('确认删除本条数据？')
-									.then(() => {
-										this.$post('/workingProcedure/delete',{id:scoped.row.id}).then(res=>{
-											if(res.code === 200){
-												this.$message({
-													message: '删除成功',
-													type: 'success'
-												});
-												this.getList()
-											}
-										})
-									})
-									.catch(_ => {});
-                            }
-						},
-					],
-				},
-			],
-
-			tableList: [],
-			loading: false,
-			dialogParams: {
-				name: '',
-				fileInfo:{},
-                whetherPacking:0,
-                introduce:null,
-                fileInfoList:[],
-
-			},
-			dialogForm: {
-				loadingStatus: false,
-                name: {
-					label: '工序名称',
-					type: 'input',
-				}, 
-                fileInfoList: {
-                    label: '工序图纸',
-                    type: "uploads",
-                    data: [],
-                    tip: "",
-                    accept: ".pdf",
-                    fileList: [],
-                    limit:1,
-                },               
-                whetherPacking:{
-                    label: '是否包装',
-                    type:"radio",
-                    data:[{label:"是",key:1},{label:"否",key:0}],
-                },
-                introduce: {
-					label: '工序说明',
-					type: 'input',
-                    itemType:"textarea"
-				},
-				otherButton: {
-					align: 'center',
-					list: [
-						{
-							name:'取消',
-							methodsText: 'cancel',
-							cancel: () => {
-								this.$refs.form.reset()
-								this.formModalType = false
-							},
-						},
-						{
-							name: '确定',
-							methodsText: 'submit',
-							type: 'primary',
-							submit: () => {
-								this.handleSubmit(this.dialogParams)
-							},
-						},
-					],
-				},
-			},
-			dialogRules: {
-				
-			},
-			modalType: 'add',
-			formModalType: false,
-		}
-	},
-	created() {
-		//this.getSelectList()
-	},
-	mounted() {
-		this.getList()
-        
-	},
-	watch: {},
-	methods: {
-        
-        handleSizeChange(num){
-            this.req.pageNum = 1
-            this.req.pageSize = num
-            this.getList()
+  name: "equipment-management",
+  components: { byFrom, byTable },
+  data() {
+    return {
+      viewModal: false,
+      req: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "",
+        status: "",
+        productionWorkshopId: "",
+        total: 0,
+      },
+      selectConfig: [
+        {
+          label: "是否包装",
+          prop: "whetherPacking",
+          data: [
+            {
+              label: "是",
+              value: 1,
+            },
+            {
+              label: "否",
+              value: 0,
+            },
+          ],
         },
-		searchList(req){
-			this.req = req
-			console.log(this.req)
-			this.getList()
-		},
-		openModal(type,data) {
-			const v = this
-			v.modalType = type
-			this.formModalType = true
-            if(type == 'add'){
-                this.$nextTick(() => {
-                    this.dialogParams = {
-						name: '',
-						fileInfo:{},
-						whetherPacking:0,
-						introduce:null,
-						fileInfoList:[],
-					}
-                })
-            }else{
-                this.$nextTick(() => {
-                    this.dialogParams = {...data}
-                })
-                
+      ],
+      columns: [
+        {
+          label: "工序名称",
+          prop: "name",
+        },
+        {
+          label: "工序说明",
+          prop: "introduce",
+        },
+        {
+          label: "工艺图纸",
+          prop: "status",
+          render: (h, params) => {
+            return (
+              <a href={params.fileInfo.filePath}>{params.fileInfo.fileName}</a>
+            );
+          },
+        },
+        {
+          label: "是否包装",
+          prop: "whetherPacking",
+        },
+        {
+          label: "操作",
+          prop: "title",
+          actions: [
+            {
+              text: "修改",
+              type: "text",
+              fn: (scoped) => {
+                this.openModal("edit", scoped.row);
+              },
+            },
+            {
+              text: "删除",
+              type: "text",
+              style: {
+                color: "red",
+              },
+              fn: (scoped) => {
+                this.$confirm("确认删除本条数据？")
+                  .then(() => {
+                    this.$post("/workingProcedure/delete", {
+                      id: scoped.row.id,
+                    }).then((res) => {
+                      if (res.code === 200) {
+                        this.$message({
+                          message: "删除成功",
+                          type: "success",
+                        });
+                        this.getList();
+                      }
+                    });
+                  })
+                  .catch((_) => {});
+              },
+            },
+          ],
+        },
+      ],
+      tableList: [],
+      loading: false,
+      dialogParams: {
+        name: "",
+        fileInfo: {},
+        whetherPacking: 0,
+        introduce: null,
+        fileInfoList: [],
+      },
+      dialogForm: {
+        loadingStatus: false,
+        name: {
+          label: "工序名称",
+          type: "input",
+        },
+        fileInfoList: {
+          label: "工序图纸",
+          type: "uploads",
+          data: [],
+          tip: "",
+          accept: ".pdf",
+          fileList: [],
+          limit: 1,
+        },
+        whetherPacking: {
+          label: "是否包装",
+          type: "radio",
+          data: [
+            { label: "是", key: 1 },
+            { label: "否", key: 0 },
+          ],
+        },
+        introduce: {
+          label: "工序说明",
+          type: "input",
+          itemType: "textarea",
+        },
+        otherButton: {
+          align: "center",
+          list: [
+            {
+              name: "取消",
+              methodsText: "cancel",
+              cancel: () => {
+                this.formModalType = false;
+                this.$refs.form.reset();
+              },
+            },
+            {
+              name: "确定",
+              methodsText: "submit",
+              type: "primary",
+              submit: () => {
+                this.handleSubmit(this.dialogParams);
+              },
+            },
+          ],
+        },
+      },
+      dialogRules: {
+        name: [{ required: true, message: "请输入工序名称", trigger: "blur" }],
+        whetherPacking: [
+          { required: true, message: "请选择", trigger: "change" },
+        ],
+      },
+      modalType: "add",
+      formModalType: false,
+    };
+  },
+  created() {
+    //this.getSelectList()
+  },
+  mounted() {
+    this.getList();
+  },
+  watch: {},
+  methods: {
+    handleSizeChange(num) {
+      this.req.pageNum = 1;
+      this.req.pageSize = num;
+      this.getList();
+    },
+    searchList(req) {
+      this.req = req;
+      this.getList();
+    },
+    openModal(type, data) {
+      const v = this;
+      v.modalType = type;
+      this.formModalType = true;
+      if (type == "add") {
+        this.$nextTick(() => {
+          this.dialogParams = {
+            name: "",
+            fileInfo: {},
+            whetherPacking: 0,
+            introduce: null,
+            fileInfoList: [],
+          };
+        });
+      } else {
+        this.$nextTick(() => {
+          this.dialogParams = { ...data, fileInfoList: [] };
+        });
+      }
+    },
+    openSearchModal() {
+      alert("点击更多，用来打开搜索模态框");
+    },
+    getList() {
+      this.loading = true;
+      this.$post("/workingProcedure/page", this.req).then((res) => {
+        this.req.total = res.data.total;
+        this.tableList = res.data.records;
+        this.loading = false;
+      });
+    },
+    handleSubmit(_form) {
+      const v = this;
+      this.$refs.form.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.dialogForm.loadingStatus = true;
+          if (v.dialogParams.fileInfoList.length > 0) {
+            v.dialogParams.fileInfo = { ..._form.fileInfoList[0] };
+          }
+          v.$post("/workingProcedure/" + v.modalType, v.dialogParams).then(
+            (res) => {
+              this.msgSuccess(
+                this.$t(v.modalType == "add" ? "addSuccess" : "editSuccess")
+              );
+              this.formModalType = false;
+              this.dialogForm.loadingStatus = false;
+              this.getList();
             }
-			
-			
-		},
-		openSearchModal() {
-			alert('点击更多，用来打开搜索模态框')
-		},
-		getList() {
-			this.loading = true
-			this.$post('/workingProcedure/page',this.req).then((res) => {
-                console.log(res)
-                this.req.total = res.data.total
-                this.tableList = res.data.records
-                this.loading = false
-            })
-		},
-		handleSubmit(_form) {
-			const v = this
-            console.log(_form)
-			this.$refs.form.$refs['form'].validate((valid) => {
-				if (valid) {
-					this.dialogForm.loadingStatus = true
-                    
-                    if(v.dialogParams.fileInfoList.length > 0){
-                        v.dialogParams.fileInfo = {..._form.fileInfoList[0]}
-                    }
-                    console.log(v.dialogParams,54545454545)
-                    v.$post('/workingProcedure/' + v.modalType,v.dialogParams).then(res=>{
-                        this.msgSuccess(this.$t(v.modalType == 'add'? 'addSuccess': 'editSuccess'))
-                        //this.$refs.form.reset()
-                        this.formModalType = false
-                        this.dialogForm.loadingStatus = false
-                        this.getList()
-                    })
-				}
-			})
-		},
-	},
-}
+          );
+        }
+      });
+    },
+  },
+};
 </script>
     
     <style lang="scss" scoped>
 .box-card {
-	overflow-y: auto;
+  overflow-y: auto;
 }
 </style>
     

src/views/basic/workingRoute.vue

@@ -1,369 +1,440 @@
 <template>
-	<div class="video-setting">
-		<el-card class="header" style="margin-bottom: 10px">
-			<el-button type="primary" @click="openModal('add')"
-				>添加工艺路线</el-button
-			>
-		</el-card>
-		<el-row :gutter="8">
-			<el-col :span="24">
-				<el-card class="box-card">
-					<!-- :searchMoreFn="openSearchModal" -->
-					<by-table
-						:data="tableList"
-						:columns="columns"
-						:selectConfig="selectConfig"
-						:loading="loading"
-						@search="searchList"
-					>
-					</by-table>
-                    <el-pagination
-                        style="margin-top:20px;text-align: right;"
-                        @size-change="handleSizeChange"
-                        @current-change="getList"
-                        :current-page.sync="req.pageNum"
-                        :page-sizes="[10, 20, 50, 100]"
-                        :page-size="req.pageSize"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="req.total">
-                    </el-pagination>
-					<el-dialog
-						:title="modalType == 'add' ? '添加' : '编辑' + '生产线'" 
-						:visible.sync="formModalType"
-						width="30%"
-					>
-						<byFrom
-							ref="form"
-							v-model="dialogParams"
-							:form-config="dialogForm"
-							:insideRules="dialogRules"
-						>
-                            <div slot="workingRouteProcedureList">
-                                <el-button type="primary" @click="openWorkingProcedureModal">配置工艺路线</el-button>
-                            </div>
-                        </byFrom>
-					</el-dialog>
-                    <el-dialog
-						title="工艺路线配置" 
-						:visible.sync="workingProcedureModal"
-						width="50%"
-					>
-                        <el-form ref="form2" :model="form" label-width="80px" label-position="top">
-                            <el-form-item label="选择工序">
-                                <el-select v-model="dialogParams.workingRouteProcedure" placeholder="请选择工序">
-                                    <el-option :label="i.name" :value="i.id" v-for="i in workingProcedureData" :key="i.id"></el-option>
-                                </el-select>
-                                <el-button style="margin-left:20px" @click="pushList">添加</el-button>
-                            </el-form-item>
-                            <el-form-item label="工艺路线">
-                                <ul class="step">
-                                    <li v-for="(i,index) in dialogParams.workingRouteProcedureList" 
-                                    :style="'width:'+ 100/dialogParams.workingRouteProcedureList.length +'%'" 
-                                    :key="i.id">
-                                        <div class="num">{{ index + 1 }}</div>
-                                        <div class="text">{{i.name}}</div>
-                                        <div class="delete">删除</div>
-                                    </li>
-                                </ul>
-                            </el-form-item>
-                        </el-form>
-					</el-dialog>
-				</el-card>
-			</el-col>
-		</el-row>
-	</div>
+  <div class="video-setting">
+    <el-card class="header" style="margin-bottom: 10px">
+      <el-button type="primary" @click="openModal('add')"
+        >添加工艺路线</el-button
+      >
+    </el-card>
+    <el-row :gutter="8">
+      <el-col :span="24">
+        <el-card class="box-card">
+          <!-- :searchMoreFn="openSearchModal" -->
+          <by-table
+            :data="tableList"
+            :columns="columns"
+            :selectConfig="selectConfig"
+            :loading="loading"
+            @search="searchList"
+          >
+          </by-table>
+          <el-pagination
+            style="margin-top: 20px; text-align: right"
+            @size-change="handleSizeChange"
+            @current-change="getList"
+            :current-page.sync="req.pageNum"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="req.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="req.total"
+          >
+          </el-pagination>
+          <el-dialog
+            :title="modalType == 'add' ? '添加' : '编辑' + '生产线'"
+            :visible.sync="formModalType"
+            width="30%"
+          >
+            <byFrom
+              ref="form"
+              v-model="dialogParams"
+              :form-config="dialogForm"
+              :insideRules="dialogRules"
+            >
+              <div slot="workingRouteProcedureList">
+                <el-button type="primary" @click="openWorkingProcedureModal"
+                  >配置工艺路线</el-button
+                >
+              </div>
+            </byFrom>
+          </el-dialog>
+          <el-dialog
+            title="工艺路线配置"
+            :visible.sync="workingProcedureModal"
+            width="50%"
+          >
+            <el-form
+              ref="form2"
+              :model="form"
+              label-width="80px"
+              label-position="top"
+            >
+              <el-form-item label="选择工序">
+                <el-select
+                  v-model="dialogParams.workingRouteProcedure"
+                  placeholder="请选择工序"
+                >
+                  <el-option
+                    :label="i.name"
+                    :value="i.id"
+                    v-for="i in workingProcedureData"
+                    :key="i.id"
+                  ></el-option>
+                </el-select>
+                <el-button style="margin-left: 20px" @click="pushList"
+                  >添加</el-button
+                >
+              </el-form-item>
+              <el-form-item label="工艺路线">
+                <!-- <ul class="step">
+                  <li
+                    v-for="(i, index) in dialogParams.workingRouteProcedureList"
+                    :style="
+                      'width:' +
+                      100 / dialogParams.workingRouteProcedureList.length +
+                      '%'
+                    "
+                    :key="i.id"
+                  >
+                    <div class="num">{{ index + 1 }}</div>
+                    <div class="text">{{ i.name }}</div>
+                    <div class="delete">删除</div>
+                  </li>
+                </ul> -->
+                <el-steps :active="999" finish-status="success">
+                  <el-step
+                    v-for="(i, index) in dialogParams.workingRouteProcedureList"
+                    :key="i.id"
+                    :title="i.name"
+                  >
+                    <template slot="title">
+                      <div>
+                        {{ i.name }}
+                      </div>
+                      <div>
+                        <el-button type="text" @click="handleDelete(index)"
+                          >删除</el-button
+                        >
+                      </div>
+                    </template>
+                  </el-step>
+                </el-steps>
+              </el-form-item>
+            </el-form>
+          </el-dialog>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 <script>
-import byFrom from '@/components/form-test/index.vue'
-import byTable from '@/components/by-table/index.js'
+import byFrom from "@/components/form-test/index.vue";
+import byTable from "@/components/by-table/index.js";
 export default {
-	name: 'equipment-management',
-	components: { byFrom, byTable },
-	data() {
-		return {
-            form:{},
-            workingProcedureModal:false,
-			viewModal: false,
-			req: {
-				pageNum: 1,
-				pageSize: 10,
-				keyword: '',
-				status: '',
-				productionWorkshopId: '',
-				total:0,
-			},
-			selectConfig: [],
-			columns: [
-				{
-					label: '工艺名称',
-					prop: 'name',
-				},
-				{
-					label: '工艺路线',
-					prop: 'introduce',
-				},
-				{
-					label: '适用产品',
-					prop: 'status',
-                    render: (h, params) => {
-                        return <a href={params}></a>
-                    },
-				},
-                {
-					label: '工艺说明',
-					prop: 'introduce',
-				},
-				{
-					label: '操作',
-					prop: 'title',
-					actions: [
-						{
-							text: '修改',
-							type: 'text',
-							fn: (scoped) => {
-                                console.log(scoped.row)
-                                
-								this.openModal('edit',scoped.row)
-							},
-						},
-						{
-							text: '删除',
-							type: 'text',
-							style: {
-								color: 'red',
-							},
-                            fn:(scoped) => {
-								this.$confirm('确认删除本条数据？')
-									.then(() => {
-										this.$post('/workingRoute/delete',{id:scoped.row.id}).then(res=>{
-											if(res.code === 200){
-												this.$message({
-													message: '删除成功',
-													type: 'success'
-												});
-												this.getList()
-											}
-										})
-									})
-									.catch(_ => {});
-                                
-                            }
-						},
-					],
-				},
-			],
+  name: "equipment-management",
+  components: { byFrom, byTable },
+  data() {
+    return {
+      form: {},
+      workingProcedureModal: false,
+      viewModal: false,
+      req: {
+        pageNum: 1,
+        pageSize: 10,
+        keyword: "",
+        status: "",
+        productionWorkshopId: "",
+        total: 0,
+      },
+      selectConfig: [],
+      columns: [
+        {
+          label: "工艺名称",
+          prop: "name",
+        },
+        {
+          label: "工艺路线",
+          prop: "workingProcedureGroup",
+        },
+        {
+          label: "适用产品",
+          prop: "productGroup",
+          // render: (h, params) => {
+          //   return <a href={params}></a>;
+          // },
+        },
+        {
+          label: "工艺说明",
+          prop: "introduce",
+        },
+        {
+          label: "操作",
+          prop: "title",
+          actions: [
+            {
+              text: "修改",
+              type: "text",
+              fn: (scoped) => {
+                console.log(scoped.row);
 
-			tableList: [],
-			loading: false,
-			dialogParams: {
-				name: '',
-                introduce:null,
-                workingRouteProcedureList:[],
-                productIdList:[],
-                workingRouteProcedure:null,
+                this.openModal("edit", scoped.row);
+              },
+            },
+            {
+              text: "删除",
+              type: "text",
+              style: {
+                color: "red",
+              },
+              fn: (scoped) => {
+                this.$confirm("确认删除本条数据？")
+                  .then(() => {
+                    this.$post("/workingRoute/delete", {
+                      id: scoped.row.id,
+                    }).then((res) => {
+                      if (res.code === 200) {
+                        this.$message({
+                          message: "删除成功",
+                          type: "success",
+                        });
+                        this.getList();
+                      }
+                    });
+                  })
+                  .catch((_) => {});
+              },
+            },
+          ],
+        },
+      ],
 
-			},
-			dialogForm: {
-				loadingStatus: false,
-                name: {
-					label: '工艺名称',
-					type: 'input',
-				}, 
-                introduce: {
-					label: '工艺说明',
-					type: 'input',
-                    itemType:"textarea"
-				},
-                workingRouteProcedureList: {
-                    label: '工艺路线',
-                    type: "slot",
-                },               
-                productIdList:{
-                    label: '适用产品',
-                    type:"select",
-                    multiple:true,
-                    data:[],
-                    props: {
-						label: 'name',
-						value: 'id',
-					},
-                },
-                
-				otherButton: {
-					align: 'center',
-					list: [
-						{
-							name:'取消',
-							methodsText: 'cancel',
-							cancel: () => {
-								this.$refs.form.reset()
-								this.formModalType = false
-							},
-						},
-						{
-							name: '确定',
-							methodsText: 'submit',
-							type: 'primary',
-							submit: () => {
-								this.handleSubmit(this.dialogParams)
-							},
-						},
-					],
-				},
-			},
-			dialogRules: {
-				
-			},
-			modalType: 'add',
-			formModalType: false,
-            workingProcedureData:[],
-		}
-	},
-	created() {
-		//this.getSelectList()
-	},
-	mounted() {
-		this.getList()
-        this.getProduct()
-        this.getWorkingProcedure()
-	},
-	watch: {},
-	methods: {
-        pushList(){
-            const v = this
-            if(!v.dialogParams.workingRouteProcedure) {
-                this.msgSuccess('请选择工序')
-                return
-            }
-            v.workingProcedureData.map(item=>{
-                if(item.id == v.dialogParams.workingRouteProcedure){
-                    console.log(item)
-                    v.dialogParams.workingRouteProcedureList.push({
-                        workingProcedureId:item.id,
-                        name:item.name
-                    })
-                }
-            })
-            
+      tableList: [],
+      loading: false,
+      dialogParams: {
+        name: "",
+        introduce: null,
+        workingRouteProcedureList: [],
+        productIdList: [],
+        workingRouteProcedure: null,
+      },
+      dialogForm: {
+        loadingStatus: false,
+        name: {
+          label: "工艺名称",
+          type: "input",
+        },
+        introduce: {
+          label: "工艺说明",
+          type: "input",
+          itemType: "textarea",
         },
-        openWorkingProcedureModal(){
-            const v = this
-            v.workingProcedureModal = true
+        workingRouteProcedureList: {
+          label: "工艺路线",
+          type: "slot",
         },
-        getProduct() {
-			this.loading = true
-			this.$post('/product/list',{}).then((res) => {
-                this.dialogForm.productIdList.data = res.data
-                
-            })
-		},
-        getWorkingProcedure() {
-			this.loading = true
-			this.$post('/workingProcedure/list',{}).then((res) => {
-                this.workingProcedureData = res.data
-                
-            })
-		},
-        handleSizeChange(num){
-            this.req.pageNum = 1
-            this.req.pageSize = num
-            this.getList()
+        productIdList: {
+          label: "适用产品",
+          type: "select",
+          multiple: true,
+          data: [],
+          props: {
+            label: "name",
+            value: "id",
+          },
+        },
+
+        otherButton: {
+          align: "center",
+          list: [
+            {
+              name: "取消",
+              methodsText: "cancel",
+              cancel: () => {
+                this.$refs.form.reset();
+                this.formModalType = false;
+              },
+            },
+            {
+              name: "确定",
+              methodsText: "submit",
+              type: "primary",
+              submit: () => {
+                this.handleSubmit(this.dialogParams);
+              },
+            },
+          ],
         },
-		searchList(req){
-			this.req = req
-			console.log(this.req)
-			this.getList()
-		},
-		openModal(type,data) {
-			const v = this
-			v.modalType = type
-			this.formModalType = true
-            if(type == 'add'){
-                this.$nextTick(() => {
-                    this.dialogParams = {
-						name: '',
-                        introduce:null,
-                        workingRouteProcedureList:[],
-                        productIdList:[],
-                        workingRouteProcedure:null,
-					}
-                })
-            }else{
-                this.$nextTick(() => {
-                    this.dialogParams = {...data}
-                })
-                
+      },
+      dialogRules: {},
+      modalType: "add",
+      formModalType: false,
+      workingProcedureData: [],
+    };
+  },
+  created() {
+    //this.getSelectList()
+  },
+  mounted() {
+    this.getList();
+    this.getProduct();
+    this.getWorkingProcedure();
+  },
+  watch: {},
+  methods: {
+    pushList() {
+      const v = this;
+      if (!v.dialogParams.workingRouteProcedure) {
+        this.msgSuccess("请选择工序");
+        return;
+      }
+      v.workingProcedureData.map((item) => {
+        if (item.id == v.dialogParams.workingRouteProcedure) {
+          console.log(item);
+          v.dialogParams.workingRouteProcedureList.push({
+            workingProcedureId: item.id,
+            name: item.name,
+          });
+        }
+      });
+    },
+    openWorkingProcedureModal() {
+      const v = this;
+      v.workingProcedureModal = true;
+    },
+    getProduct() {
+      this.loading = true;
+      this.$post("/product/list", {}).then((res) => {
+        this.dialogForm.productIdList.data = res.data;
+      });
+    },
+    getWorkingProcedure() {
+      this.loading = true;
+      this.$post("/workingProcedure/list", {}).then((res) => {
+        this.workingProcedureData = res.data;
+      });
+    },
+    handleSizeChange(num) {
+      this.req.pageNum = 1;
+      this.req.pageSize = num;
+      this.getList();
+    },
+    searchList(req) {
+      this.req = req;
+      console.log(this.req);
+      this.getList();
+    },
+    openModal(type, data) {
+      const v = this;
+      v.modalType = type;
+      this.formModalType = true;
+      if (type == "add") {
+        this.$nextTick(() => {
+          this.dialogParams = {
+            name: "",
+            introduce: null,
+            workingRouteProcedureList: [],
+            productIdList: [],
+            workingRouteProcedure: null,
+          };
+        });
+      } else {
+        this.dialogForm.loadingStatus = true;
+        v.$post("/workingRoute/details", { id: data.id }).then((res) => {
+          this.dialogForm.loadingStatus = false;
+          this.$nextTick(() => {
+            let workingRouteProcedureList = [];
+            workingRouteProcedureList = res.data.workingProcedureList.map(
+              (x) => ({
+                name: x.name,
+                workingProcedureId: x.id,
+              })
+            );
+            this.dialogParams = {
+              ...res.data,
+              workingRouteProcedureList,
+            };
+          });
+        });
+      }
+    },
+    openSearchModal() {
+      alert("点击更多，用来打开搜索模态框");
+    },
+    getList() {
+      this.loading = true;
+      this.$post("/workingRoute/page", this.req).then((res) => {
+        console.log(res);
+        this.req.total = res.data.total;
+        this.tableList = res.data.records;
+        this.loading = false;
+      });
+    },
+    handleSubmit(_form) {
+      const v = this;
+      console.log(_form);
+      this.$refs.form.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (!v.dialogParams.workingRouteProcedureList.length > 0) {
+            return this.$message({
+              message: "请配置工艺路线",
+              type: "info",
+            });
+          }
+          v.dialogParams.workingRouteProcedureList =
+            v.dialogParams.workingRouteProcedureList.map((x) => ({
+              workingProcedureId: x.workingProcedureId,
+            }));
+          this.dialogForm.loadingStatus = true;
+          console.log(v.dialogParams, 54545454545);
+          v.$post("/workingRoute/" + v.modalType, v.dialogParams).then(
+            (res) => {
+              this.msgSuccess(
+                this.$t(v.modalType == "add" ? "addSuccess" : "editSuccess")
+              );
+              //this.$refs.form.reset()
+              this.formModalType = false;
+              this.dialogForm.loadingStatus = false;
+              this.getList();
             }
-			
-			
-		},
-		openSearchModal() {
-			alert('点击更多，用来打开搜索模态框')
-		},
-		getList() {
-			this.loading = true
-			this.$post('/workingRoute/page',this.req).then((res) => {
-                console.log(res)
-                this.req.total = res.data.total
-                this.tableList = res.data.records
-                this.loading = false
-            })
-		},
-		handleSubmit(_form) {
-			const v = this
-            console.log(_form)
-			this.$refs.form.$refs['form'].validate((valid) => {
-				if (valid) {
-					this.dialogForm.loadingStatus = true
-                    
-                    if(v.dialogParams.fileInfoList.length > 0){
-                        v.dialogParams.fileInfo = {..._form.fileInfoList[0]}
-                    }
-                    console.log(v.dialogParams,54545454545)
-                    v.$post('/workingRoute/' + v.modalType,v.dialogParams).then(res=>{
-                        this.msgSuccess(this.$t(v.modalType == 'add'? 'addSuccess': 'editSuccess'))
-                        //this.$refs.form.reset()
-                        this.formModalType = false
-                        this.dialogForm.loadingStatus = false
-                        this.getList()
-                    })
-				}
-			})
-		},
-	},
-}
+          );
+        }
+      });
+    },
+    handleDelete(index) {
+      this.dialogParams.workingRouteProcedureList.splice(index, 1);
+      this.dialogParams.workingProcedureList.splice(index, 1);
+      this.$message({
+        message: "删除成功",
+        type: "success",
+      });
+    },
+  },
+};
 </script>
     
 <style lang="scss" scoped>
-.step{
-    text-align: center;
-    overflow: hidden;
-    margin: 0;
-    padding: 0;
-    li{
-        float: left;
-        list-style: none;
-        min-width: 50px;
-        .num{
-            width:20px;
-            height: 20px;
-            margin: 0 auto;
-            line-height: 20px;
-            text-align: center;
-            border-radius: 10px;
-            border:1px solid #dcdcdc;
-        }
-        .text{
-            
-        }
-        .delete{
-            color: red;
-            cursor: pointer;
-        }
+::v-deep {
+  .el-step.is-horizontal .el-step__line {
+    top: 18px;
+    left: 18px;
+  }
+}
+.step {
+  text-align: center;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  li {
+    float: left;
+    list-style: none;
+    min-width: 50px;
+    .num {
+      width: 20px;
+      height: 20px;
+      margin: 0 auto;
+      line-height: 20px;
+      text-align: center;
+      border-radius: 10px;
+      border: 1px solid #dcdcdc;
+    }
+    .text {
+    }
+    .delete {
+      color: red;
+      cursor: pointer;
     }
+  }
 }
 .box-card {
-	overflow-y: auto;
+  overflow-y: auto;
 }
 </style>