logistics-fe-iems-winlink/src/views/merger/mergerapply/modules/MaterialMasterModalForm.vue

<template>
  <a-spin :spinning="confirmLoading" class="material-master-modal-form">
    <w-col class="col-left">
      <div class="table-operator">
        <w-button @click="submitForm" v-has="'MaterialMaster:save'" type="primary"> 保存 </w-button>
        <w-button @click="handleCollect" :disabled="collectDisable" v-has="'MaterialMasterDetails:collect'" type="primary"> 要素采集 </w-button>
        <w-button
          @click="elementComplete()"
          v-has="'MaterialMaster:elemComplete'"
          type="primary"
          :disabled="model.status !== '010'"
        >
          要素采集完成
        </w-button>
        <w-button @click="close()" type="primary"> 关闭 </w-button>
      </div>
      <j-form-container>
        <w-form ref="form" slot="detail" :model="model" :rules="validatorRules" v-next>
          <w-row>
            <w-col :span="12">
              <w-form-item label="状态" prop="status">
                <j-dict-select-tag v-model="model.status" dict-code="MergerMaterialMasterStatus" disabled />
              </w-form-item>
            </w-col>
            <w-col :span="12" v-if="!model.id">
              <w-form-item label="税号变更" prop="taxChange">
                <j-dict-select-tag v-model="model.taxChange" type="radio" dict-code="yn" disabled />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="企业名称" prop="compName">
                <w-input v-model="model.compName" disabled />
              </w-form-item>
            </w-col>
            <w-col :span="24">
              <w-form-item :required="model.supplierRefineFlag === '1'" label="供应商" prop="supplierId">
                <w-auto-complete
                  v-model="model.supplierId"
                  :page-size="20"
                  :params="{ pType: '1' }"
                  :callback="
                    (obj) => {
                      model.supplierCode = obj ? obj.extend.partCode : '';
                      model.supplierName = obj ? obj.extend.partName : '';
                    }
                  "
                  :disabled="loginUserRqualNeedPeopleDisabled()"
                  v-required-color="model.supplierRefineFlag === '1'"
                  url="/partner/partnerInfo/getPartnerByType"
                  placeholder="选择供应商"
                />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item label="料号" prop="copImgNo">
                <w-input v-model="model.copImgNo" disabled />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item label="物料描述" prop="materialDesc">
                <w-input v-model="model.materialDesc" disabled />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="物料名称" prop="materialName">
                <w-input v-model="model.materialName" disabled />
              </w-form-item>
            </w-col>
            <w-col :span="12" class="wrap-box">
              <md-checkbox v-show="!isFromMip" class="check-box check-box-short" v-model="checkFlagObj.erpUnitCheckFlag"></md-checkbox>
              <w-form-item label="ERP单位" prop="erpUnit">
                <w-input v-model="model.erpUnit" @change="getDictData()" :disabled="materialDisabled(true, checkFlagObj.erpUnitCheckFlag)" />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item label="研发分类" prop="developType">
                <w-input v-model="model.developType" disabled />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item label="供应商细化标志" prop="supplierRefineFlag">
                <j-dict-select-tag v-model="model.supplierRefineFlag" disabled type="radio" dict-code="yn" />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item :required="model.taxChange === '1'" label="商品编码" prop="codeTs">
                <template slot="suffix" v-if="model.oldCodeTs && model.oldCodeTs !== model.codeTs">
                  <w-tooltip :content="'旧商品编码:' + model.oldCodeTs" placement="top" effect="light">
                    商品编码 <i class="md-icon-warning-outline"></i>
                  </w-tooltip>
                </template>

                <!-- <div style="display: flex; align-items: center"> -->
                <w-input
                  v-model="model.codeTs"
                  :disabled="model.taxChange !== '1' || loginUserRqualNeedPeopleDisabled()"
                  @keyup.enter.native="queryByIdHscode('enter')"
                  @blur="queryByIdHscode('enter')"
                  v-required-color="model.taxChange === '1'"
                  @input="handleInput"
                  maxlength="10"
                  placeholder="请输入商品编码"
                />

                <!-- <div
                    @click="showHsCode"
                    style="width: 26px; height: 26px; background-color: #0f69ff; line-height: 26px; text-align: center"
                  >
                    <a-icon type="plus" style="color: #ffffff" />
                  </div> -->
                <!-- </div> -->
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="商品名称" prop="gname">
                <template slot="suffix" v-if="model.oldCodeTs && model.oldCodeTs !== model.codeTs">
                  <w-tooltip :content="'旧商品名称:' + model.oldGname" placement="top" effect="light">
                    商品名称 <i class="md-icon-warning-outline"></i>
                  </w-tooltip>
                </template>
                <w-input
                  v-model="model.gname"
                  v-required-color="true"
                  maxlength="50"
                  :disabled="loginUserRqualNeedPeopleDisabled()"
                />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="报关成交单位" prop="unit" :required="model.status !== '010'">
                <j-search-select-tag
                  v-model="model.unit"
                  v-required-color="model.status !== '010'"
                  :page-size="999"
                  placeholder="请选择报关成交单位"
                  @getselectedObj="unitChange"
                  :disabled="loginUserRqualNeedPeopleDisabled()"
                  :dictOptions="unitDictData"
                />
              </w-form-item>
            </w-col>
            <w-col :span="12" class="wrap-box">
              <md-checkbox v-show="!isFromMip" class="check-box" v-model="checkFlagObj.unitConversionFactorCheckFlag"></md-checkbox>
              <w-form-item label="单位转换因子" prop="unitConversionFactor">
                <w-input
                  v-model="model.unitConversionFactor"
                  v-required-color="true"
                  maxlength="9"
                  :disabled="materialDisabled(loginUserRqualNeedPeopleDisabled(),checkFlagObj.unitConversionFactorCheckFlag)"
                  @input="handleInputNumber('unitConversionFactor', $event)"
                />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item label="法定第一单位" prop="unit1">
                <j-search-select-tag
                  v-model="model.unit1"
                  :page-size="20"
                  :async="true"
                  disabled
                  @getselectedObj="unit1Change"
                  dict="cus_unit,code_name,code_value"
                />
              </w-form-item>
            </w-col>
            <w-col :span="12" class="wrap-box">
              <md-checkbox v-show="!isFromMip" v-if="model.unit1"  class="check-box" v-model="checkFlagObj.unit1ConversionFactorCheckFlag"></md-checkbox>
              <w-form-item label="法一转换因子" prop="unit1ConversionFactor">
                <w-input
                  v-model="model.unit1ConversionFactor"
                  maxlength="10"
                  :disabled="materialDisabled(loginUserRqualNeedPeopleDisabled(),checkFlagObj.unit1ConversionFactorCheckFlag)"
                  @input="handleInputNumber('unit1ConversionFactor', $event)"
                />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="法定第二单位" prop="unit2">
                <j-search-select-tag
                  v-model="model.unit2"
                  :page-size="20"
                  disabled
                  :async="true"
                  @getselectedObj="unit2Change"
                  dict="cus_unit,code_name,code_value"
                />
              </w-form-item>
            </w-col>
            <w-col :span="12" class="wrap-box">
              <md-checkbox v-show="!isFromMip" v-if="model.unit2"  class="check-box" v-model="checkFlagObj.unit2ConversionFactorCheckFlag"></md-checkbox>
              <w-form-item label="法二转换因子" prop="unit2ConversionFactor" :rules="unit2ConversionFactorRules()">
                <w-input
                  maxlength="10"
                  v-model="model.unit2ConversionFactor"
                  :disabled="materialDisabled(!model.unit2 || loginUserRqualNeedPeopleDisabled(), checkFlagObj.unit2ConversionFactorCheckFlag)"
                  @input="handleInputNumber('unit2ConversionFactor', $event)"
                  @blur="handleBlur('unit2ConversionFactor', $event)"
                />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="监管类别名称" prop="regulatoryType">
                <w-auto-complete
                  v-model="model.regulatoryType"
                  :page-size="20"
                  :params="{ hscode: model.codeTs === undefined ? '' : model.codeTs }"
                  url="/para/getCiqClassifyListByHsCode"
                  :callback="
                    (obj) => {
                      if (obj) {
                        model.regulatoryTypeName = obj.extend.ciqname;
                      } else {
                        model.regulatoryTypeName = '';
                      }
                    }
                  "
                  :disabled="loginUserRqualNeedPeopleDisabled()"
                  placeholder="请选择监管类别名称"
                />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="监管证件代码" prop="controlMa">
                <div class="left-control-display">
                  <w-input v-model="model.controlMa" maxlength="50" disabled class="control-input" />
                  <w-input v-model="model.quanType" maxlength="50" disabled class="control-input" />
                </div>
              </w-form-item>
            </w-col>

            <w-col :span="24">
              <w-form-item label="规格型号" prop="gmodel">
                <w-input
                  v-model="model.gmodel"
                  @change="changeGmodel"
                  v-required-color="true"
                  maxlength="255"
                  :disabled="
                    elementAndNeedPeopleDisabled({ elemName: '规格型号' }) || loginUserRqualNeedPeopleDisabled()
                  "
                />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item label="数据来源" prop="dataSources">
                <j-dict-select-tag v-model="model.dataSources" dict-code="MergeSource" disabled />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item label="备注" prop="demo">
                <w-input
                  v-model="model.demo"
                  maxlength="50"
                  placeholder="请输入备注"
                  :disabled="loginUserRqualNeedPeopleDisabled()"
                />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="需求人" prop="demander">
                <w-input v-model="model.demander" disabled />
              </w-form-item>
            </w-col>

            <w-col :span="12">
              <w-form-item label="要素采集发起时间" prop="elementInitTime">
                <w-input v-model="model.elementInitTime" disabled />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="确认时间" prop="confirmTime">
                <w-input v-model="model.confirmTime" disabled />
              </w-form-item>
            </w-col>
            <w-col :span="12">
              <w-form-item label="要素采集回复时间" prop="elementReplyTime">
                <w-input v-model="model.elementReplyTime" disabled />
              </w-form-item>
            </w-col>
          </w-row>
        </w-form>
      </j-form-container>
    </w-col>
    <w-col class="col-right">
      <dev-classify-attr ref="devClassifyAttrRef"></dev-classify-attr>
      <div class="productInformation">
        <div class="smallTitle">商品描述：</div>
        <div class="smallInfo" :title="productInfo.gname">{{ productInfo.gname || '' }}</div>
      </div>
      <div class="productInformation">
        <div class="smallTitle">申报要素：</div>
        <div class="smallInfo" :title="productInfo.elementNames">{{ productInfo.elementNames || '' }}</div>
      </div>
      <div class="productInformation" v-if="model.status === '010'">
        <div class="smallTitle">要素采集备注：</div>
        <div class="smallInfo" :title="model.elementInitRemark">{{ model.elementInitRemark || '' }}</div>
      </div>
      <w-tabs v-model="activeKey" @change="handleChangeTabs" class="ant-modal-tab" type="card">
        <w-tab-pane :key="refKeys[0]" :force-render="true" tab="申报要素">
          <a-table
            ref="table"
            :columns="elementColumns"
            :pagination="false"
            :data-source="elementDataSource"
            :row-selection="!isFromMip ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
            @change="handleTableChange"
            :custom-row="selectRow"
            bordered
            size="middle"
            row-key="id"
            class="j-table-force-nowrap"
          >
            <span slot="elemValue" slot-scope="text, record">
              <md-select
                @change="changeElementValue"
                v-if="record.elemType === '1'"
                v-model="record.elemValue"
                clearable
                :disabled="elementDisabled(record)"
                class="right-select"
                :inputtranslatevalue="record.elemValue"
              >
                <md-option
                  v-for="(item, key) in record.elemContent.split('|')"
                  :key="key"
                  :value="String(key)"
                  :label="key + '-' + item"
                />
              </md-select>
              <a-auto-complete
                class="right-select"
                v-else-if="record.elemType === '2'"
                v-model="record.elemValue"
                @blur="changeElementValue"
                @change="changeElementValue"
                :disabled="elementDisabled(record)"
                :filterOption="filterOption"
                :dataSource="record.elemContent.split('|')"
                :inputtranslatevalue="record.elemValue"
              >
                <w-input v-model="record.elemValue" />
              </a-auto-complete>
              <w-input
                v-else
                v-model="record.elemValue"
                @change="changeElementValue"
                :disabled="elementDisabled(record)"
              />
            </span>
          </a-table>
        </w-tab-pane>

        <w-tab-pane :key="refKeys[1]" :force-render="true" tab="涉证类型">
          <MaterialMasterModalCertTable
            ref="MaterialMasterModalCertTable"
            :disabled="loginUserRqualNeedPeopleDisabled()"
          />
        </w-tab-pane>
        <w-tab-pane :key="refKeys[3]" :force-render="true" tab="流程记录">
          <MaterialMasterModalWorkflow ref="MaterialMasterModalWorkflow" :hiddenBtn="true" />
        </w-tab-pane>
        <w-tab-pane :key="refKeys[4]" :force-render="true" tab="修改记录">
          <MaterialMasterModalHisList ref="MaterialMasterModalHisList" />
        </w-tab-pane>
      </w-tabs>
    </w-col>
    <div class="other-leagal-person">
      <div class="smallTitle">其他法人归类</div>
      <MergerOtherLegalPerson ref="MergerOtherLegalPerson" @otherLegalRowData="otherLegalRowData" />
    </div>
    <material-remark-dialog ref="materialRemarkDialogRef" @ok="queryByIdData(model.id)"></material-remark-dialog>
    <CNhSCodeModal ref="CNhSCodeModal" :c-nh-s-code-modal-show="CNhSCodeModalShow" @close="closeModal" />
  </a-spin>
