kd-aiot-frontend-aps/src/views/saleOrder/components/create-order.vue

<template>
  <ele-modal :visible.sync="visible" :title="title" width="80vw" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="销售订单号:">
            <el-input clearable :maxlength="20" v-model="form.code" disabled />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="交付要求:">
            <DictSelection
              dictName="紧急程度"
              clearable
              v-model="form.deliveryRequirements"
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="订单类型:">
            <el-select v-model="form.orderType" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="按单按库:">
            <DictSelection
              dictName="按单按库"
              clearable
              v-model="form.orderLibraryType"
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
          <el-form-item label="客户名称:">
            <el-input clearable v-model="form.customerName" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="业务员:">
            <el-input clearable v-model="form.salesman" />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="交付日期:" prop="deliveryTime">
            <el-date-picker
              style="width: 100%"
              v-model="form.deliveryTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
          <el-form-item label="备注:">
            <el-input clearable v-model="form.notes" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="form.productInfoList" border>
        <el-table-column label="序号" align="center" width="60">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行号" align="center" prop="lineNumber">
        </el-table-column>
        <el-table-column label="产品名称" align="center" prop="productName">
        </el-table-column>
        <el-table-column label="产品编号" align="center" prop="productCode">
        </el-table-column>
        <el-table-column label="牌号" align="center" prop="brandNo">
        </el-table-column>
        <el-table-column label="型号" align="center" prop="model">
        </el-table-column>
        <el-table-column label="单重" align="center" prop="productUnitWeight">
        </el-table-column>
        <el-table-column label="交付数量" align="center" prop="contractNum">
          <template slot-scope="scope">
            <el-form-item
              label-width="0px"
              :prop="'productInfoList.' + scope.$index + '.contractNum'"
              :rules="{
                required: true,
                message: '请输入交付数量',
                trigger: 'blur'
              }"
            >
              <el-input
                v-model.number="scope.row.contractNum"
                size="small"
                oninput="value=value.replace(/[^\d]/g,'')"
                style="width: 100%"
                placeholder="输入数量"
                @input="inputNumber(scope.row, scope.$index)"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="交付重量" align="center" prop="productWeight">
          <template slot-scope="{ row }">
            <span>{{ row.productWeight ? row.productWeight : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="70">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDeleteItem(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="add-product" @click="addEquipment">
        <i class="el-icon-circle-plus-outline"></i>
      </div>
    </el-form>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">
        确定
      </el-button>
    </template>

    <!-- 选择产品 -->
    <EquipmentDialog
      ref="equipmentRefs"
      @choose="confirmChoose"
      :selectList="form.productInfoList"
    >
    </EquipmentDialog>
  </ele-modal>
</template>

<script>
  import { getCode } from '@/api/codeManagement';
  import EquipmentDialog from '../components/EquipmentDialog.vue';
  import { createOrUpdate, getOrderDetail } from '@/api/saleOrder';
  export default {
    components: {
      EquipmentDialog
    },
    data () {
      return {
        visible: false,
        loading: false,
        form: {
          productInfoList: []
        },
        // 表单验证规则
        rules: {
          deliveryTime: [
            { required: true, message: '请选择交付日期', trigger: 'change' }
          ]
        },
        typeList: [
          { id: 1, label: '内销订单' },
          { id: 2, label: '外销订单' },
          { id: 3, label: '预制订单' }
        ],
        title: '创建订单'
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive () {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created () {},
    methods: {
      open (row) {
        this.visible = true;
        if (row) {
          this.title = '修改订单';
          this.getDetail(row.code);
        } else {
          this.title = '创建订单';
          this.getSaleCode();
        }
      },
      getDetail (code) {
        getOrderDetail(code).then((res) => {
          console.log('返回', res);
          this.form = res;
        });
      },
      cancel () {
        this.form = {
          productInfoList: []
        };
        this.$refs.form.clearValidate();
        this.visible = false;
      },
      // 删除产品
      handleDeleteItem (index) {
        this.form.productInfoList.splice(index, 1);
        this.changeLineNumber();
      },
      addEquipment () {
        this.$refs.equipmentRefs.open();
      },
      /* 保存编辑 */
      save () {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          if (!this.form.productInfoList.length) {
            return this.$message.warning('产品列表不能为空！');
          }
          this.loading = true;
          createOrUpdate(this.form)
            .then((res) => {
              this.loading = false;
              this.$message.success('成功');
              this.cancel();
              this.$emit('refresh');
            })
            .catch((e) => {
              this.loading = false;
            });
        });
      },

      async getSaleCode () {
        const res = await getCode('sale_order');
        if (res) {
          this.$set(this.form, 'code', res);
        }
      },
      // 确定选择
      confirmChoose (list) {
        list = list.map((item, index) => {
          return {
            productCode: item.code,
            productName: item.name,
            productUnitWeight: item.netWeight,
            model: item.modelType,
            brandNo: item.brandNum
          };
        });
        // 取出在弹窗中选中并且不在表格中的数据
        const result = list.filter(
          (i) =>
            this.form.productInfoList.findIndex(
              (p) => p.productCode === i.productCode
            ) === -1
        );
        // 取出在表格中并且不在弹窗中选中的数据 即取消选中的数据
        const del = this.form.productInfoList.filter(
          (i) => list.findIndex((p) => p.productCode === i.productCode) === -1
        );
        for (let i = this.form.productInfoList.length - 1; i >= 0; i--) {
          for (let j in del) {
            if (
              this.form.productInfoList[i].productCode === del[j].productCode
            ) {
              this.form.productInfoList.splice(i, 1);
            }
          }
        }
        this.form.productInfoList = this.form.productInfoList.concat(result);
        this.changeLineNumber();
      },

      changeLineNumber () {
        this.form.productInfoList.map((item, index) => {
          item.lineNumber = 10 * (index + 1);
        });
      },

      inputNumber (row, index) {
        const pos = this.form.productInfoList;
        if (pos[index].productUnitWeight) {
          this.$set(
            pos[index],
            'productWeight',
            row.contractNum * row.productUnitWeight
          );
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .basic-details-title {
    margin: 10px 0;
  }
  .add-product {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 30px;
    color: #1890ff;
    margin: 10px 0;
    cursor: pointer;
  }
</style>