tire-platform-ui/src/views/basicData/productInformation/detailsPageEdit.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <el-button
            type="danger"
            style="border: none;background: none;color: red"
            icon="el-icon-arrow-left"
            @click="backToList"
        >返回列表
        </el-button>
      </div>
      <el-button
          class="el-button--small-yh add-customer-btn"
          type="primary"
          :disabled="disabled"
          @click="editProductInfo"
          size="small"
      >{{ form.id ? "确认修改" : "确认新增" }}
      </el-button>
    </div>
    <div style="margin-top: 60px">
      <containerTitle title="基础信息"></containerTitle>
      <basic-container style="margin-bottom: 10px">
        <avue-form ref="form" v-model="form" :option="option">
          <template slot="goodsTypeId" slot-scope="scope">
            <avue-input-tree
                v-model="form.goodsTypeId"
                :props="{ label: 'title', value: 'id' }"
                multiple
                placeholder=" "
                type="tree"
                :dic="dicData"
            />
          </template>
          <template slot="corpId" slot-scope="scope">
            <selectComponent
                v-model="form.corpId"
                :configuration="configuration"
                style="width: 100%"
                typeData="GYS"
            />
          </template>
          <template slot="artsVision">
            <crop-select
                v-model="form.artsVision"
                @getCorpData="getCorpName"
                @getCorpList="getCorpList"
                corpType="GS"
                :multiple="true"
                :collapseTags="true"
            ></crop-select>
          </template>
          <template slot="brand">
            <el-select
                v-model="form.brand"
                clearable
                filterable
                placeholder="请选择 品牌"
            >
              <el-option
                  v-for="(item, index) in brandOption"
                  :key="index"
                  :label="item.dictValue"
                  :value="item.dictValue"
              />
            </el-select>
          </template>
          <template slot="cntrVolumn">
            <el-input
                v-input-limit="2"
                v-model="form.cntrVolumn"
                clearable
                placeholder="请输入 箱立方"
            ></el-input>
          </template>
          <template slot="cartonWeight">
            <el-input
                v-input-limit="2"
                v-model="form.cartonWeight"
                clearable
                placeholder="请输入 箱重量"
            >
              <template slot="append">kg</template>
            </el-input>
          </template>
          <template slot="integralMultiples">
            <el-input
                v-input-limit="2"
                v-model="form.integralMultiples"
                clearable
                placeholder="请输入 积分倍数"
            ></el-input>
          </template>
          <template slot="integral">
            <el-input
                v-input-limit="2"
                v-model="form.integral"
                clearable
                placeholder="请输入 兑换积分"
            ></el-input>
          </template>
          <template slot="batch">
            <el-switch
                v-model="form.batch"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
            />
          </template>
          <template slot="unit">
            <el-select
                v-model="form.unit"
                clearable
                filterable
                placeholder="请选择 计量单位"
            >
              <el-option
                  v-for="(item, index) in unitOption"
                  :key="index"
                  :label="item.dictValue"
                  :value="item.dictValue"
              />
            </el-select>
          </template>
        </avue-form>
      </basic-container>
      <containerTitle title="主图附件"></containerTitle>
      <c-upload
          :data="bankOfDepositData"
          display
          deleteUrl="/api/blade-client/goodsfiles/delete"
          :enumerationValue="160"/>
    </div>
  </div>
</template>
<script>
import {
  getDetail,
  updateDetail,
  getDeptTree,
  priceDelete
} from "@/api/basicData/commodityType";

