|
|
@@ -60,7 +60,7 @@
|
|
|
<legend>品类信息</legend>
|
|
|
<a-table class="dialogTable" :columns="columns" :data-source="dataSource" :pagination="false">
|
|
|
<template #type>
|
|
|
- <a-input class="dialogInput"></a-input>
|
|
|
+ <a-input class="dialogInput" placeholder="请输入品类"></a-input>
|
|
|
</template>
|
|
|
<template #customType>
|
|
|
<span>
|
|
|
@@ -69,7 +69,14 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
<template #unit>
|
|
|
- <a-input class="dialogInput"></a-input>
|
|
|
+ <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>
|
|
|
@@ -78,7 +85,7 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
<template #coefficient>
|
|
|
- <a-input class="dialogInput"></a-input>
|
|
|
+ <a-input class="dialogInput" placeholder="请输入标仓系数"></a-input>
|
|
|
</template>
|
|
|
<template #customCoefficient>
|
|
|
<span>
|
|
|
@@ -87,8 +94,92 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
<template #action>
|
|
|
- <a-button class="minusBtn"></a-button>
|
|
|
- <a-button class="plusBtn"></a-button>
|
|
|
+ <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>
|
|
|
@@ -100,10 +191,14 @@
|
|
|
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: {},
|
|
|
+ components: {
|
|
|
+ PlusOutlined,
|
|
|
+ MinusOutlined,
|
|
|
+ },
|
|
|
setup() {
|
|
|
const { visible, cancel } = closeModal('addGoods');
|
|
|
const loading = ref<boolean>(false);
|
|
|
@@ -112,20 +207,28 @@ export default defineComponent({
|
|
|
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'
|
|
|
},
|
|
|
];
|
|
|
|
|
|
@@ -145,6 +248,39 @@ export default defineComponent({
|
|
|
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(() => {
|
|
|
@@ -159,7 +295,9 @@ export default defineComponent({
|
|
|
submit,
|
|
|
loading,
|
|
|
dataSource,
|
|
|
- columns
|
|
|
+ columns,
|
|
|
+ dataSource1,
|
|
|
+ columns1
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
@@ -172,7 +310,7 @@ export default defineComponent({
|
|
|
padding: 30px;
|
|
|
.formFieldSet {
|
|
|
border: 1px solid @m-grey19;
|
|
|
- padding: 0 20px;
|
|
|
+ padding: 0 20px 20px;
|
|
|
}
|
|
|
.formFieldSet+.formFieldSet {
|
|
|
margin-top: 35px;
|
|
|
@@ -217,5 +355,76 @@ export default defineComponent({
|
|
|
.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>
|
marymelisa