refinery-customer-admin/src/views/product/components/create.vue

<template>
  <el-drawer
    :title="controlWindows.addInfo.title"
    direction="ltr"
    size="40%"
    :visible.sync="controlWindows.create"
    @opened="openDrawer"
    :before-close="closeWindow"
  >
    <div class="create" v-if="controlWindows.create">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="客户名称" prop="customerId">
          <el-select
            v-model="form.customerId"
            reserve-keyword
            remote
            :remote-method="customData"
            filterable
            placeholder="请选择客户"
          >
            <el-option
              v-for="(item, index) in customList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="炼厂名称" prop="refineryId">
          <!-- <el-autocomplete
            label
            v-model="form.refineryId"
            :fetch-suggestions="querySearchAsync"
            value-key="refineryName"
            value="id"
            placeholder="炼厂名称"
          ></el-autocomplete> -->

          <autocomplete :params="form" :config="configAutocomplete" />
        </el-form-item>
        <el-form-item label="产品类型" prop="productType">
          <el-select
            v-model="form.productType"
            @change="productChange"
            placeholder="请选择产品类型"
          >
            <el-option
              v-for="(item, index) in productTypeList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="productId">
          <el-select
            :disabled="rowCreate"
            v-model="form.productId"
            @change="productDataList"
            placeholder="请选择产品类型"
          >
            <el-option
              v-for="(item, index) in productNameList"
              :key="index"
              :label="item.productName"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- <el-input
            maxlength="50"
            v-model="form.productName"
            placeholder="请输入产品名称"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="销售价">
          <el-input
            maxlength="50"
            v-model="form.salePrice"
            placeholder="请输入销售价"
            disabled
          ></el-input>
          元/吨
        </el-form-item>
        <el-form-item label="预约提货量">
          <el-input
            maxlength="50"
            v-model="form.preQuantity"
            placeholder="请输入预约提货量"
          ></el-input>
          吨
        </el-form-item>
        <el-form-item label="订单金额">
          <el-input maxlength="50" v-model="form.preAmount" disabled></el-input>
          元
        </el-form-item>
      </el-form>
    </div>
    <div class="buttons">
      <el-button @click="controlWindows.create = false">取消 </el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
import serve from "api/product.js";
import refineryInfoServe from "api/refineryInfo.js";

import autocomplete from "components/autocomplete/index.vue";
export default {
  components: {
    autocomplete,
  },
  props: {
    controlWindows: Object,
    // refineryTypeEnum: Array,
  },
  watch: {
    "form.salePrice": {
      handler(n, o) {
        if (n) {
          this.form.preAmount = (
            this.form.salePrice *
            (this.form.preQuantity ? this.form.preQuantity : 0)
          ).toFixed(2);
        }
      },
    },
    "form.preQuantity": {
      handler(n, o) {
        if (n) {
          this.form.preAmount = (
            this.form.preQuantity *
            (this.form.salePrice ? this.form.salePrice : 0)
          ).toFixed(2);
        }
      },
    },
  },
  data() {
    let validatorRefineryId = (rule, value, callback) => {
      if (this.form.refineryId) callback();
      else callback("请选择炼厂");
    };
    return {
      rowCreate: false,
      customList: [],
      form: {
        preAmount: 0,
      },
      productNameList: [],
      refineryList: [],
      productRowData: {},
      configAutocomplete: {
        serveTarget: serve.findByEntity,
        autocompleteKey: {
          key: "refineryName",
        },
        labelKey: "refineryName",
        valueKey: "id",
        placeholder: "炼厂名称",
        querykey: "refineryId",
        echoId: "",
        echoName: "",
      },
      productTypeList: ["0#柴", "-10#柴", "92#汽", "95#汽"],
      rules: {
        customerId: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        productId: [
          { required: true, message: "请输入产品名称", trigger: "change" },
        ],
        refineryId: [
          { required: true, validator: validatorRefineryId, trigger: "change" },
        ],
        enableMark: [
          { required: true, message: "请选择启用状态", trigger: "change" },
        ],
        productType: [
          { required: true, message: "请选择产品类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    productDataList(e) {
      this.productRowData = this.productNameList.filter((item) => item.id == e);
      this.form.salePrice = this.productRowData[0].salePrice2company;
      this.form.floorPrice = this.productRowData[0].floorPrice;
      this.form.productMeasurement = this.productRowData[0].measurement;
    },
    productChange() {
      this.productData();
    },
    //搜索炼厂
    refineryData(value) {
      if (value) {
        serve.findByEntity({ refineryName: value }).then((res) => {
          this.refineryList = res.data;
        });
        this.productData();
      }
    },
    //搜索产品
    productData() {
      let data = {
        refineryId: this.form.refineryId,
        productType: this.form.productType,
        enableMark: "ENABLE",
      };
      serve.getRefineryProductList(data).then((res) => {
        if (res.data.length > 0) {
          this.productNameList = res.data;
        } else {
          this.productNameList = [];
          this.form.productId = "";
        }
      });
      console.log(this.productRowData, "aaaaaaaaaa");
    },
    //搜索客户
    customData(value) {
      if (value) {
        serve.getRefineryCompanyList({ name: value }).then((res) => {
          this.customList = res.data;
          this.form.customerId = this.$store.state.user.companyId;
          console.log(this.form.customerId, "ssssaaaaaaaaaaaaaaa");
        });
      }
    },
    openDrawer() {
      this.form = {};
      let { id } = this.controlWindows.addInfo;
      if (id) {
        //回显
        this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo));
        this.configAutocomplete.echoId = id;
        this.configAutocomplete.echoName = this.form.refineryName;
        this.form.salePrice = this.form.salePrice2company;
        this.form.productId = this.form.id;
        delete this.form.id;
        this.rowCreate = true;
        this.productChange();
        this.customData(this.$store.state.user.userCompanyName);

        console.log("this.form", this.$store.state.user, this.form);
      } else {
        this.rowCreate = false;
      }
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.judgeInterface(this.form).then((res) => {
            if (res.code === 20000) {
              this.$message.success(res.msg);
              this.closeWindow();
            }
          });
        }
      });
    },
    judgeInterface(form) {
      // let { id } = this.controlWindows.addInfo;
      // if (id) return serve.update(form);
      // else
      return serve.orderSave(form);
    },
    closeWindow() {
      this.$emit("closeWindow");
      this.form = {};
      this.controlWindows.addInfo = {};
      this.$refs.form.clearValidate();
      this.controlWindows.create = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  padding: 20px;
  .el-input,
  .el-select,
  .el-textarea,
  .el-autocomplete {
    width: 300px;
  }
}
.buttons {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-right: 40px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: right;
  border-top: 1px solid #f2f3f5;
  .el-button {
    text-align: right;
    font-size: 14px;
    border-radius: 5px;
  }
}
</style>