export default {
  props: {
    detailData: Object
  },
  name: "detailsPage",
  data() {
    return {
      configuration: {
        multipleChoices: false,
        multiple: false,
        collapseTags: false,
        placeholder: "请点击右边按钮选择",
        dicData: []
      },
      optionTwo:[],
      form: {},
      bankOfDepositData:[],
      disabled: false,
      userDialog: false, //供应商导入窗口
      dicData: [],
      detailsSelect: {},
      option: {
        menuBtn: false,
        labelWidth: 110,
        column: [
          {
            label: "产品编码",
            prop: "code",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "产品名称",
            prop: "cname",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ],
            slot: true
          },
          {
            label: "产品分类",
            prop: "goodsTypeId",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "规格",
            prop: "typeno", //specs
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "规格1(花纹)",
            prop: "brandItem",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "规格2(尺寸)",
            prop: "size",
            span: 8
          },
          {
            label: "供应商",
            prop: "corpId",
            span: 16,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "change"
              }
            ]
          },
          {
            label: "品牌",
            prop: "brand",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "change"
              }
            ]
          },
          {
            label: "所属公司",
            prop: "artsVision",
            span: 16,
            rules: [
              {
                required: false,
                message: " ",
                trigger: "change"
              }
            ]
          },
          {
            label: "产地",
            prop: "placeProduction",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "级别(负荷指数)",
            prop: "specsOne",
            span: 8,
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "级别2(速级)",
            prop: "specsTwo",
            span: 8,
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "级别3(加强型)",
            prop: "level",
            span: 8,
            rules: [
              {
                required: false,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "箱立方",
            prop: "cntrVolumn",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "箱重量",
            prop: "cartonWeight",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "计量单位",
            prop: "unit",
            span: 8
          },
          {
            label: "辅助单位",
            prop: "assistUnit",
            span: 8
          },
          {
            label: "状态",
            prop: "status",
            span: 8,
            type: "select",
            dicData: [
              {
                label: "正常",
                value: 0
              },
              {
                label: "停用",
                value: 1
              }
            ]
          },
          {
            label: "积分倍数",
            prop: "integralMultiples",
            span: 8
          },
          {
            label: "兑换积分",
            prop: "integral",
            span: 8
          },
          {
            label: "按批次号计算",
            prop: "batch",
            span: 8
          },
          {
            label: "品名快捷查询",
            prop: "cnameInt",
            span: 8
          },
          {
            label: "平台商品编码",
            prop: "terraceCode",
            span: 8
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            minRows: 2,
            span: 24
          }
        ]
      },
      unitOption: [], //计量单位数组
      brandOption: [], // 品牌数组
    };
  },
  //初始化查询
  created() {
    this.getWorkDicts('unit').then(res => {
      this.unitOption = res.data.data;
    })
    this.getWorkDicts('brand').then(res => {
      this.brandOption = res.data.data;
    })
    this.$set(this.form, 'status', 0)
    getDeptTree().then(res => {
      this.dicData = res.data.data;
    });
    this.$set(this.form, 'integralMultiples', 1)
    this.$set(this.form, 'integral', 0)
    this.$set(this.form, 'batch', 0)
    if (this.detailData.id) {
      this.queryData(this.detailData.id)
    } else {
      this.$set(this.form, "goodsTypeId", this.detailData.goodsTypeId);
    }
  },
  methods: {
    queryData(id) {
      this.openFullScreen(false, '正在努力的加载...');
      getDetail(id).then(res => {
        this.form = res.data.data;
        this.bankOfDepositData = res.data.data.filesList
        delete this.form.filesList
        this.form.artsVision = this.form.artsVision ? this.form.artsVision.split(',') : null;
      }).finally(() => {
        this.openFullScreen(true);
      });
    },
    addSftRow() {
      this.sftData.push({
        $cellEdit: true,
        cname: null,
        texture: null,
        colour: null,
        describe: null,
        remarks: null
      });
    },
    rowContactCell(row, index) {
      this.$refs.crudContact.rowCell(row, index);
    },
    rowPurchaseCell(row, index) {
      this.$refs.crudPurchase.rowCell(row, index);
    },
    //修改提交触发
    editProductInfo() {
      let list = []
      if(this.bankOfDepositData.length>0){
        for (let item of this.bankOfDepositData){
          if (item.version == 0){
            list.push(item.version)
          }
        }
      }else {
        return this.$message.error("请上传附件!");
      }
      if (!(list.indexOf('0') !== -1)){
        return this.$message.error("附件无主图，请选择其中一个文件属性为主图!");
      }
      if (new Set(list).size !== list.length){
        return this.$message.error("主图重复");
      }
      this.$refs["form"].validate((valid, done) => {
        done();
        //校验明细列表
        if (valid) {
          this.configuration.dicData.forEach(e => {
            if (e.id == this.form.corpId) {
              this.form.corpName = e.cname;
            }
          });
          if (typeof this.form.goodsTypeId !== 'string') {
            this.form.goodsTypeId = this.form.goodsTypeId.join(',')
          }
          if (!this.form.artsVision) this.$set(this.form, 'artsVisionName', null);
          if (this.form.artsVision) {
            this.form.artsVision = this.form.artsVision.join(',')
          }
          const params = {
            ...this.form,
            filesList:this.bankOfDepositData,
            type: 0
          };
          this.openFullScreen(false, '正在努力的加载...');
          updateDetail(params).then(res => {
            if (res.data.success) {
              this.$message.success("操作成功！");
            }
            this.form = res.data.data
            this.queryData(res.data.data.id)
          }).catch(() => {
            this.openFullScreen(true);
          });
        } else {
          return false;
        }
      });
    },
    //返回列表
    backToList() {
      this.$emit("goBack");
    },
    //遮罩层
    openFullScreen(res, text) {
      const loading = this.$loading({
        lock: true,
        text: text,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (res === true) loading.close();
    },
    getCorpName(row) {
      this.$set(this.form, 'artsVisionName', row.cname);
    },
    getCorpList(list) {
      let arr = []
      list.forEach(item => {
        arr.push(item.cname)
      })
      this.$nextTick(() => {
        this.$set(this.form, 'artsVisionName', arr.join(','));
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.back-icon {
  line-height: 64px;
  font-size: 20px;
  margin-right: 8px;
}

::v-deep .el-form-item {
  margin-bottom: 8px;
}

.el-dialogDeep {
  ::v-deep .el-dialog {
    margin: 1vh auto 0 !important;
    padding-bottom: 10px !important;

    .el-dialog__body,
    .el-dialog__footer {
      padding-bottom: 0 !important;
      padding-top: 0 !important;
    }
  }
}
</style>