添加工厂选择弹窗，修改产品工厂信息新增方式

src/components/FactorySelect/index.vue

+<template>
+  <el-dialog
+    title="工厂选择"
+    v-if="showFlag"
+    :visible.sync="showFlag"
+    :modal="false"
+    width="80%"
+    center
+  >
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="工厂编码" prop="factoryCode">
+        <el-input
+          v-model="queryParams.factoryCode"
+          placeholder="请输入工厂编码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="工厂名称" prop="factoryName">
+        <el-input
+          v-model="queryParams.factoryName"
+          placeholder="请输入工厂名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="enableFlag">
+        <el-select
+          v-model="queryParams.enableFlag"
+          placeholder="请选择是或否"
+          clearable
+        >
+          <el-option
+            v-for="dict in dict.type.sys_yes_no"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      v-loading="loading"
+      :data="brandList"
+      @current-change="handleCurrent"
+      @row-dblclick="handleRowDbClick"
+    >
+      <el-table-column width="50" align="center">
+        <template v-slot="scope">
+          <el-radio
+            v-model="selectedFactoryId"
+            :label="scope.row.factoryId"
+            @change="handleRowChange(scope.row)"
+            >{{ "" }}</el-radio
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="工厂编码" align="center" prop="factoryCode" />
+      <el-table-column label="工厂名称" align="center" prop="factoryName" />
+      <el-table-column label="是否启用" align="center" prop="enableFlag" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.enableFlag"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确 定</el-button>
+      <el-button @click="showFlag = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { listFactory } from "@/api/mes/md/factory";
+
+export default {
+  name: "MdBrandSelectSingle",
+  components: {},
+  dicts: ['sys_yes_no'],
+  data() {
+    return {
+      showFlag: false,
+      // 选中数组
+      selectedFactoryId: undefined,
+      selectedRows: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 品牌表格数据
+      brandList: [],
+      // // 品牌名称
+      // brandName: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        factoryCode: null,
+        factoryName: null,
+        enableFlag: null,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询工厂列表 */
+    getList() {
+      this.loading = true;
+      listFactory(this.queryParams).then((response) => {
+        this.brandList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleCurrent(row) {
+      if (row) {
+        this.selectedRows = row;
+      }
+    },
+    // 单选选中数据
+    handleRowChange(row) {
+      if (row) {
+        this.selectedRows = row;
+      }
+    },
+    //双击选中
+    handleRowDbClick(row) {
+      if (row) {
+        this.selectedRows = row;
+        this.$emit("onSelected", this.selectedRows);
+        this.showFlag = false;
+      }
+    },
+    //确定选中
+    confirmSelect() {
+      if (this.selectedFactoryId == null || this.selectedFactoryId == 0) {
+        this.$notify({
+          title: "提示",
+          type: "warning",
+          message: "请至少选择一条数据!",
+        });
+        return;
+      }
+      this.$emit("onSelected", this.selectedRows);
+      this.showFlag = false;
+    },
+  },
+};
+</script>

src/views/mes/md/product/components/factory.vue

@@ -10,18 +10,9 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['md:factory:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['md:factory:edit']"
-        >修改</el-button>
+          >新增</el-button
+        >
+        <FactorySelect ref="FactorySelectRef" @onSelected="onFactorySelect" />
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -32,7 +23,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['md:factory:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -42,76 +34,102 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['md:factory: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="factoryList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="factoryList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
-<!--      <el-table-column label="产品工厂id" align="center" prop="productFactoryId" />
+      <!--      <el-table-column label="产品工厂id" align="center" prop="productFactoryId" />
       <el-table-column label="产品id" align="center" prop="itemId" />-->
-      <el-table-column label="工厂id" align="center" prop="factoryId" />
-      <el-table-column label="工厂编码" align="center" prop="factoryCode" />
-      <el-table-column label="工厂名称" align="center" prop="factoryName" />
-      <el-table-column label="创建人" align="center" prop="createBy" />
-      <el-table-column label="创建时间" align="center" prop="createTime" />
-      <el-table-column label="修改人" align="center" prop="updateBy" />
-      <el-table-column label="修改时间" align="center" prop="updateTime" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="工厂id"
+        align="center"
+        prop="factoryId"
+        width="100"
+      />
+      <el-table-column
+        label="工厂编码"
+        align="center"
+        prop="factoryCode"
+        width="100"
+      />
+      <el-table-column
+        label="工厂名称"
+        align="center"
+        prop="factoryName"
+        width="120"
+      />
+      <el-table-column
+        label="创建人"
+        align="center"
+        prop="createBy"
+        width="100"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      />
+      <el-table-column
+        label="修改人"
+        align="center"
+        prop="updateBy"
+        width="120"
+      />
+      <el-table-column
+        label="修改时间"
+        align="center"
+        prop="updateTime"
+        width="180"
+      />
+      <el-table-column label="操作" align="center" width="90">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['md:factory:edit']"
-          >修改</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['md:factory: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"
       @pagination="getList"
     />
-
-    <!-- 添加或修改产品工厂配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="工厂id" prop="factoryId">
-          <el-input v-model="form.factoryId" placeholder="请选择工厂id" />
-        </el-form-item>
-        <el-form-item label="工厂编码" prop="factoryCode">
-          <el-input v-model="form.factoryCode" placeholder="请输入工厂编码" />
-        </el-form-item>
-        <el-form-item label="工厂名称" prop="factoryName">
-          <el-input v-model="form.factoryName" placeholder="请输入工厂名称" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listFactory, getFactory, delFactory, addFactory, updateFactory } from "@/api/mes/md/productFactory";
+import {
+  listFactory,
+  getFactory,
+  delFactory,
+  addFactory,
+  updateFactory,
+} from "@/api/mes/md/productFactory";
+import FactorySelect from "@/components/FactorySelect/index.vue";
 
 export default {
   name: "Factory",
+  components: { FactorySelect },
   data() {
     return {
       // 遮罩层
@@ -143,18 +161,24 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        factoryName: "",
+        factoryId: "",
+        factoryCode: "",
+      },
       // 表单校验
-      rules: {
-      }
+      rules: {},
     };
   },
-  props:{
+  props: {
     optType: undefined,
-    itemId:null
+    itemId: {
+      type: Number | undefined,
+      default: undefined,
+    },
   },
   created() {
     this.getList();
@@ -163,7 +187,7 @@ export default {
     /** 查询产品工厂配置列表 */
     getList() {
       this.loading = true;
-      listFactory(this.queryParams).then(response => {
+      listFactory(this.queryParams).then((response) => {
         this.factoryList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -185,7 +209,7 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
       };
       this.resetForm("form");
     },
@@ -201,63 +225,53 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.productFactoryId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.productFactoryId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加产品工厂配置";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const productFactoryId = row.productFactoryId || this.ids
-      getFactory(productFactoryId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改产品工厂配置";
-      });
+      this.$refs["FactorySelectRef"].showFlag = true;
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.productFactoryId != null) {
-            updateFactory(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            this.form.itemId = this.itemId
-            addFactory(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
+
+    onFactorySelect(row) {
+      if (row != null && row != undefined) {
+        this.form.factoryId = row.factoryId;
+        this.form.factoryName = row.factoryName;
+
+        this.form.itemId = this.itemId
+        addFactory(this.form).then((response) => {
+          this.$modal.msgSuccess("新增成功");
+          this.getList();
+        });
+      }
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       const productFactoryIds = row.productFactoryId || this.ids;
-      this.$modal.confirm('是否确认删除产品工厂配置编号为"' + productFactoryIds + '"的数据项？').then(function() {
-        return delFactory(productFactoryIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm(
+          '是否确认删除产品工厂配置编号为"' + productFactoryIds + '"的数据项？'
+        )
+        .then(function () {
+          return delFactory(productFactoryIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('md/factory/export', {
-        ...this.queryParams
-      }, `factory_${new Date().getTime()}.xlsx`)
-    }
-  }
+      this.download(
+        "md/factory/export",
+        {
+          ...this.queryParams,
+        },
+        `factory_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
 </script>