</template>

<script>
import { getAction, httpAction, postAction } from '@/api/manage';
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin';
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import MaterialMasterModalWorkflow from './MaterialMasterModalWorkflow';
import { mapGetters } from 'vuex';
import CNhSCodeModal from '../../mergeredConfig/productClassify/modules/CNhSCodeModal.vue';
import MaterialMasterModalHisList from './MaterialMasterModalHisList';
import MergerOtherLegalPerson from './MergerOtherLegalPerson';
import MaterialMasterModalCertTable from './MaterialMasterModalCertTable';
import AppprovalUserSelect from '@/components/AppprovalUserSelect/index';
import devClassifyAttr from './devClassifyAttr/index.vue';
import materialRemarkDialog from './materialRemarkDialog.vue';
import lodash from 'lodash'

export default {
  name: 'MaterialMasterModalForm',
  components: {
    materialRemarkDialog,
    devClassifyAttr,
    MaterialMasterModalWorkflow,
    MaterialMasterModalHisList,
    MergerOtherLegalPerson,
    CNhSCodeModal,
    AppprovalUserSelect,
    MaterialMasterModalCertTable,
  },
  mixins: [JEditableTableModelMixin, JeecgListMixin],
  props: {
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      isFromMip: false, // 是否mip跳转过来
      // 表单四个字段是否可以编辑复选框
      checkFlagObj: {
        erpUnitCheckFlag: false,
        unitConversionFactorCheckFlag: false,
        unit1ConversionFactorCheckFlag: false,
        unit2ConversionFactorCheckFlag: false,
      },
      model: {},
      confirmLoading: false,
      validatorRules: {
        supplierId: [
          {
            validator: (rule, value, callback) => {
              if (this.model.supplierRefineFlag === '1' && !value) {
                callback(new Error('请选择供应商!'));
              } else {
                callback();
              }
            },
          },
        ],
        codeTs: [
          {
            validator: (rule, value, callback) => {
              if (this.model.taxChange === '1' && !value) {
                callback(new Error('请输入商品编码!'));
              } else if (value.length !== 10) {
                callback(new Error('商品编码必须十位!'));
              } else {
                callback();
              }
            },
          },
        ],
        gname: [{ required: true, message: '请输入商品名称!' }],
        unit: [
          { required: true, message: '请选择报关成交单位!' }
        ],
        unitConversionFactor: [{ required: true, message: '请输入单位转换因子!' }],
        gmodel: [{ required: true, message: '请输入规格型号!' }],
      },
      form: this.$form.createForm(this),
      refKeys: [
        /* 申报要素 */
        'mergerElement',
        /* 涉证类型 */
        'mergerCert',
        /* 其他法人归类 */
        'MergerOtherLegalPerson',
        /* 流程记录 */
        'MaterialMasterModalWorkflow',
        /* 修改记录 */
        'MaterialMasterModalHisList',
      ],
      activeKey: 'mergerElement',
      /* 申报要素 */
      elementDataSource: [],
      elementColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: '要素名称',
          align: 'left',
          dataIndex: 'elemName',
          ellipsis: true,
          width: 200,
        },
        {
          title: '要素值',
          align: 'center',
          dataIndex: 'elemValue',
          ellipsis: true,
          scopedSlots: { customRender: 'elemValue' },
        },
      ],
      url: {
        add: '/merger/mergerMaterialMaster/add',
        edit: '/merger/mergerMaterialMaster/edit',
        queryById: '/merger/mergerMaterialMaster/queryById',
        // 查询税则信息和申报要素
        queryByHscode: '/merger/mergerGoods/queryHSInfoAndElementByPrdCode',
        elementFinish: '/merger/mergerMaterialMaster/elementFinish',
      },
      /* 控制弹窗显隐 */
      CNhSCodeModalShow: false,
      // 避免报错
      columns: [],
      // 获取商品编码的信息
      productInfo: {},
      unitDictData: []
    };
  },
  computed: {
    formDisabled() {
      return this.disabled;
    },
    collectDisable() {
      return !(this.model.status === '000' || this.model.status === '020');
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    /**
     * 处理数字输入，只允许输入数字和一个小数点
     * @param {String} field 字段名，用于在model中定位
     * @param {String} value 输入的值
     */
    handleInputNumber(field, value) {
      // 1. 过滤非数字和非小数点的字符
      let numericValue = value.replace(/[^\d.]/g, '');

      // 2. 处理小数点：只能有一个，且不能在开头
      numericValue = numericValue
        .replace(/^\./g, '') // 移除开头的小数点
        .replace(/\.{2,}/g, '.') // 多个小数点只保留第一个
        .replace('.', '$#$') // 临时标记第一个小数点
        .replace(/\./g, '') // 移除其他小数点
        .replace('$#$', '.'); // 恢复第一个小数点

      // 3. 使用$set确保响应式更新
      if (this.model[field] !== numericValue) {
        this.$set(this.model, field, numericValue);
      }
    },
    // 获取商品编码的信息
    async getProductInfo() {
      const res = await getAction('/cusHscode/list', {
        codeTS: this.model.codeTs,
      });
      if (res.success && res.result.records.length > 0) {
        this.$set(this.productInfo, 'gname', res.result.records[0].gname);
        this.$set(this.productInfo, 'elementNames', res.result.records[0].elementNames);
      } else if (res.success && res.result.records.length === 0) {
        this.$message.warning('未查询到此商品编码的信息');
      } else {
        this.$message.warning(res.message);
      }
    },
    initDataList() {},
    /* 获取表单里的数据 */
    add() {
      this.model = Object.assign({});
    },
    async edit(record,customParams) {
      if (!lodash.isEmpty(customParams)) {
        this.isFromMip = customParams.isFromMip || false;
      } else {
        this.isFromMip = false;
      }
      await this.queryByIdData(record.id);
      if (this.model.id) {
        this.$refs.MergerOtherLegalPerson.extQueryParam.copImgNo = this.model.copImgNo;
        this.$refs.MergerOtherLegalPerson.extQueryParam.compNo = this.model.compNo;
        this.$refs.MergerOtherLegalPerson.extQueryParam.id = this.model.id;
        this.$refs.MergerOtherLegalPerson.loadData();
      }
      this.getDictData();
    },
    setCheckValue(record) {
      if (record) {
        Object.keys(this.checkFlagObj).forEach(key=>{
          if(record.tickMaterial && record.tickMaterial.includes(key)){
            this.checkFlagObj[key] =  true;
          }
        });
      }
    },
    /* 要素采集完成 */
    elementComplete() {
      const that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          const goodsElementList = this.elementDataSource;
          goodsElementList.forEach((item) => {
            item.goodsId = this.model.id;
            item.codeTs = this.model.codeTs;
          });
          const mergerCertList = this.$refs.MaterialMasterModalCertTable.dataSource;

          httpAction(
            that.url.elementFinish,
            {
              ...this.model,
              goodsElementList,
              mergerCertList,
            },
            'post'
          )
            .then((res) => {
              if (res.success) {
                that.$message.success('要素采集完成');
                that.edit(that.model, { isFromMip: that.isFromMip });
                // that.model = res.result || that.model
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        }
      });
    },
    submitForm() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          const httpurl = this.model.id ? this.url.edit : this.url.add;
          const method = this.model.id ? 'put' : 'post';

          const goodsElementList = this.elementDataSource;
          goodsElementList.forEach((item) => {
            item.goodsId = this.model.id;
            item.codeTs = this.model.codeTs;
          });

          const mergerCertList = this.$refs.MaterialMasterModalCertTable.dataSource;

          httpAction(
            httpurl,
            {
              ...this.model,
              goodsElementList,
              mergerCertList,
            },
            method
          )
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                // that.model = res.result || that.model
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        }
      });
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) !== -1;
    },
    closeModal(record) {
      this.CNhSCodeModalShow = false;
      this.$set(this.model, 'codeTs', record.codeTS);
      this.$set(this.model, 'gname', record.gname);
      this.queryByIdHscode('enter');
    },

    async queryByIdData(id) {
      const res = await getAction(this.url.queryById, {
        id,
      });
      if (res.success) {
        const oldCodeTs = res.result.codeTs;
        const oldGname = res.result.gname;
        this.$set(this, 'model', res.result);
        if (res.result.taxChange === '1') {
          // 税号变更时将新商品名称和编码赋值到商品名称和编码输入框
          this.$set(this.model, 'codeTs', res.result.newCodeTs);
          this.$set(this.model, 'gname', res.result.newGname);
          // 备份旧的商品名称和编码
          this.$set(this.model, 'oldCodeTs', oldCodeTs);
          this.$set(this.model, 'oldGname', oldGname);
        }
        if (this.model.codeTs) {
          this.queryByIdHscode('detail');
        }
        this.$refs.devClassifyAttrRef.show(id);
        this.setCheckValue(this.model);
      }
    },

    // 详情
    // detail enter
    async queryByIdHscode(flag) {
      if (!this.model.codeTs || this.model.codeTs.length !== 10) {
        return;
      }
      this.getProductInfo();
      const res = await getAction(this.url.queryByHscode, {
        hsCode: this.model.codeTs,
      });
      if (res.success) {
        this.elementDataSource = res.result.elementsList;
        this.setElementCheck();
        if (flag === 'detail') {
          if (this.model.gmodel) {
            this.changeGmodel();
          } else {
            this.changeElementValue();
          }
        } else {
          this.changeElementValue();
        }
        if (res.result && res.result.hsCodeInfo) {
          //  反显其他字段
          const { unit1, unit2, controlMa, lowRate, taxRate, controlIq } = res.result.hsCodeInfo;
          this.$set(this.model, 'unit1', unit1);
          this.$set(this.model, 'unit2', unit2);
          this.$set(this.model, 'controlMa', controlMa);
          this.$set(this.model, 'quanType', controlIq);
          this.$set(this.model, 'lowRate', lowRate);
          this.$set(this.model, 'taxRate', taxRate);
        }
      } else {
        this.$message.warning(res.message);
      }
    },
    setElementCheck() {
      if(this.model && this.model.tickElement){
        this.elementDataSource.forEach((element,index) => {
          if (this.model.tickElement.includes(element.elemName)) {
            this.selectedRowKeys.push(index);
            this.selectionRows.push(element);
            // 设置可编辑标识
            element.canEdit = true;
          }
        });
      }
    },
    /* 当前登录用户==需求人时，表单和涉证类型不可操作 */
    loginUserRqualNeedPeopleDisabled() {
      return this.userInfo().username === this.model.demanderId;
    },
    /* 当前登录用户==需求人时，申报要素中的...禁用 */
    elementAndNeedPeopleDisabled(record) {
      // 如果是mip跳转。则直接disabled
      if(this.isFromMip){
        return true;
      }
      const SPECIAL_ELEMENTS = ['品牌类型', '出口享惠情况', 'GTIN', 'CAS', '规格型号'];
      return SPECIAL_ELEMENTS.includes(record.elemName) && this.userInfo().username === this.model.demanderId;
    },
    /* 报关成交单位-name */
    unitChange(obj) {
      this.model.unitName = obj ? obj.text.split('-')[1] : '';
    },
    /* 法定第一单位-name */
    unit1Change(obj) {
      this.model.unit1Name = obj ? obj.text.split('-')[1] : '';
    },
    /* 法定第二单位-name */
    unit2Change(obj) {
      this.model.unit2Name = obj ? obj.text.split('-')[1] : '';
    },

    // 修改要素值同步 规格型号
    changeElementValue() {
      let str = '';
      this.elementDataSource.forEach((item) => {
        if (typeof item.elemValue === 'undefined') {
          this.$set(item, 'elemValue', '');
        }
        str += item.elemValue + '|';
      });
      str = str.slice(0, -1);
      this.$set(this.model, 'gmodel', str);
    },

    // 修改规格型号 同步  要素值
    changeGmodel() {
      const arr = this.model.gmodel.split('|').map((item) => {
        // 如果元素是"null"字符串，则替换为空字符串，否则保持原内容
        return item === 'null' ? '' : item;
      });
      this.elementDataSource.forEach((element, index) => {
        if (index <= arr.length - 1) {
          this.$set(element, 'elemValue', arr[index]);
        } else {
          this.$set(element, 'elemValue', '');
        }
      });
    },

    /* 接收双击法人数据 */
    otherLegalRowData(record) {
      const defaultFields = {
        unit: record.unit,
        unitConversionFactor: record.unitConversionFactor,
        unit1ConversionFactor: record.unit1ConversionFactor,
        unit2ConversionFactor: record.unit2ConversionFactor,
        gmodel: record.gmodel,
      };

      const newModel = { ...this.model };
      Object.keys(defaultFields).forEach((key) => {
        if (newModel[key] === null && defaultFields[key] !== null) {
          newModel[key] = defaultFields[key];
        }
      });
      this.$set(this, 'model', newModel);
      this.$message.success('数据引用成功！');
    },
    // 展示商品编码
    showHsCode() {
      this.CNhSCodeModalShow = true;
    },

    handleChangeTabs(key) {
      if (key === 'MaterialMasterModalWorkflow') {
        // 流程记录
        this.$refs.MaterialMasterModalWorkflow.extQueryParam.reltId = this.model.id;
        this.model.id && this.$refs.MaterialMasterModalWorkflow.loadData();
      } else if (key === 'MaterialMasterModalHisList') {
        // 修改记录
        if (this.model.id) {
          this.$refs.MaterialMasterModalHisList.extQueryParam.reltId = this.model.id;
          this.$refs.MaterialMasterModalHisList.loadData();
        }
      } else if (key === 'mergerCert') {
        /* 涉证类型 */
        if (this.model.id) {
          this.$refs.MaterialMasterModalCertTable.certCodeList(this.model.id);
        }
      } else if (key === 'MergerOtherLegalPerson') {
        /* 其他法人归类 */
        if (this.model.id) {
          this.$refs.MergerOtherLegalPerson.extQueryParam.copImgNo = this.model.copImgNo;
          this.$refs.MergerOtherLegalPerson.extQueryParam.compName = this.model.compName;
          this.$refs.MergerOtherLegalPerson.loadData();
        }
      }
    },

    handleInput(e) {
      // 过滤非数字字符
      const value = e.replace(/[^\d]/g, '');
      this.model.codeTs = value;
    },
    unit2ConversionFactorRules() {
      if (this.model.unit2) {
        return [
          { required: true, message: '请输入法二转换因子!' },
          { pattern: /^[\d]{0,7}([.][0-9]{0,2})?$/g, message: '整数不能超过7位,小数不能超过2位', trigger: 'blur' }
        ];
      } else {
        return [];
      }
    },
    handleBlur(field) {
      const pattern = /^[\d]{0,7}([.][0-9]{0,2})?$/;
      if(field === 'unit2ConversionFactor' && this.model.unit2ConversionFactor){
        if(!pattern.test(this.model.unit2ConversionFactor)){
          this.$message.warning('整数不能超过7位,小数不能超过2位');
        }
      }
    },
    handleCollect() {
      if (this.selectionRows.length === 0) {
        this.$message.warning('申报要素勾选项不能为空!');
        return;
      }
      // 法二转换单位有值,法二转换因子没有勾选不能为空;
      if (this.model.unit2 && !this.checkFlagObj.unit2ConversionFactorCheckFlag && !this.model.unit2ConversionFactor) {
        this.$message.warning('法二转换因子不能为空!');
        return;
      }
      const modelCheck = [];
      // 保存申报要素勾选项
      this.model.tickElement = this.selectionRows.map((item) => item.elemName).join('|');
      // 保存表头四个字段勾选项
      Object.keys(this.checkFlagObj).forEach(key=>{
        if(this.checkFlagObj[key]){
          modelCheck.push(key)
        }
      });
      this.model.tickMaterial = modelCheck.join('|');
      this.$refs.materialRemarkDialogRef.show(this.model);
    },
    // 申报要素是否可以编辑区分是否从mip跳转进入
    elementDisabled(row) {
      if(this.isFromMip){
        return !row.canEdit;
      }
      return false;
    },
    // 是否可以编辑区分是否从mip跳转进入；如果从mip跳转进入，则根据是否勾选来决定是否可以编辑
    materialDisabled(defaultValue, flag) {
      if(this.isFromMip){
        return !flag;
      }
      return defaultValue;
    },
    getDictData() {
      const that = this;
      that.unitDictData = [];
      postAction(process.env.VUE_APP_API_BASE_DOMAIN + '/api-ils/data/code-master-heard/v1/get-master-for-page', {
        codeType: 'CUSTOMS_DECLARATION_UNIT',
        codeValue: this.model.erpUnit,
        pageSize: 100
      }).then(res => {
        if (res && +res.code === 0) {
          res.data.list.forEach(i => {
            if (i.codeName && String(i.codeName).includes('-')) {
              that.unitDictData.push({
                value: String(i.codeName).split('-')[0],
                text: i.codeName,
                name: String(i.codeName).split('-')[1]
              })
            }
          });
          if (that.unitDictData.length) {
            that.$set(this.model, 'unit', that.unitDictData[0].value);
            that.$set(this.model, 'unitName', that.unitDictData[0].name);
          } else {
            that.$set(this.model, 'unit', '');
            that.$set(this.model, 'unitName', '');
          }
        };
      });
    },
  },
};
</script>

