Smart_platform_ui/src/views/maintenance/priceLibrary/detailsPage.vue

<template>
  <div class="borderless" v-loading="pageLoading">
    <div class="customer-head">
      <div class="customer-back">
        <!--        <i class="back-icon el-icon-arrow-left"></i><i style="font-style:normal">返回管理列表</i>-->
        <el-button
          type="danger"
          style="border: none;background: none;color: red"
          icon="el-icon-arrow-left"
          @click="backToList"
          >返回列表
        </el-button>
      </div>
      <div class="add-customer-btn" v-if="showBut">
        <el-button
          type="primary"
          :disabled="disabled"
          @click="editCustomer"
          :loading="subLoading"
          v-if="detailData.status != 1"
          >{{ form.id ? "确认修改" : "确认新增" }}
        </el-button>
      </div>
    </div>
    <div style="margin-top: 60px;margin-bottom:35px">
      <containerTitle title="基础信息"></containerTitle>
      <basic-container style="margin-bottom: 10px">
        <avue-form ref="form" v-model="form" :option="option">
          <template slot="corpId">
            <select-component
              v-model="form.corpId"
              :configuration="configuration"
              :disabled="detailData.status == 1"
            ></select-component>
          </template>
          <template slot="cname">
            <goods-select
              v-model="form.cname"
              :configuration="goodsConfiguration"
              @getRow="getGoodsRow"
              @returnRow="returnRow"
              :disabled="detailData.status == 1"
            />
          </template>
        </avue-form>
      </basic-container>
    </div>
  </div>
</template>

<script>
import { detail, submit } from "@/api/maintenance/priceLibrary";
import { contrastObj } from "@/util/contrastData";
import _ from "lodash";
export default {
  name: "detailsPageEdit",
  data() {
    return {
      goodsConfiguration: {
        multipleChoices: false,
        multiple: false,
        collapseTags: false,
        placeholder: "请点击右边按钮选择",
        dicData: [],
        clearable: true
      },
      configuration: {
        multipleChoices: false,
        multiple: false,
        collapseTags: false,
        placeholder: "请点击右边按钮选择",
        dicData: []
      },
      form: {},
      option: {
        menuBtn: false,
        labelWidth: 100,
        column: [
          {
            label: "商品名称",
            prop: "cname",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            span: 8
          },
          {
            label: "规格",
            prop: "specs",
            disabled: true,
            span: 8
          },
          {
            label: "产品属性",
            prop: "goodNature",
            span: 8
          },
          {
            label: "供应商",
            prop: "corpId",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            span: 8
          },
          {
            label: "币别",
            prop: "currency",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
            props: {
              label: "dictValue",
              value: "dictValue"
            },
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            span: 8
          },
          {
            label: "FOB系数",
            prop: "coefficient",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            span: 8
          },
          {
            label: "价格类型",
            prop: "billType",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=billType",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            span: 8
          },

          {
            label: "最新价格",
            prop: "price",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            span: 8,
            row: true
          },
          {
            label: "有效期开始",
            prop: "startTime",
            type: "datetime",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            span: 8
          },
          {
            label: "有效期结束",
            prop: "endTime",
            type: "datetime",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ],
            span: 8
          },
          {
            label: "业务员",
            prop: "person",
            span: 8,
            row: true
          },
          {
            label: "历史价格1",
            prop: "priceOne",
            span: 8,
            disabled: true
          },
          {
            label: "历史日期1",
            prop: "priceOneTime",
            type: "datetime",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            span: 8,
            disabled: true
          },
          {
            label: "历史价格2",
            prop: "priceTwo",
            span: 8,
            disabled: true
          },
          {
            label: "历史日期2",
            prop: "priceTwoTime",
            type: "datetime",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            span: 8,
            disabled: true
          },
          {
            label: "历史价格3",
            prop: "priceThree",
            span: 8,
            disabled: true
          },
          {
            label: "历史日期3",
            prop: "priceThreeTime",
            type: "datetime",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            span: 8,
            disabled: true
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            minRows: 2,
            span: 24
          }
        ]
      },
      oldform: {},
      loading: false,
      subLoading: false,
      pageLoading: false,
      showBut: true
    };
  },
  props: {
    detailData: {
      type: Object
    }
  },
  created() {
    if (this.detailData.id) {
      this.getDetail(this.detailData.id);
    }
    if (this.detailData.status == 1) {
      this.option.disabled = true;
    }
  },
  filters: {},
  methods: {
    getDetail(id) {
      this.loading = true;
      this.showBut = false;
      this.pageLoading = true;
      detail(id)
        .then(res => {
          this.form = res.data.data;
          this.oldform = res.data.data;
        })
        .finally(() => {
          this.loading = false;
          this.showBut = true;
          this.pageLoading = false;
        });
    },
    //修改提交触发
    editCustomer(status) {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          this.subLoading = true;
          this.form.tradeType="CK"
          this.configuration.dicData.forEach(e=>{
            if(this.form.corpId==e.id){
              this.form.corpName=e.cname
            }
          })
          submit({
            ...this.form
          })
            .then(res => {
              if (res.data.code == 200) {
                this.$message.success(this.form.id ? "修改成功" : "提交成功");
                this.form = res.data.data;
                this.oldform = res.data.data;
                if (status == "goBack") {
                  this.$emit("goBack");
                }
              }
            })
            .finally(() => {
              this.subLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    //返回列表
    backToList() {
      if (contrastObj(this.form, this.oldform)) {
        this.$confirm("数据发生变化未有提交记录, 是否提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.editCustomer("goBack");
          })
          .catch(() => {
            this.$emit("goBack");
          });
      } else {
        this.$emit("goBack");
      }
    },
    openReport() {
      this.switchDialog = !this.switchDialog;
    },
    onClose(val) {
      this.switchDialog = val;
    },
    getGoodsRow(row) {
      this.form.itemId = row.id;
      this.form.code = row.code;
      this.form.specs = row.specs;
    },
    returnRow(rows) {
      this.form.itemId = rows[0].id;
      this.form.code = rows[0].code;
      this.form.specs = rows[0].specs;
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-head {
  position: fixed;
  top: 105px;
  width: 100%;
  margin-left: -10px;
  height: 62px;
  background: #ffffff;
  box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
  z-index: 999;
}

.customer-back {
  cursor: pointer;
  line-height: 62px;
  font-size: 16px;
  color: #323233;
  font-weight: 400;
}

.back-icon {
  line-height: 64px;
  font-size: 20px;
  margin-right: 8px;
}
.sell-customer-btn {
  position: fixed;
  right: 244px;
  top: 115px;
}
.copy-customer-btn {
  position: fixed;
  right: 140px;
  top: 115px;
}

.add-customer-btn {
  position: fixed;
  right: 36px;
  top: 115px;
}
::v-deep .el-form-item {
  margin-bottom: 8px;
}
::v-deep .el-form-item__error {
  display: none;
}
::v-deep .select-component {
  display: flex;
}
</style>