gubersail-platform-ui/src/views/goodsManage/detailsPage.vue

<template>
  <div>
    <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="goBack()">返回列表 </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button class="el-button--small-yh" style="margin-left: 6px;" type="primary" size="small" v-if="editBtn" @click="inEdit">编 辑 </el-button>
        <el-button class="el-button--small-yh" v-else style="margin-left: 6px;" type="primary" size="small" :disabled="editDis" @click="submit"
          >保 存
        </el-button>
        <el-button
          v-if="form.id && form.status == 0"
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="success"
          size="small"
          :disabled="editDis"
          @click="allClick('提交')"
          >提交
        </el-button>
        <el-button
          v-if="form.id && form.status == 1"
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="danger"
          size="small"
          :disabled="editBtn"
          @click="allClick('撤销')"
          >撤销
        </el-button>
        <el-button v-if="form.id" class="el-button--small-yh" style="margin-left: 6px;" size="small" @click="disabledStock"
          >{{ Number(form.upAndDownShelves) === 0 ? '启用' : '禁用' }}
        </el-button>
      </div>
    </div>
    <div style="margin-top: 50px">
      <trade-card title="基础信息">
        <avue-form :option="optionForm" v-model="form" ref="form">
          <tempalte slot="goodsTypeNameLabel">
            <el-tooltip class="item" effect="dark" content="新建分类" placement="top">
              <el-button type="text" @click.stop="allClick('新建分类')">分类</el-button>
            </el-tooltip>
          </tempalte>
          <tempalte slot="goodsTypeName">
            <dic-select
              v-model="form.goodsTypeName"
              placeholder="分类"
              label="cname"
              res="records"
              @selectChange="dicChange('goodsTypeName', $event)"
              :disabled="optionForm.disabled"
              url="/gubersail-admin/goodsType/page?current=1&size=5"
              :filterable="true"
              :remote="true"
              dataName="cname"
            ></dic-select>
          </tempalte>
          <tempalte slot="brandName">
            <dic-select
              v-model="form.brandName"
              placeholder="品牌"
              label="cname"
              res="records"
              @selectChange="dicChange('brandName', $event)"
              :disabled="optionForm.disabled"
              url="/gubersail-admin/brandDesc/list?current=1&size=5"
              :filterable="true"
              :remote="true"
              dataName="cname"
            ></dic-select>
          </tempalte>
            <tempalte slot="inventoryAmount">
                <el-input v-model="inventoryAmountSum" placeholder="库存金额" disabled/>
            </tempalte>
          <tempalte slot="storageName">
            <dic-select
              v-model="form.storageName"
              placeholder="仓库"
              label="cname"
              res="records"
              @selectChange="dicChange('storageName', $event)"
              :disabled="optionForm.disabled"
              url="/gubersail-admin/storageDesc/list?current=1&size=5"
              :filterable="true"
              :remote="true"
              dataName="cname"
            ></dic-select>
          </tempalte>
        </avue-form>
      </trade-card>
      <goods-type ref="goodsType"></goods-type>
      <trade-card title="操作记录">
        <avue-form :option="optionForm2" v-model="form" ref="form2"> </avue-form>
      </trade-card>
    </div>
  </div>
</template>