<style lang="less">
.material-master-modal-form {
  height: calc(100vh - 104px);
  .col-left {
    width: calc(50% - 5px);
    margin-right: 10px;
    .md-icon-warning-outline {
      color: red;
    }
    .left-control-display {
      display: flex;
      .control-input {
        width: 50%;
      }
    }
  }
  .col-right {
    width: calc(50% - 5px);
    .right-select {
      width: 100%;
    }
  }
  .other-leagal-person {
    margin-top: 30px;
    float: right;
    width: 100%;
  }
  /deep/ .ant-modal-tab {
    .vxe-table--body {
      tr.vxe-body--row {
        .ant-input.ant-select-search__field {
          height: 22px;
        }
      }
    }
  }

  .productInformation {
    display: flex;
    .smallTitle {
      padding-left: 0;
      padding-right: 3px;
    }
  }

  .smallInfo {
    padding: 6px 0;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    width: calc(100% - 100px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .smallTitle {
    font-size: 12px;
    color: grey;
    font-weight: 700;
    height: 30px;
    padding: 6px 16px;
    display: flex;
  }
  .wrap-box {
    position: relative;

    .check-box {
      position: absolute;
      left: 34px;
      top: 7px;
    }

    .check-box-short {
      left: 64px;
    }
  }
}
</style>