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="cntrVolumn" slot-scope="scope">
            <el-input
              v-input-limit="2"
              v-model="form.cntrVolumn"
              clearable
              placeholder="请输入 箱立方"
            ></el-input>
          </template>
          <template slot="cartonWeight" slot-scope="scope">
            <el-input
              v-input-limit="2"
              v-model="form.cartonWeight"
              clearable
              placeholder="请输入 箱重量"
            >
              <template slot="append">kg</template>
            </el-input>
          </template>
        </avue-form>
      </basic-container>
    </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: []
      },
      form: {},
      disabled: false,
      userDialog: false, //供应商导入窗口
      dicData: [],
      detailsSelect: {},
      option: {
        menuBtn: false,
        labelWidth: 100,
        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: "brandItem",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "品牌",
            prop: "brand",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "状态",
            prop: "status",
            span: 8,
            type: "select",
            dicData: [
              {
                label: "正常",
                value: 0
              },
              {
                label: "停用",
                value: 1
              }
            ]
          },
          {
            label: "规格",
            prop: "typeno", //specs
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "规格1",
            prop: "specsOne",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "规格2",
            prop: "specsTwo",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "级别",
            prop: "level",
            span: 8,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "产地",
            prop: "placeProduction",
            span: 8,
            rules: [
              {
                required: true,
                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: "corpId",
             span:16,
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "三包",
            prop: "threeGuarantees",
            span: 8
          },
          {
            label: "积分倍数",
            prop: "integralMultiples",
            span: 8
          },
          {
            label: "兑换积分",
            prop: "integral",
            span: 8
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            minRows: 2,
            span: 24
          }
        ]
      }
    };
  },
  //初始化查询
  created() {
    getDeptTree().then(res => {
      this.dicData = res.data.data;
    });
    this.$set(this.form, 'integralMultiples', 1)
    this.$set(this.form, 'integral', 0)
    if (this.detailData.id) {
      this.queryData(this.detailData.id)
    } else {
      this.$set(this.form, "goodsTypeId", this.$route.query.treeDeptId);
    }
  },
  methods: {
    queryData(id) {
      this.openFullScreen(false, '正在努力的加载...');
      getDetail(id).then(res => {
        this.form = res.data.data;
      }).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() {
      this.$refs["form"].validate(valid => {
        //校验明细列表
        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(',')
          }
          const params = {
            ...this.form,
            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();
    },
  }
};
</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>