MTP2.0_WEB/src/views/information/goods/components/add/index.vue

<template>
  <!-- 新增现货品种 -->
  <a-modal class="commonModal addSpotVariety"
           wrapClassName=""
           title="新增现货品种"
           v-model:visible="visible"
           @cancel="cancel"
           centered
           :maskClosable="maskClosableFlag"
           width="850px">
    <template #footer>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit">完成</a-button>
    </template>
    <a-form class="inlineForm"
            ref="formRef"
            :model="formState"
            :rules="rules">
      <fieldset class="formFieldSet">
        <legend>基本信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="现货品种名称"
                         name="deliverygoodsname">
              <a-input class="dialogInput"
                       v-model:value="formState.deliverygoodsname"
                       style="width: 200px"
                       placeholder="请输入现货品种名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="现货品种代码"
                         name="deliverygoodscode">
              <a-input class="dialogInput"
                       style="width: 200px"
                       v-model:value="formState.deliverygoodscode"
                       placeholder="请输入现货品种代码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="单位"
                         name="unitid">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        v-model:value="formState.unitid"
                        placeholder="请选择单位">
                <a-select-option v-for="item in unitList"
                                 :value="item.enumitemname"
                                 :key="item.autoid">
                  {{item.enumdicname}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="备注"
                         name="remark">
              <a-input class="dialogInput"
                       v-model:value="formState.remark"
                       style="width: 562px"
                       placeholder="请输入备注" />
            </a-form-item>
          </a-col>
        </a-row>
      </fieldset>
      <fieldset class="formFieldSet">
        <legend>品类信息</legend>
        <a-row :gutter="24">
          <a-col :span="6">
            <span>
              <span class="red">*</span>
              品类
            </span>
          </a-col>
          <a-col :span="6">
            <span>
              <span class="red">*</span>
              单位
            </span>
          </a-col>
          <a-col :span="6">
            <span>
              <span class="red">*</span>
              标仓系数
            </span>
          </a-col>
          <a-col :span="6">
            <span>
              操作
            </span>
          </a-col>
          <template v-for="(domain, index) in formState.gldwrstandards"
                    :key="domain.index + 'domain'">
            <a-col :span="6">
              <a-form-item :name="['gldwrstandards',index, 'wrstandardname', ]"
                           :rules="rules.gldwrstandards.wrstandardname">
                <a-input class="dialogInput"
                         v-model:value="domain.wrstandardname"
                         placeholder="请输入品类"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :name="['gldwrstandards',index,'unitid' ]"
                           :rules="rules.gldwrstandards.unitid">
                <a-select class="inlineFormSelect"
                          style="width: 200px"
                          v-model:value="domain.unitid"
                          placeholder="请选择单位">
                  <a-select-option v-for="item in unitList"
                                   :value="item.enumitemname"
                                   :key="item.autoid">
                    {{item.enumdicname}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :name="['gldwrstandards',index,'convertfactor']"
                           :rules="rules.gldwrstandards.convertfactor">
                <a-input class="dialogInput"
                         v-model:value="domain.convertfactor"
                         type="number"
                         placeholder="请输入标仓系数"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-button class="plusBtn"
                        @click="deleteOne('gldwrstandards', index)"
                        v-if="index > 0">
                <template #icon>
                  <MinusOutlined />
                </template>
              </a-button>
              <a-button class="minusBtn"
                        @click="addOne('gldwrstandards')">
                <template #icon>
                  <PlusOutlined />
                </template>
              </a-button>
            </a-col>
          </template>
        </a-row>
        <!-- <a-table class="dialogTable"
                 :columns="columns"
                 :data-source="dataSource"
                 :pagination="false">
          <template #type>
            <a-input class="dialogInput"
                     placeholder="请输入品类"></a-input>
          </template>
          <template #customType>
            <span>
              <span class="red">*</span>
              品类
            </span>
          </template>
          <template #unit>
            <a-select class="dialogSelect"
                      placeholder="请选择单位">
              <a-select-option value="1">
                一口价
              </a-select-option>
              <a-select-option value="2">
                一口价2
              </a-select-option>
            </a-select>
          </template>
          <template #customUnit>
            <span>
              <span class="red">*</span>
              单位
            </span>
          </template>
          <template #coefficient>
            <a-input class="dialogInput"
                     placeholder="请输入标仓系数"></a-input>
          </template>
          <template #customCoefficient>
            <span>
              <span class="red">*</span>
              标仓系数
            </span>
          </template>
          <template #action>
            <a-button class="plusBtn">
              <template #icon>
                <MinusOutlined />
              </template>
            </a-button>
            <a-button class="minusBtn">
              <template #icon>
                <PlusOutlined />
              </template>
            </a-button>
          </template>
        </a-table> -->
      </fieldset>
      <fieldset class="formFieldSet">
        <legend>品牌信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <span>
              <span class="red">*</span>
              品牌
            </span>
          </a-col>
          <a-col :span="12">
            <span>
              操作
            </span>
          </a-col>
          <template v-for="(domain, index) in formState.glddgfactoryItems"
                    :key="domain.index + 'domain'">
            <a-col :span="12">
              <a-form-item :name="['glddgfactoryItems',index,'dgfactoryitemvalue']"
                           :rules="rules.glddgfactoryItems.dgfactoryitemvalue">
                <a-input class="dialogInput"
                         v-model:value="domain.dgfactoryitemvalue"
                         placeholder="请输入品牌"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-button class="plusBtn"
                        @click="deleteOne('glddgfactoryItems', index)"
                        v-if="index > 0">
                <template #icon>
                  <MinusOutlined />
                </template>
              </a-button>
              <a-button class="minusBtn"
                        @click="addOne('glddgfactoryItems')">
                <template #icon>
                  <PlusOutlined />
                </template>
              </a-button>
            </a-col>
          </template>
        </a-row>
        <!-- <a-table class="dialogTable"
                 :columns="columns1"
                 :data-source="dataSource1"
                 :pagination="false">
          <template #type>
            <a-input class="dialogInput"
                     placeholder="请输入品牌"></a-input>
          </template>
          <template #customType>
            <span>
              <span class="red">*</span>
              品牌
            </span>
          </template>
          <template #action>
            <a-button class="plusBtn">
              <template #icon>
                <MinusOutlined />
              </template>
            </a-button>
            <a-button class="minusBtn">
              <template #icon>
                <PlusOutlined />
              </template>
            </a-button>
          </template>
        </a-table> -->
      </fieldset>
      <fieldset class="formFieldSet">
        <legend>套保品种信息</legend>
        <a-row :gutter="24">
          <a-col :span="6">
            <span>
              <span class="red">*</span>
              套保品种
            </span>
          </a-col>
          <a-col :span="6">
            <span>
              <span class="red">*</span>
              单位
            </span>
          </a-col>
          <a-col :span="6">
            <span>
              <span class="red">*</span>
              套保系数
            </span>
          </a-col>
          <a-col :span="6">
            <span>
              操作
            </span>
          </a-col>
          <template v-for="(domain, index) in formState.wrsconvertdetails"
                    :key="domain.index + 'domain'">
            <a-col :span="6">
              <a-form-item :name="['wrsconvertdetails',index,'middlegoodsid']"
                           :rules="rules.wrsconvertdetails.middlegoodsid">
                <a-select class="inlineFormSelect"
                          style="width: 200px"
                          @change="middleChange(domain.middlegoodsid, domain)"
                          v-model:value="domain.middlegoodsid"
                          placeholder="请选择套保品种">
                  <a-select-option v-for="item in goodsGroup"
                                   :value="item.groupcategroyid"
                                   :key="item.groupcategroyid">
                    {{item.goodsgroupname}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :name="['wrsconvertdetails', index, 'unitidName']">
                <a-input class="dialogInput"
                         readonly
                         v-model:value="domain.unitidName"
                         placeholder="选择套保品种后自动填入"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :name="['wrsconvertdetails', index, 'convertratio']"
                           :rules="rules.wrsconvertdetails.convertratio">
                <a-input class="dialogInput"
                         v-model:value="domain.convertratio"
                         type="number"
                         placeholder="请输入套保系数"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-button class="plusBtn"
                        @click="deleteOne('wrsconvertdetails', index)"
                        v-if="index > 0">
                <template #icon>
                  <MinusOutlined />
                </template>
              </a-button>
              <a-button class="minusBtn"
                        @click="addOne('wrsconvertdetails')">
                <template #icon>
                  <PlusOutlined />
                </template>
              </a-button>
            </a-col>
          </template>
        </a-row>
        <!-- <a-table class="dialogTable"
                 :columns="columns"
                 :data-source="dataSource"
                 :pagination="false">
          <template #type>
            <a-select class="dialogSelect"
                      placeholder="请选择套保品种">
              <a-select-option value="1">
                一口价
              </a-select-option>
              <a-select-option value="2">
                一口价2
              </a-select-option>
            </a-select>
          </template>
          <template #customType>
            <span>
              <span class="red">*</span>
              套保品种
            </span>
          </template>
          <template #unit>
            <span class="white">选择套保品种后自动填入</span>
          </template>
          <template #customUnit>
            <span>
              单位
            </span>
          </template>
          <template #coefficient>
            <a-input class="dialogInput"
                     placeholder="请输入套保系数"></a-input>
          </template>
          <template #customCoefficient>
            <span>
              <span class="red">*</span>
              套保系数
            </span>
          </template>
          <template #action>
            <a-button class="plusBtn">
              <template #icon>
                <MinusOutlined />
              </template>
            </a-button>
            <a-button class="minusBtn">
              <template #icon>
                <PlusOutlined />
              </template>
            </a-button>
          </template>
        </a-table> -->
      </fieldset>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, toRaw } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods/index';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { handleAdd, handleFromState, handleGoodsGroup, getGoodsUnit } from './setup';
import { getGoodsUnitList } from '../../setup';
import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { FormState, WRSConvertDetailEx } from './interface';
import { validateCommon } from '@/common/setup/validate';

/**
 * 检验单位
 */
const validateUnit = async (rule: RuleObject, value: number) => {
    return validateCommon(value, '请选择单位');
};

/**
 *
 */
const valideteWR = async (rule: RuleObject, value: number) => {
    return validateCommon(value, '请选择品类');
};

export default defineComponent({
    name: 'addSpotVariety',
    components: {
        PlusOutlined,
        MinusOutlined,
    },
    setup() {
        // 控制关闭弹窗
        const { visible, cancel } = closeModal('spot_contract_btn_add');
        // 下单方法
        const { loading, addAction } = handleAdd();
        // 单位列表
        const unitList = getGoodsUnitList();
        const columns = [
            {
                dataIndex: 'type',
                key: 'type',
                slots: { title: 'customType', customRender: 'type' },
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'unit',
                key: 'unit',
                slots: { title: 'customUnit', customRender: 'unit' },
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'coefficient',
                key: 'coefficient',
                slots: { title: 'customCoefficient', customRender: 'coefficient' },
                width: 200,
                align: 'center',
            },
            {
                title: '操作',
                key: 'action',
                slots: { customRender: 'action' },
                align: 'center',
            },
        ];

        const dataSource = [
            {
                key: '1',
                type: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
                tags: ['nice', 'developer'],
            },
            {
                key: '2',
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
                tags: ['loser'],
            },
        ];

        const columns1 = [
            {
                dataIndex: 'type',
                key: 'type',
                slots: { title: 'customType', customRender: 'type' },
                width: 598,
                align: 'center',
            },
            {
                title: '操作',
                key: 'action',
                slots: { customRender: 'action' },
                align: 'center',
            },
        ];

        const dataSource1 = [
            {
                key: '1',
                type: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
                tags: ['nice', 'developer'],
            },
            {
                key: '2',
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
                tags: ['loser'],
            },
        ];
        function submit() {
            formRef.value
                .validate()
                .then(() => {
                    const param = toRaw(formState);
                    addAction(param);
                    console.log('param', param);
                })
                .catch((error: ValidateErrorEntity<FormState>) => {
                    console.log('error', error);
                });
        }

        // 表单
        const formRef = ref();
        const { formState, addOne, deleteOne } = handleFromState();
        const rules = {
            deliverygoodsname: [{ required: true, message: '请输入现货品种名称', trigger: 'blur' }],
            // unitid: [{ required: true, message: '请选择单位', trigger: 'change' }],
            unitid: [{ required: true, validator: validateUnit, trigger: 'change' }],
            gldwrstandards: {
                unitid: { required: true, validator: validateUnit, trigger: 'change' },
                wrstandardname: { required: true, message: '请输入品类', trigger: 'blur' },
                convertfactor: { required: true, message: '请输入标仓系数', trigger: 'blur' },
            },
            glddgfactoryItems: {
                dgfactoryitemvalue: { required: true, message: '请输入品牌', trigger: 'blur' },
            },
            wrsconvertdetails: {
                middlegoodsid: { required: true, validator: valideteWR, trigger: 'change' },
                convertratio: { required: true, message: '请输入套保系数', trigger: 'blur' },
            },
        };
        const { goodsGroup, getGoodsGroup } = handleGoodsGroup();
        /**
         * 切换套保品种时候，获取对应的单位
         */
        function middleChange(id: number, value: WRSConvertDetailEx) {
            const obj = goodsGroup.value.find((e) => e.groupcategroyid === id);
            if (obj) {
                value.unitidName = getGoodsUnit(obj.agreeunit);
                value.unitid = obj.agreeunit;
            }
        }
        initData(() => {
            getGoodsGroup();
        });
        return {
            visible,
            cancel,
            formRef,
            formState,
            addOne,
            deleteOne,
            rules,
            unitList,
            goodsGroup,
            middleChange,
            submit,
            loading,
            dataSource,
            columns,
            dataSource1,
            columns1,
            maskClosableFlag: false,
        };
    },
});
</script>

<style lang="less">
.addSpotVariety {
    width: 100%;
    height: 100%;
    // padding: 30px;
    .formFieldSet {
        border: 1px solid @m-grey19;
        padding: 0 20px 20px;
    }
    .formFieldSet + .formFieldSet {
        margin-top: 35px;
    }
    .ant-form {
        legend {
            width: auto;
            margin-left: 20px;
            font-size: 16px;
            color: @m-white0;
            border-bottom: 0;
            padding: 0 10px;
        }
    }
    .ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label {
        width: 120px !important;
    }
    .upload {
        display: inline-flex;
        .ant-btn.uploadBtn {
            width: 60px;
            height: 30px;
            background: @m-blue0;
            border: 0;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: @m-white0;
            .rounded-corners(3px);
            &:hover {
                background: rgba(@m-blue0, 0);
                color: rgba(@m-white0, 0.8);
            }
        }
        .look {
            color: @m-blue0;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .red {
        color: @m-red1;
    }
    .ant-btn.minusBtn,
    .ant-btn.plusBtn {
        width: 26px;
        height: 26px;
        .inlineflex;
        justify-content: center;
        background: @m-blue0;
        .rounded-corners(3px);
        border: 0;
        .anticon {
            font-size: 12px;
            color: @m-white0;
            align-self: center;
            align-items: center;
        }
        &:hover,
        &:focus {
            background: rgba(@m-blue0, 0.8);
            .anticon {
                color: rgba(@m-white0, 0.8);
            }
        }
    }
    .ant-btn.plusBtn {
        margin-right: 10px;
        background: transparent;
        border: 1px solid #3a87f7;
        .anticon {
            color: @m-blue0;
        }
    }
    .white {
        color: @m-white0;
    }
    .dialogTable {
        .ant-table {
            .ant-table-content {
                .ant-table-body {
                    table {
                        tr {
                            td {
                                padding: 0;
                                .ant-input.dialogInput {
                                    height: 34px;
                                    line-height: 34px;
                                    border: 0;
                                    border-radius: 0;
                                }
                                .dialogSelect.ant-select-single {
                                    float: left;
                                    margin-right: 0;
                                    .ant-select-selector {
                                        padding: 0 10px;
                                        height: 34px;
                                        background: @m-grey21;
                                        border: 0;
                                        border-radius: 0;
                                        .ant-select-selection-placeholder {
                                            color: @m-grey10;
                                            text-align: left;
                                        }
                                    }
                                    .ant-select-arrow {
                                        color: @m-blue0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>