kd-aiot-frontend-mes/src/views/unacceptedProduct/components/salesToProduction.vue

<template>
  <el-dialog
    :title="
      type == 1
        ? '返修返工转生产计划'
        : type == 2
        ? '返修返工转生产订单'
        : '返修返工转生产工单'
    "
    :visible.sync="dialog"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="100%"
  >
    <div class="ele-body">
      <el-card shadow="never">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="90px"
          class="formbox"
        >
          <el-row :gutter="24">
            <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
              <el-form-item label="计划类型:">
                <DictSelection
                  dictName="订单计划类型"
                  clearable
                  v-model="form.planType"
                >
                </DictSelection>
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
              <el-form-item label="工艺路线:" prop="produceRoutingName">
                <el-input
                  @click.native="openVersion"
                  placeholder="请选择工艺路线"
                  readonly
                  v-model="form.produceRoutingName"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col v-bind="styleResponsive ? { lg: 3, md: 6 } : { span: 3 }">
              <el-form-item label="使用改型:" prop="modification">
                <el-checkbox
                  v-model="form.modification"
                  :true-label="1"
                  :false-label="0"
                ></el-checkbox>
              </el-form-item>
            </el-col>

            <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
              <el-form-item label="余量系数:" prop="marginCoefficient">
                <!-- <DictSelection
                @itemChange="itemChange"
                style="width: 200px"
                dictName="余量系数"
                v-model="form.marginCoefficient"
              ></DictSelection> -->
                <el-select
                  filterable
                  allow-create
                  @change="itemChange"
                  v-model="form.marginCoefficient"
                >
                  <el-option
                    v-for="(item, index) in marginList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
              <el-form-item label="原批号:">{{ form.oldBatchNo }}</el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
              <el-form-item label="批号:" prop="batchNo">
                <el-input
                  v-model.number="form.batchNo"
                  size="small"
                  style="width: 100%"
                  placeholder="请输入批号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }"
              v-if="type == 3"
            >
              <el-form-item label="班组:" prop="teamId">
                <el-select v-model="form.teamId" @change="teamChange">
                  <el-option
                    v-for="item in teamList"
                    :value="item.id"
                    :key="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="row-intro">
            <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
              <el-form-item label="销售单数量:">{{
                form.codeNum
              }}</el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
              <el-form-item label="订单总数量:">{{
                form.contractNum
              }}</el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
              <el-form-item label="订单总重量:">{{
                form.sumOrderWeight
              }}</el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
              <el-form-item label="产品编码:">{{
                form.productCode
              }}</el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
              <el-form-item label="牌号:">{{ form.brandNo }}</el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
              <el-form-item label="型号:">{{ form.model }}</el-form-item>
            </el-col>

            <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
              <el-form-item label="库存数量:">{{
                form.stockCountBase
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-table :data="form.salesOrders" 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=""
              width="120"
              sortable
            >
            </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="contractNum">
            </el-table-column>

            <el-table-column
              label="合同重量"
              align="center"
              prop="productSumWeight"
            >
              <template slot-scope="scope">
                {{ scope.row.productSumWeight }} {{ form.weightUnit }}
              </template>
            </el-table-column>
            <el-table-column label="规格" align="center" prop="specification">
            </el-table-column>
            <el-table-column label="欠交数量" align="center" prop="lackNum">
            </el-table-column>
            <el-table-column
              label="计划生产数量"
              align="center"
              prop="productNum"
              width="140"
            >
              <template slot-scope="scope">
                <el-form-item
                  label-width="0px"
                  :prop="'salesOrders.' + scope.$index + '.productNum'"
                  :rules="{
                    required: true,
                    message: '请输入计划生产数量',
                    trigger: 'blur'
                  }"
                  class="table-item"
                >
                  <el-input
                    :disabled="isMoCount"
                    v-model.number="scope.row.productNum"
                    size="small"
                    @input="
                      tableHandleKeyUp(scope.row, scope.$index, $event, 'sum')
                    "
                    style="width: 100%"
                    placeholder="输入数量"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="要求生产数量"
              align="center"
              prop="requiredFormingNum"
              width="140"
            >
              <template slot-scope="scope">
                <el-form-item
                  label-width="0px"
                  :prop="'salesOrders.' + scope.$index + '.requiredFormingNum'"
                  :rules="{
                    required: true,
                    message: '请输入要求生产数量',
                    trigger: 'blur'
                  }"
                  class="table-item"
                >
                  <el-input
                    v-model.number="scope.row.requiredFormingNum"
                    size="small"
                    disabled
                    style="width: 100%"
                    placeholder="输入数量"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="模数"
              align="center"
              width="100"
              v-if="isMoCount"
            >
              <template slot-scope="scope">
                <div>
                  <el-input
                    disabled
                    style="width: 100%"
                    size="small"
                    v-model="scope.row.moCount"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    @input="
                      tableHandleKeyUp(
                        scope.row,
                        scope.$index,
                        $event,
                        'moCount'
                      )
                    "
                    placeholder="请输入"
                  >
                  </el-input>
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" width="100" v-if="isMoCount">
              <template slot="header">
                <span style="color: red">*</span>
                <span>块数</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  label-width="0px"
                  :prop="'salesOrders.' + scope.$index + '.blockCount'"
                  :rules="{
                    required: true,
                    message: '请输入块数',
                    trigger: 'blur'
                  }"
                  class="table-item"
                >
                  <el-input
                    size="small"
                    style="width: 100%"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    @input="
                      tableHandleKeyUp(
                        scope.row,
                        scope.$index,
                        $event,
                        'blockCount'
                      )
                    "
                    v-model="scope.row.blockCount"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="权重等级"
              align="center"
              width="120"
              v-if="isMoCount"
            >
              <template slot-scope="scope">
                <div>
                  <el-select v-model="scope.row.weight" style="width: 100%">
                    <el-option
                      v-for="item of weightList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="120"
              label="是否开槽"
              v-if="isMoCount"
            >
              <template slot-scope="scope">
                <div>
                  <el-select
                    style="width: 100%"
                    v-model="scope.row.isSlotting"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item of isSlotting"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="120"
              label="开槽类型"
              v-if="isMoCount"
            >
              <template slot-scope="scope">
                <DictSelection
                  dictName="开槽类型"
                  v-model="scope.row.slottingType"
                  v-if="scope.row.isSlotting == 1"
                >
                </DictSelection>
              </template>
            </el-table-column>
            <el-table-column
              label="按单按库"
              align="center"
              prop="orderLibraryType"
            >
              <template slot-scope="{ row }">
                {{ getDictValue('按单按库', row.orderLibraryType) }}
              </template>
            </el-table-column>
            <el-table-column label="订单类型" align="center" prop="orderType">
              <template slot-scope="{ row }">
                <DictSelection
                  dictName="订单类型"
                  clearable
                  v-model="row.orderType"
                >
                </DictSelection>
              </template>
            </el-table-column>

            <el-table-column
              label="交付日期"
              align="center"
              prop="deliveryTime"
              width="160"
            >
            </el-table-column>
            <el-table-column
              label="要求生产日期"
              align="center"
              prop="reqMoldTime"
              width="180"
            >
              <template slot-scope="scope">
                <el-form-item
                  label-width="0px"
                  :prop="'salesOrders.' + scope.$index + '.reqMoldTime'"
                  :rules="{
                    required: true,
                    message: '请选择要求生产日期',
                    trigger: 'blur'
                  }"
                  class="table-item"
                >
                  <el-date-picker
                    style="width: 100%"
                    v-model="scope.row.reqMoldTime"
                    :pickerOptions="{
                      disabledDate: (time) =>
                        time.getTime() <
                        new Date(new Date().setHours(0, 0, 0, 0)).getTime()
                    }"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                  <!-- 	<el-date-picker
						   style="width: 100%;"
						   v-model="scope.row.reqMoldTime"
						   type="datetime"
						   placeholder="选择日期"
						   value-format="yyyy-MM-dd HH:mm:ss">
						 </el-date-picker> -->
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="客户名称"
              align="center"
              prop="customerName"
            >
            </el-table-column>
            <el-table-column label="业务员" align="center" prop="salesman">
            </el-table-column>
            <el-table-column
              label="交付要求"
              align="center"
              prop="deliveryRequirements"
            >
              <template slot-scope="{ row }">
                {{ getDictValue('交付要求', row.deliveryRequirements) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="priority"
              label="优先级"
              width="100"
              align="center"
              :min="0"
              :max="10"
            >
              <template slot-scope="{ row, $index }">
                <el-input
                  v-if="$index == 0"
                  v-model="row.priority"
                  type="number"
                  size="mini"
                  @change="priorityChange(row)"
                ></el-input>
                <el-popover
                  v-if="$index == 0"
                  placement="right"
                  width="200"
                  trigger="hover"
                  content="数值越大优先级越高（0-3普通, 4-6优先, 7-10紧急）"
                >
                  <div class="sort-wrap" slot="reference">
                    <i class="el-icon-caret-top" @click="sortTop(row)"></i>
                    <i
                      class="el-icon-caret-bottom"
                      @click="sortBottom(row)"
                    ></i>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>

          <el-row :gutter="24" style="margin-top: 15px">
            <el-col
              v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }"
            >
              <el-form-item label="计划备注:">
                <el-input
                  type="textarea"
                  :rows="4"
                  v-model="form.notes"
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- <AdditionalOrder
          ref="additionalRefs"
          :productCode="form.productCode"
          :selectList="form.salesOrders"
          @choose="confirmChoose"
        ></AdditionalOrder> -->
        <ProductionVersion
          ref="versionRefs"
          @changeProduct="changeProduct"
        ></ProductionVersion>
      </el-card>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="toSubmit">提交</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import AdditionalOrder from './EquipmentDialog.vue';
import ProductionVersion from '@/components/ProductionVersion/ProductionVersion.vue';
import { transformation } from '@/api/unacceptedProduct/index';
import { debounce } from 'lodash';
import { getByCode } from '@/api/system/dictionary-data';

import dictMixins from '@/mixins/dictMixins';
import { getteampage } from '@/api/produceWord';
import dayjs from 'dayjs';
export default {
  mixins: [dictMixins],
  components: {
    ProductionVersion
  },
  data() {
    return {
      dialog: false,
      type: '',
      teamList: [],
      isMoCount: false,
      weightList: [
        { code: 1, name: 'A' },
        { code: 2, name: 'B' },
        { code: 3, name: 'C' }
      ],
      isSlotting: [
        { code: 1, name: '是' },
        { code: 2, name: '否' }
      ], //是否开槽
      form: {
        planType: '',
        produceRoutingId: '',
        stockCountBase: '',
        salesOrders: [],
        produceRoutingName: '',
        marginCoefficient: '1.0',
        oldBatchNo: '',
        batchNo: '',
        teamId:''
      },

      // 表单验证规则
      rules: {
        produceRoutingName: [
          { required: true, message: '请选择工艺路线', trigger: 'change' }
        ]
      },
      // selection: [],
      loading: false,
      marginList: []
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {
    this.requestDict('按单按库');
    this.requestDict('订单类型');
    this.requestDict('交付要求');
    this._teamPage();
    this.getByCodeFn();
  },
  methods: {
    async _teamPage() {
      const res = await getteampage({
        page: 1,
        size: -1
      });

      this.teamList = res.list
    },
    getByCodeFn() {
      getByCode('margin_code').then((res) => {
        let _arr = [];
        res.data.map((item) => {
          const key = Object.keys(item)[0];
          const value = item[key];

          _arr.push({ name: key, value: value });
        });
        console.log(_arr);
        this.marginList = _arr;
      });
    },
    open(row, type) {
      this.type = type;
      this.dialog = true;
      let contractNum = 0;
      let data = JSON.parse(JSON.stringify(row));
      data.forEach((item) => {
        item.productName = item.productNameNew||item.productName;
        item.productCode = item.productCodeNew||item.productCode;
        item.specification = item.specificationNew||item.specification;
        if (
          item.productName.includes('板材') ||
          item.productName.includes('砌块')
        ) {
          this.isMoCount = true;
          item.blockCount = item.sumNew;
          this.tableHandleKeyUp(item, '', item.blockCount, 'blockCount');
        } else {
          item.contractNum = item.sumNew||item.productNumber;
          item.lackNum = item.sumNew||item.productNumber;
          item['productNum'] = item.sumNew||item.productNumber;
          item.requiredFormingNum = item.sumNew||item.productNumber;
          contractNum += Number(item.sumNew||item.productNumber);
        }
      });
      this.form.oldBatchNo = data[0].batchNo;
      this.form.contractNum = contractNum;
      this.form.productCode = data[0].productCode;
      this.form.brandNo = data[0].brandNo;
      this.form.model = data[0].model;
      this.form.salesOrders = data;
    },

    itemChange() {
      this.form.salesOrders.map((item, index) => {
        this.$set(
          item,
          'requiredFormingNum',
          item.productNum * (this.form.marginCoefficient || 1)
        );
      });
    },
    teamChange(id) {
      this.form.teamName = this.teamList.find((item) => (item.id == id)).name;
    },
    toInt(productNum) {
      return productNum * (this.form.marginCoefficient || 1);
    },

    handleClose() {
      this.dialog = false;
      this.isMoCount = false;
      this.$refs.form = {
        planType: '',
        produceRoutingId: '',
        stockCountBase: '',
        salesOrders: [],
        produceRoutingName: '',
        marginCoefficient: '1.0',
        oldBatchNo: '',
        batchNo: ''
      };
    },

    toSubmit() {
      console.log( this.$refs.form)
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.form.salesOrders));
          data.forEach((item) => {
            item.produceRoutingId = this.form.produceRoutingId;
            item.notes = this.form.notes;
            item.planType = this.form.planType;
            item.produceRoutingName = this.form.produceRoutingName;
            item.teamName = this.form.teamName;
            item.teamId = this.form.teamId;
            item.batchNo = this.form.batchNo;
            // item.productName = item.productNameNew;
            // item.productCode = item.productCodeNew;
            // item.specification = item.specificationNew;
          });
          // console.log(data)
          // return
          const res = await transformation(data, this.type);
          if (res.code == 0) {
            this.handleClose();
            this.$emit('success');
          }
        }
      });
    },

    sortTop(row) {
      row.priority = Number(row.priority) + 1;
      this.priorityChange(row);
    },
    sortBottom(row) {
      if (row.priority <= 1) {
        return;
      }
      row.priority = Number(row.priority) - 1;
      this.priorityChange(row);
    },

    priorityChange(row) {
      if (row.priority > 10) {
        row.priority = 10; // 如果大于 10，则设置为 10
      } else if (row.priority < 0) {
        row.priority = 0; // 如果小于 0，则设置为 0
      }

      this.priorityFn(row);
    },

    priorityFn: debounce(function (row) {}, 800),

    openVersion() {
      this.$refs.versionRefs.open();
    },
    changeProduct(data) {
      this.$set(this.form, 'produceRoutingName', data.name);
      this.$set(this.form, 'produceRoutingId', data.id);
      this.$set(this.form, 'produceVersionName', data.produceVersionName);
    },
    // 表格：模数、数量(方)、块数输入框 输入事件
    tableHandleKeyUp(row, index, e, name) {
      row.requiredFormingNum = this.toInt(row.productNum);
      if (!this.isMoCount) {
        return;
      }
      // console.log(row);
      let modelArr = row.specification.split('*');
      let modelLong = modelArr[0]; // model规格长度
      let modeWide = modelArr[1]; // model规格宽度
      let modeHight = modelArr[2].substr(0, modelArr[2].indexOf('cm')); // model规格高度
      modeHight = Number(modeHight);
      if (name === 'moCount') {
        // 模数
        row.moCount = e;
        // 计算块数的公式：
        // (一模6米长度 / model规格长度) * (一模1.2米宽度 / model规格宽度) = 每一模的块数
        // 每一模的块数*模数moCount = 总块数
        if (row.productName.includes('板材')) {
          row.blockCount =
            Math.floor(600 / modelLong) *
            Math.floor(120 / modeHight) *
            Math.floor(60 / modeWide) *
            row.moCount;
        } else if (row.productName.includes('砌块')) {
          let modelLongFixed = (600 / modelLong).toFixed(2);
          modelLongFixed = modelLongFixed.substring(
            0,
            modelLongFixed.length - 1
          );
          let modeWideFixed = (120 / modeWide).toFixed(2);
          modeWideFixed = modeWideFixed.substring(0, modeWideFixed.length - 1);
          let modeHightFixed = (60 / modeHight).toFixed(2);
          modeHightFixed = modeHightFixed.substring(
            0,
            modeHightFixed.length - 1
          );
          row.blockCount =
            Math.floor(modelLongFixed * modeWideFixed * modeHightFixed) *
            row.moCount;
        }

        row.productNum =
          ((modelLong * modeWide * modeHight) / 1000000).toFixed(5) *
          row.blockCount;
      } else if (name === 'sum') {
        //方数
        row.productNum = e;

        row.blockCount = Math.floor(
          e / ((modelLong * modeWide * modeHight) / 1000000)
        );
        // console.log(e,'row.blockCount')
        // console.log(modelLong,'row.blockCount')
        // console.log(modeWide,'row.blockCount')
        // console.log(modeHight,'row.blockCount')

        if (row.productName.includes('板材')) {
          row.moCount = Math.ceil(
            row.blockCount /
              (Math.floor(600 / modelLong) *
                Math.floor(120 / modeHight) *
                Math.floor(60 / modeWide))
          );
        } else if (row.productName.includes('砌块')) {
          row.moCount = Math.ceil(
            row.blockCount /
              Math.floor(
                (600 / modelLong) * (120 / modeHight) * (60 / modeWide)
              )
          );
        }
      } else if (name === 'blockCount') {
        //块数
        row.blockCount = e;

        if (row.productName.includes('板材')) {
          row.moCount = Math.ceil(
            row.blockCount /
              (Math.floor(600 / modelLong) *
                Math.floor(120 / modeHight) *
                Math.floor(60 / modeWide))
          );
        } else if (row.productName.includes('砌块')) {
          row.moCount = Math.ceil(
            row.blockCount /
              Math.floor(
                (600 / modelLong) * (120 / modeHight) * (60 / modeWide)
              )
          );
        }

        row.productNum = (
          (Number(e) * modelLong * modeWide * modeHight) /
          1000000
        ).toFixed(5);
      }
      row.requiredFormingNum = this.toInt(row.productNum);
    }
    // confirmChoose(list) {
    //   // 取出在弹窗中选中并且不在表格中的数据
    //   const result = list.filter(
    //     (i) => this.form.salesOrders.findIndex((p) => p.id === i.id) === -1
    //   );
    //   // 取出在表格中并且不在弹窗中选中的数据 即取消选中的数据
    //   const del = this.form.salesOrders.filter(
    //     (i) => list.findIndex((p) => p.id === i.id) === -1
    //   );
    //   for (let i = this.form.salesOrders.length - 1; i >= 0; i--) {
    //     for (let j in del) {
    //       if (this.form.salesOrders[i].id === del[j].id) {
    //         this.form.salesOrders.splice(i, 1);
    //       }
    //     }
    //   }
    //   let priority =
    //     this.form.salesOrders[this.form.salesOrders.length - 1]?.priority || 0;
    //   this.form.salesOrders = this.form.salesOrders.concat(
    //     result.map((item, index) => {
    //       item.priority = ++priority;

    //       item.productNum = item.lackNum;
    //       item.requiredFormingNum = item.lackNum;
    //       item.reqMoldTime = dayjs(
    //         new Date(item.deliveryTime).getTime() - 3600 * 1000 * 24 * 10
    //       ).format('YYYY-MM-DD');
    //       return item;
    //     })
    //   );
    //   this.changeData();
    // },
    // changeData() {
    //   var productNum = 0;
    //   var productWeight = 0;

    //   this.form.salesOrders.map((item, index) => {
    //     item.priority = index + 1;
    //     productNum = productNum + item.requiredFormingNum;
    //     productWeight = productWeight + Number(item.productSumWeight);
    //   });
    //   this.$set(this.form, 'codeNum', this.form.salesOrders.length);
    //   this.$set(this.form, 'contractNum', productNum);
    //   this.$set(this.form, 'sumOrderWeight', productWeight.toFixed(2));
    // },
  }
};
</script>
<style lang="scss" scoped>
.ele-body {
  background: #fff;
}
.btns {
  text-align: center;
  padding: 10px 0;
}
.body-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-left {
  font-size: 20px;
  color: #333;
}

.formbox {
  margin: 20px auto;
}

.row-intro {
  border-bottom: 1px dashed #ccc;
  margin-bottom: 20px;
}

.sort-wrap {
  i {
    font-size: 30px;
    cursor: pointer;
  }

  .el-icon-caret-top {
    color: red;
  }

  .el-icon-caret-bottom {
    color: #157a2c;
  }
}

.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}

.table-item {
  margin-bottom: 0;
}
</style>