<script>
import { submit, detail, submitApprova, revokeApproval, disabledStock } from "@/api/goodsManage/index";
import dicSelect from "@/components/dicSelect/main.vue";
import goodsType from "./components/index.vue";
export default {
  name: "detailsPage",
  data() {
    return {
      editBtn: false,
      editDis: false,
      form: {
        claimAttachmentList: [],
        bladeClaimAuditList: []
      },
      optionForm: {
        menuBtn: false,
        span: 6,
        disabled: false,
        labelWidth: 100,
        column: [
          {
            label: "商品名称",
            prop: "cname",
            span: 6,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "商品编码",
            prop: "code",
            span: 6,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "分类",
            prop: "goodsTypeName",
            span: 6,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "品牌",
            prop: "brandName",
            span: 6,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "批次",
            prop: "dot",
            span: 6,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "花纹",
            prop: "brandItem",
            span: 6,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "规格型号",
            prop: "typeNo",
            span: 6,
            row: true,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "售价1",
            prop: "priceOne",
            span: 6
          },
          {
            label: "售价2",
            prop: "priceTwo",
            span: 6
          },
          {
            label: "售价3",
            prop: "priceThree",
            span: 6
          },
          {
            label: "售价4",
            prop: "priceFour",
            span: 6
          },
          {
            label: "仓库",
            prop: "storageName",
            span: 6,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "库存数量",
            prop: "balanceQuantity",
            span: 6,
              type: "number",
              min: 1,
              max: 99999,
              rules: [
                  {
                      required: true,
                      message: "",
                      trigger: "blur"
                  }
              ]
          },
          {
            label: "库存单价",
            prop: "inventoryCostPrice",
              type: "number",
              min: 0,
              max: 99999,
            span: 6
          },
          {
            label: "库存金额",
            prop: "inventoryAmount",
            span: 6,
            disabled: true
          },
          {
            label: "商品描述",
            prop: "productDescription",
            type: "textarea",
            span: 12,
            minRows: 2
          },
          {
            label: "备注",
            prop: "remark",
            type: "textarea",
            span: 12,
            minRows: 2
          }
        ]
      },
      optionForm2: {
        menuBtn: false,
        span: 6,
        disabled: false,
        labelWidth: 100,
        column: [
          {
            label: "制单人",
            prop: "createUserName",
            disabled: true
          },
          {
            label: "制单日期",
            prop: "createTime",
            disabled: true
          },
          {
            label: "修改人",
            prop: "updateUserName",
            disabled: true
          },
          {
            label: "修改日期",
            prop: "updateTime",
            disabled: true
          }
        ]
      }
    };
  },
  components: { dicSelect, goodsType },
  props: {
    detailData: Object
  },
    computed:{
        inventoryAmountSum(){
            return Number(this.form.balanceQuantity) * Number(this.form.inventoryCostPrice)
        }
    },
  created() {
    if (this.detailData && this.detailData.id) {
      this.editBtn = true;
      this.editDis = true;
      this.optionForm.disabled = true;
      this.getDetail(this.detailData.id);
    }
  },
  methods: {
    inEdit() {
      this.editBtn = false;
      if (this.form.status == 0) {
        this.editDis = false;
        this.optionForm.disabled = false;
      }
    },
    dicChange(name, row) {
      if (name == "goodsTypeName") {
        if (row) {
          this.form.goodsTypeId = row.id;
        } else {
          this.form.goodsTypeId = null;
          this.form.goodsTypeName = null;
        }
      }
      if (name == "brandName") {
        if (row) {
          this.form.brandId = row.id;
        } else {
          this.form.brandId = null;
          this.form.brandName = null;
        }
      }
      if (name == "storageName") {
        if (row) {
          this.form.storageId = row.id;
        } else {
          this.form.storageId = null;
          this.form.storageName = null;
        }
      }
    },
    allClick(name) {
      if (name == "新建分类") {
        this.$refs.goodsType.openDialog();
      }
      if (name == "提交") {
        this.$confirm("是否提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let obj = {
            ...this.form
          };
          submitApprova(obj).then(res => {
            this.$message.success("操作成功");
            this.getDetail(this.form.id);
          });
        });
      }
      if (name == "撤销") {
        this.$confirm("是否撤销?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          revokeApproval({id: this.form.id, version: this.form.version}).then(res => {
            this.$message.success("操作成功");
            this.getDetail(this.form.id);
          });
        });
      }
    },
    upDate(data) {
      this.form.claimAttachmentList = data;
    },
    disabledStock() {
      let obj = {};
      obj = {
        id: this.form.id,
        version:this.form.version,
        upAndDownShelves: this.form.upAndDownShelves == 1 ? 0 : 1
      };
      // const jsonData = JSON.stringify(obj);
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)"
      });
      disabledStock(obj)
        .then(res => {
          this.$message.success("操作成功");
          this.getDetail(this.form.id);
        })
        .finally(() => {
          loading.close();
        });
    },
    submit() {
      // @ts-ignore
      this.$refs.form.validate((valid, done) => {
        done();
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          submit(this.form)
            .then(res => {
              this.$message.success("保存成功");
              this.getDetail(res.data.data);
            })
            .finally(() => {
              loading.close();
            });
        } else {
          return false;
        }
      });
    },
    /**
     * @param {any} id
     */
    getDetail(id) {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)"
      });
      detail({ id: id })
        .then(res => {
          if (res.data.data.status > 0) {
            this.editBtn = true;
            this.editDis = true;
            this.optionForm.disabled = true;
          }
          if (!this.editBtn && res.data.data.status == 0) {
            this.editDis = false;
            this.optionForm.disabled = false;
          }
          this.form = res.data.data;
        })
        .finally(() => {
          loading.close();
        });
    },
    /**
     * @param {any} type
     */
    goBack(type) {
      this.$emit("goBack");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__error {
  display: none !important;
}

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

::v-deep .el-table .cell {
  padding: 0 2px !important;

  .el-form-item {
    margin-bottom: 0px !important;
  }
}
::v-deep .el-table--small td,
.el-table--small th {
  padding: 2px !important;
}
</style>