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

<template>
  <!-- 新增现货品种 -->
  <a-modal class="commonModal addSpotVariety"
           title="新增现货品种"
           v-model:visible="visible"
           @cancel="cancel"
           width="850px">
    <template #footer>
      <a-button key="submit"
                type="primary"
                :loading="loading"
                @click="submit">完成</a-button>
    </template>
    <a-form class="inlineForm">
      <fieldset class="formFieldSet">
        <legend>基本信息</legend>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="现货品种名称">
              <a-input class="dialogInput"
                      style="width: 200px"
                      placeholder="请输入现货品种名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="现货品种代码">
              <a-input class="dialogInput"
                      style="width: 200px"
                      placeholder="请输入现货品种代码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item label="单位">
              <a-select class="inlineFormSelect"
                        style="width: 200px"
                        placeholder="请选择单位">
                <a-select-option value="1">
                  客户一
                </a-select-option>
                <a-select-option value="2">
                  客户二
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="备注">
            <a-input class="dialogInput"
                     style="width: 562px"
                     placeholder="请输入备注" />
          </a-form-item>
        </a-col>
      </a-row>
      </fieldset>
      <fieldset class="formFieldSet">
        <legend>品类信息</legend>
        <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-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-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 } from 'vue';
import { closeModal, openModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods/index';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name: 'addSpotVariety',
    components: {
      PlusOutlined,
      MinusOutlined,
    },
    setup() {
        const { visible, cancel } = closeModal('addGoods');
        const loading = ref<boolean>(false);
        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() {
            loading.value = true;
            setTimeout(() => {
                loading.value = false;
                cancel();
            }, 2000);
        }
        initData(() => {});
        return {
            visible,
            cancel,
            submit,
            loading,
            dataSource,
            columns,
            dataSource1,
            columns1
        };
    },
});
</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, .8);
      .anticon {
        color: rgba(@m-white0, .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>