logistics-fe-iems-winlink/src/views/merger/mergeredConfig/productClassify/modules/additionCodeDialog.vue

<template>
    <md-dialog
        :close-on-click-modal="false"
        :title="title"
        :fullscreen="false"
        :visible.sync="dialogVisible"
        append-to-body
        width="800px"
    >   <div class="table-page-search-wrapper">
            <w-form @keyup.enter.native="searchQueryHandle" layout="inline">
                <w-row :gutter="10">
                    <w-col :span="5" v-for="i in config.searchFields" :key="i.value">
                        <w-input v-if="i.type === 'input'" v-model="queryParam[i.value]" :placeholder="i.placeholder || i.name" />
                        <md-select v-if="i.type === 'select'" v-model="queryParam[i.value]" :placeholder="i.placeholder || i.name" filterable clearable>
                            <md-option
                                v-for="item in optionsData[i.optionsKey] || {}"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </md-option>
                        </md-select>
                    </w-col>
                    <w-col :span="8" style="justify-content:flex-end">
                        <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
                            <w-button @click="searchQueryHandle" type="primary" icon="search">查询</w-button>
                            <w-button @click="searchResetHandle" type="primary" style="margin-left: 8px">重置</w-button>
                        </span>
                    </w-col>
                </w-row>
            </w-form>
        </div>
        <md-table :data="tableData" border size="mini" style="width: 100%" @row-dblclick="rowDblclick">
            <md-table-column v-for="col in config.columns" :key="col.prop" :prop="col.prop" :label="col.label" v-bind="{ ...$attrs }"></md-table-column>
        </md-table>
    </md-dialog>
</template>

<script>
import { postAction, getAction } from '@/api/manage';
import config from './additionCode';
import lodash from 'lodash';
export default {
    data() {
        return {
            config,
            queryParam:{},
            modelData:{},
            tableData:[],
            tableDataBackup:[],
            dialogVisible: false,
            optionsData:{},
            title: ''
        };
    },
    methods: {
        searchQueryHandle(){
          const { additionalCode, cultureCode } = this.queryParam;
          if (additionalCode && isNaN(additionalCode)) {
            this.$MdMessage({
              message: '附加编码只能输入数字',
              type: 'warning'
            });
            return;
          }
          if (additionalCode && String(additionalCode).length > 6) {
            this.$MdMessage({
              message: '附加编码不能超过6位',
              type: 'warning'
            });
            return;
          }
          if( additionalCode ||  cultureCode) {
            const filterData = this.tableDataBackup.filter(item => {
                // 处理 additionalCode
                let additionalCodeMatch = true;
                if (!lodash.isEmpty(additionalCode)) {
                  // 只有当筛选条件有值时才进行匹配
                  additionalCodeMatch = item.additionalCode === additionalCode;
                }
                
                // 处理 cultureCode
                let cultureCodeMatch = true;
                if (!lodash.isEmpty(cultureCode)) {
                  // 只有当筛选条件有值时才进行匹配
                  cultureCodeMatch = item.cultureCode === cultureCode;
                }
                
                return additionalCodeMatch && cultureCodeMatch;
              });
            this.tableData = filterData;
          } else {
            this.tableData = this.tableDataBackup;
          }
        },
        searchResetHandle(){
          this.queryParam = {};
          this.tableData = this.tableDataBackup;
        },
        show({data}){
          if(!data.hsCode){
            this.$message.warning('商品编码不能为空，请维护后重试');
            return;
          }
          this.queryParam = {
            additionalCode: data.additionalCode || '',
            cultureCode: 'eng'
          } 
          this.dialogVisible = true;
          this.title = data.hsCode + '-附加编码';
          this.modelData = data;
          this.$nextTick(()=>{
            this.getDate();
          })
        },
        close(){
          this.dialogVisible = false;
          this.tableData = [];
        },
        rowDblclick(row){
          this.$emit('confirm', row)
          this.close();
        },
        getDate() {
          postAction(process.env.VUE_APP_API_BASE_DOMAIN + '/api-iems-cn/base/tariff/additional/code/v1/get-by-page', {
            hscode: this.modelData.hsCode || '',
            countryCode: this.modelData.country || '',
            pageSize: 999
          }).then(res => {
            if (res && +res.code === 0) {
              this.tableDataBackup = lodash.cloneDeep(res.data.list);
              this.searchQueryHandle();
            }
          });
        },
        initDict() {
          const keyList = ['GLOBAL_TARIFF_LANGUAGE_TYPE'];
          getAction(process.env.VUE_APP_API_BASE_DOMAIN + '/api-it-dc/dictionaryDetail/translateWithTenant',
            { dictCodes: keyList.join(',') }
          ).then(res => {
            if (res && +res.code === 0 && res.data && res.data.GLOBAL_TARIFF_LANGUAGE_TYPE) {
              const data = res.data.GLOBAL_TARIFF_LANGUAGE_TYPE;
              const list = [];
              Object.keys(data).forEach(key => {
                list.push({
                  label: data[key],
                  value: key
                })
              });
              this.optionsData.GLOBAL_TARIFF_LANGUAGE_TYPE = list;
            }
          });
        }
    },
    mounted() {
      this.initDict()
    },
};
</script>