产品管理页面-颜色/基本信息

src/api/mes/md/baseInfo.js

+import request from '@/utils/request'
+
+// 查询产品基本信息列表
+export function listInfo(query) {
+  return request({
+    url: '/md/info/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询产品基本信息详细
+export function getInfo(itemId) {
+  return request({
+    url: '/md/info/' + itemId,
+    method: 'get'
+  })
+}
+
+// 新增产品基本信息
+export function addInfo(data) {
+  return request({
+    url: '/md/info',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改产品基本信息
+export function updateInfo(data) {
+  return request({
+    url: '/md/info',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除产品基本信息
+export function delInfo(baseInfoId) {
+  return request({
+    url: '/md/info/' + baseInfoId,
+    method: 'delete'
+  })
+}

src/api/mes/md/color.js

+import request from '@/utils/request'
+
+// 查询颜色主数据列表
+export function listColor(query) {
+  return request({
+    url: '/md/color/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询颜色主数据详细
+export function getColor(colorId) {
+  return request({
+    url: '/md/color/' + colorId,
+    method: 'get'
+  })
+}
+
+// 新增颜色主数据
+export function addColor(data) {
+  return request({
+    url: '/md/color',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改颜色主数据
+export function updateColor(data) {
+  return request({
+    url: '/md/color',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除颜色主数据
+export function delColor(colorId) {
+  return request({
+    url: '/md/color/' + colorId,
+    method: 'delete'
+  })
+}

src/components/colorSelect/index.vue

+<template>
+  <el-dialog title="颜色选择"
+    v-if="showFlag"
+    :visible.sync="showFlag"
+    :modal= false
+    width="80%"
+    center
+  >
+    <el-row :gutter="20">
+      <!--颜色数据-->
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="颜色编码" prop="colorCode">
+            <el-input
+              v-model="queryParams.colorCode"
+              placeholder="请输入颜色编码"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="颜色名称" prop="colorName">
+            <el-input
+              v-model="queryParams.colorName"
+              placeholder="请输入颜色名称"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </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="colorList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="颜色编码" width = "120" align="center" key="colorCode" prop="colorCode" v-if="columns[0].visible" >
+          </el-table-column>
+          <el-table-column label="颜色名称" min-width="120" align="left" key="colorName" prop="colorName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+    <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 { listColor} from "@/api/mes/md/color";
+import { listAllUnitmeasure} from "@/api/mes/md/unitmeasure";
+import {genCode} from "@/api/system/autocode/rule"
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "ColorSingle",
+  dicts: ['sys_yes_no','mes_item_product'],
+  components: { },
+  data() {
+    return {
+      showFlag:false,
+      // 选中数组
+      ids: [],
+      selectedRows: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 物料产品表格数据
+      colorList: null,
+      // 部门树选项
+      //itemTypeOptions: undefined,
+      // 部门名称
+      //itemTypeName: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        colorCode: undefined,
+        colorName: undefined,
+      },
+      // 列信息
+      columns: [
+        { key: 0, label: `颜色编码`, visible: true },
+        { key: 1, label: `颜色名称`, visible: true },
+        //{ key: 6, label: `创建时间`, visible: true }
+      ]
+    };
+  },
+  created() {
+    this.getList();
+    //this.getTreeselect();
+  },
+  methods: {
+    /** 查询物料编码列表 */
+    getList() {
+      this.loading = true;
+      listColor(this.queryParams).then(response => {
+          this.colorList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.handleQuery();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.itemId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+      this.selectedRows = selection;
+    },
+    //确定选中
+    confirmSelect(){
+        if(this.ids ==[] || this.ids.length==0){
+            this.$notify({
+                title:'提示',
+                type:'warning',
+                message: '请至少选择一条数据!'
+            });
+            return;
+        }
+        this.$emit('onSelected',this.selectedRows);
+        this.showFlag = false;
+    }
+  }
+};
+</script>

src/views/mes/md/color/index.vue

+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="颜色编码" prop="colorCode">
+        <el-input
+          v-model="queryParams.colorCode"
+          placeholder="请输入颜色编码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="颜色名称" prop="colorName">
+        <el-input
+          v-model="queryParams.colorName"
+          placeholder="请输入颜色名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['md:color: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:color:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['md:color:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['md:color:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="colorList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="颜色主键id" align="center" prop="colorId" />
+      <el-table-column label="颜色编码" align="center" prop="colorCode" />
+      <el-table-column label="颜色名称" align="center" prop="colorName" />
+      <el-table-column label="操作" 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)"
+            v-hasPermi="['md:color:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['md:color:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      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="颜色编码" prop="colorCode">
+          <el-input v-model="form.colorCode" placeholder="请输入颜色编码" />
+        </el-form-item>
+        <el-form-item label="颜色名称" prop="colorName">
+          <el-input v-model="form.colorName" 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 { listColor, getColor, delColor, addColor, updateColor } from "@/api/mes/md/color";
+
+export default {
+  name: "Color",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 颜色主数据表格数据
+      colorList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        colorCode: null,        colorName: null      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询颜色主数据列表 */
+    getList() {
+      this.loading = true;
+      listColor(this.queryParams).then(response => {
+        this.colorList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        colorId: null,        colorCode: null,        colorName: null      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.colorId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加颜色主数据";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const colorId = row.colorId || this.ids
+      getColor(colorId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改颜色主数据";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.colorId != null) {
+            updateColor(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addColor(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const colorIds = row.colorId || this.ids;
+      this.$modal.confirm('是否确认删除颜色主数据编号为"' + colorIds + '"的数据项？').then(function() {
+        return delColor(colorIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('md/color/export', {
+        ...this.queryParams
+      }, `color_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

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

-<!--
-产品基本信息-->
+<!--产品基本信息-->
+<template>
+  <div class="app-container">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="产品计量单位" prop="productUnit">
+            <el-input v-model="form.productUnit" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.productUnit" placeholder="请输入产品计量单位" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="产品有效起始日期" prop="productStartDate">
+            <el-input v-model="form.productStartDate" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.productStartDate" placeholder="请输入产品有效起始日期" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="样品编号" prop="productSampleCode">
+            <el-input v-model="form.productSampleCode" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.productSampleCode" placeholder="样品编号" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="品牌名称" prop="brandName">
+            <el-input v-model="form.brandName" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.brandName" placeholder="请输入品牌名称" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="产品类型" prop="productType">
+            <el-input v-model="form.productType" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.productType" placeholder="请输入产品类型" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="尺码组id" prop="productSizeGroupId">
+            <el-input v-model="form.productSizeGroupId" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.productSizeGroupId" placeholder="请输入尺码组id" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="工厂名称" prop="factoryName">
+            <el-input v-model="form.factoryName" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.factoryName" placeholder="请输入工厂名称" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="版面" prop="productLayout">
+            <el-input v-model="form.productLayout" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.productLayout" placeholder="请输入版面" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="产品代号" prop="productNo">
+            <el-input v-model="form.productNo" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.productNo" placeholder="请输入产品代号" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="英文名称" prop="productEnglishName">
+            <el-input v-model="form.productEnglishName" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.productEnglishName" placeholder="请输入英文名称" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="客户料号" prop="customerMaterialCode">
+            <el-input v-model="form.customerMaterialCode" maxlength="64" v-if="optType == 'view'"/>
+            <el-input v-model="form.customerMaterialCode" placeholder="请输入客户料号" maxlength="64" v-else/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {getInfo} from "@/api/mes/md/baseInfo";
+
+export default {
+  name: "BaseInfo",
+  components: { },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        itemId: this.itemId,
+      },
+      // 表单参数
+      form: {
+        baseInfoId:'',
+        productUnit:'',
+        productStartDate:'',
+        productSampleCode:'',
+        brandName:'',
+        productType:'',
+        productSizeGroupId:'',
+        factoryName:'',
+        productLayout:'',
+        productNo:'',
+        productEnglishName:'',
+        customerMaterialCode:'',
+      },
+      // 表单校验
+      rules: {
+        /*quantity: [
+          { required: true, message: "物料使用比例不能为空", trigger: "blur" }
+        ]*/
+      }
+    };
+  },
+  props: {
+    optType: undefined,
+    itemId: undefined
+  },
+  created() {
+    this.getBaseInfo();
+  },
+  methods: {
+    //获取基本信息表单数据
+    async getBaseInfoData(){
+      await this.submitForm()
+      return this.form
+    },
+
+    getBaseInfo(){
+      getInfo(this.itemId).then(res=>{
+        Object.assign(this.form,res.data)
+      })
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        itemId: this.itemId,
+        productUnit:null,
+        productStartDate: null,
+        productSampleCode: null,
+        brandName: null,
+        productType: null,
+        productSizeGroupId: null,
+        factoryName: null,
+        productLayout: null,
+        productNo: null,
+        productEnglishName: null,
+        customerMaterialCode: null
+      };
+      this.resetForm("form");
+    },
+    /** 提交按钮 */
+    async submitForm() {
+      return await this.$refs["form"].validate();
+    },
+  }
+};
+</script>

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

 <!--产品正反面颜色-->
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8" v-if="optType !='view'">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['mes:md:faceColor:add']"
+        >新增</el-button>
+        <ColorSelect ref="colorSelect" @onSelected="onColorSelected" > </ColorSelect>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['mes:md:faceColor:remove']"
+        >删除</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="faceColorList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="排序号" align="center" prop="sortOrder" />
+      <el-table-column label="颜色" align="center" prop="colorName" />
+      <el-table-column label="覆盖率(单位%)" align="center" prop="coverageRate" :show-overflow-tooltip="true" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="optType !='view'">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['mes:md:faceColor:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['mes:md:faceColor:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改产品颜色关系对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="排序号" prop="sortOrder">
+          <el-input v-model="form.sortOrder"  placeholder="请输入排序号" />
+        </el-form-item>
+        <el-form-item label="颜色" prop="colorName">
+          <el-input v-model="form.colorName" readonly placeholder="请输入颜色" />
+        </el-form-item>
+        <el-form-item label="覆盖率(单位%)" prop="coverageRate">
+          <el-input v-model="form.coverageRate"  type="textarea" 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 { listFaceColor, getFaceColor, delFaceColor, addFaceColor, updateFaceColor } from "@/api/mes/md/faceColor";
+import ColorSelect  from "@/components/colorSelect/index.vue";
+//import faceColor from "@/views/mes/md/product/components/faceColor.vue";
+
+export default {
+  name: "FaceColor",
+  components: { ColorSelect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 产品BOM关系表格数据
+      faceColorList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        itemId: this.itemId,
+        colorId: null,
+        mdFaceColorId: null,
+        colorName: null,
+        face: null,
+        coverageRate: null,
+        sortOrder: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        /*quantity: [
+          { required: true, message: "物料使用比例不能为空", trigger: "blur" }
+        ]*/
+      }
+    };
+  },
+  props: {
+    optType: undefined,
+    itemId: undefined
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询产品颜色关系列表 */
+    getList() {
+      this.loading = true;
+      listFaceColor(this.queryParams).then(response => {
+        this.faceColorList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        itemId: null,
+        colorId: null,
+        mdFaceColorId: null,
+        colorName: null,
+        coverageRate: null,
+        sortOrder: null,
+        face: "front",
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.mdFaceColorId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.$refs.colorSelect.showFlag = true;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const mdFaceColorId = row.mdFaceColorId || this.ids
+      getFaceColor(mdFaceColorId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改产品颜色";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateFaceColor(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const mdFaceColorIds = row.mdFaceColorId || this.ids;
+      this.$modal.confirm('是否确认删除产品BOM关系编号为"' + mdFaceColorIds + '"的数据项？').then(function() {
+        return delFaceColor(mdFaceColorIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    //物料选择弹出框
+    onColorSelected(obj){
+      debugger;
+      this.form.itemId = this.itemId;
+      if(obj != undefined && obj != null){
+        obj.forEach(element => {
+          //this.form.itemId = element.itemId;
+          this.form.colorId = element.colorId;
+          this.form.colorName = element.colorName;
+          var retFlag = false;
+          addFaceColor(this.form).then(response => {
+            this.$modal.msgSuccess("新增成功");
+            this.getList();
+          });
+        });
+      }
+    }
+  }
+};
+</script>

src/views/mes/md/product/index.vue

@@ -60,7 +60,7 @@
               icon="el-icon-plus"
               size="mini"
               @click="handleAdd"
-              v-hasPermi="['mes:md:mditem:add']"
+              v-hasPermi="['mes:md:faceColor:add']"
             >新增</el-button>
           </el-col>
           <el-col :span="1.5">
@@ -71,7 +71,7 @@
               size="mini"
               :disabled="single"
               @click="handleUpdate"
-              v-hasPermi="['mes:md:mditem:edit']"
+              v-hasPermi="['mes:md:faceColor:edit']"
             >修改</el-button>
           </el-col>
           <el-col :span="1.5">
@@ -82,10 +82,10 @@
               size="mini"
               :disabled="multiple"
               @click="handleDelete"
-              v-hasPermi="['mes:md:mditem:remove']"
+              v-hasPermi="['mes:md:faceColor:remove']"
             >删除</el-button>
           </el-col>
-          <el-col :span="1.5">
+<!--          <el-col :span="1.5">
             <el-button
               type="info"
               plain
@@ -104,7 +104,7 @@
               @click="handleExport"
               v-hasPermi="['mes:md:mditem:export']"
             >导出</el-button>
-          </el-col>
+          </el-col>-->
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
         </el-row>
 
@@ -310,7 +310,7 @@
       </el-form>
       <el-tabs type="border-card" v-if="form.itemId != null">
         <el-tab-pane label="基本信息">
-          <BaseInfo :optType="optType" :itemId="form.itemId"></BaseInfo>
+          <BaseInfo ref="baseInfo" :optType="optType" :itemId="form.itemId"></BaseInfo>
         </el-tab-pane>
         <el-tab-pane label="产品特性">
           <SpecProperty :optType="optType" :itemId="form.itemId"></SpecProperty>
@@ -324,7 +324,7 @@
         <el-tab-pane label="客户信息">
           <Customer :optType="optType" :itemId="form.itemId"></Customer>
         </el-tab-pane>
-        <el-tab-pane label="客户信息">
+        <el-tab-pane label="产品外观">
           <Look :optType="optType" :itemId="form.itemId"></Look>
         </el-tab-pane>
         <el-tab-pane label="排版参数">
@@ -559,7 +559,6 @@ export default {
         itemName: undefined,
         specification: undefined,
         unitOfMeasrue: undefined,
-        enableFlag: undefined,
         itemOrProduct: undefined,
         enableFlag: 'Y',
         safeStockFlag: 'N',
@@ -624,10 +623,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm: function() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate(async (valid) => {
         if (valid) {
           if (this.form.itemId != undefined) {
-            updateMdItem(this.form).then(response => {
+            const data = await this.$refs['baseInfo'].getBaseInfoData()
+            data.itemId = this.form.itemId;
+            const params = {
+              ...this.form,
+              baseInfo:data
+            }
+            updateMdItem(params).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();