|
|
@@ -1,99 +1,108 @@
|
|
|
<template>
|
|
|
- <!--新增履约模板-->
|
|
|
- <Drawer
|
|
|
- :title="'新增履约模板'"
|
|
|
- :placement="'right'"
|
|
|
- :visible="visible"
|
|
|
- @cancel="cancel"
|
|
|
- class="top486"
|
|
|
- >
|
|
|
- <a-spin :spinning="loading">
|
|
|
- <div class="listed">
|
|
|
- <a-form class="inlineForm dialogForm">
|
|
|
- <div class="formBar">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="模版名称">
|
|
|
- <a-input
|
|
|
- class="commonInput"
|
|
|
- value="30天账期"
|
|
|
- style="width: 260px"
|
|
|
- />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-row class="tableTitle">
|
|
|
- <a-col :span="7">步骤类型</a-col>
|
|
|
- <a-col :span="6">步骤值(%)</a-col>
|
|
|
- <a-col :span="7">距离上一步天数</a-col>
|
|
|
- <a-col :span="4">操作</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row class="tableContent">
|
|
|
- <a-col :span="7">
|
|
|
- <a-select
|
|
|
- class="inlineFormSelect dialogTableSelect"
|
|
|
- style="width: 108px"
|
|
|
- placeholder="请选择"
|
|
|
- v-model:value="form.pay"
|
|
|
- >
|
|
|
- <a-select-option key="1" value="1">买方支付</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-input
|
|
|
- class="commonInput dialogTableInput"
|
|
|
- style="width: 100px"
|
|
|
- v-model:value="step1"
|
|
|
- ></a-input>
|
|
|
- </a-col>
|
|
|
- <a-col :span="7">
|
|
|
- <a-input
|
|
|
- class="commonInput dialogTableInput"
|
|
|
- style="width: 122px"
|
|
|
- v-model:value="day1"
|
|
|
- ></a-input>
|
|
|
- </a-col>
|
|
|
- <a-col :span="4">
|
|
|
- <svg class="icon svg-icon" aria-hidden="true">
|
|
|
- <use xlink:href="#icon-shanchu" />
|
|
|
- </svg>
|
|
|
- <PlusCircleOutlined />
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <div class="noticeTip">
|
|
|
- <div>注意事项:</div>
|
|
|
- <div>1、买方支付汇总值必须为100%;</div>
|
|
|
- <div>2、卖方收款汇总值必须为100%;</div>
|
|
|
- <div>3、配置卖方收款之前要有买方支付,且其值不能多于买方支付的值。</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="24" class="fixedBtns">
|
|
|
- <a-form-item class="btnCenter">
|
|
|
- <a-button class="listedBtn">确定</a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
+ <!--新增履约模板-->
|
|
|
+ <Drawer :title="'新增履约模板'"
|
|
|
+ :placement="'right'"
|
|
|
+ :visible="visible"
|
|
|
+ @cancel="cancel"
|
|
|
+ class="top486">
|
|
|
+ <a-spin :spinning="loading">
|
|
|
+ <div class="listed">
|
|
|
+ <a-form class="inlineForm dialogForm">
|
|
|
+ <div class="formBar">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="模版名称">
|
|
|
+ <a-input class="commonInput"
|
|
|
+ value="30天账期"
|
|
|
+ style="width: 260px" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row class="tableTitle">
|
|
|
+ <a-col :span="7">步骤类型</a-col>
|
|
|
+ <a-col :span="6">步骤值(%)</a-col>
|
|
|
+ <a-col :span="7">距离上一步天数</a-col>
|
|
|
+ <a-col :span="4">操作</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row class="tableContent"
|
|
|
+ v-for="(parent, index) in tableList"
|
|
|
+ :key="index + '11'">
|
|
|
+ <a-col :span="7">
|
|
|
+ <a-form-item :name="['domains',index, 'steptypeid']">
|
|
|
+ <a-select class="inlineFormSelect dialogTableSelect"
|
|
|
+ style="width: 108px"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="stepTypeChange(parent)"
|
|
|
+ v-model:value="parent.steptypeid">
|
|
|
+ <a-select-option v-for="item in list"
|
|
|
+ :key="item.steptypeid"
|
|
|
+ :value="item.steptypeid">{{item.steptypename}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item :name="['domains',index, 'stepvalue']">
|
|
|
+ <a-input-number class="commonInput dialogTableInput"
|
|
|
+ style="width: 100px"
|
|
|
+ type="number"
|
|
|
+ v-model:value="parent.stepvalue"></a-input-number>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="7">
|
|
|
+ <a-form-item :name="['domains',index, 'stepdays']">
|
|
|
+ <a-input-number class="commonInput dialogTableInput"
|
|
|
+ style="width: 122px"
|
|
|
+ type="number"
|
|
|
+ v-model:value="parent.stepdays"></a-input-number>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <svg class="icon svg-icon"
|
|
|
+ @click="deleteTemp(index)"
|
|
|
+ aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-shanchu" />
|
|
|
+ </svg>
|
|
|
+ <PlusCircleOutlined v-if="index === (tableList.length - 1)"
|
|
|
+ @click="addTemp(index)" />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <div class="noticeTip">
|
|
|
+ <div>注意事项:</div>
|
|
|
+ <div>1、买方支付汇总值必须为100%;</div>
|
|
|
+ <div>2、卖方收款汇总值必须为100%;</div>
|
|
|
+ <div>3、配置卖方收款之前要有买方支付,且其值不能多于买方支付的值。</div>
|
|
|
</div>
|
|
|
- </a-spin>
|
|
|
- </Drawer>
|
|
|
+ </div>
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24"
|
|
|
+ class="fixedBtns">
|
|
|
+ <a-form-item class="btnCenter">
|
|
|
+ <a-button class="listedBtn"
|
|
|
+ @click="submit">确定</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-spin>
|
|
|
+ </Drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { defineComponent, PropType, ref } from 'vue';
|
|
|
+import { defineComponent, PropType, reactive, ref, UnwrapRef } from 'vue';
|
|
|
import { Des } from '@/common/components/commonDes';
|
|
|
import { _closeModal } from '@/common/setup/modal/modal';
|
|
|
import Drawer from '@/common/components/drawer/index.vue';
|
|
|
import { PlusOutlined, MinusOutlined, SearchOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
|
|
|
-import { QueryWrFriendApplyRsp } from '@/services/go/wrtrade/interface';
|
|
|
+import { QueryWrFriendApplyRsp, QueryWrPerformanceStepTypeRsp } from '@/services/go/wrtrade/interface';
|
|
|
import { TempWrOrderQuoteDetail } from '@/views/market/spot_trade/components/post_buying/interface';
|
|
|
-import { queryQueryWrFriend } from '@/services/go/wrtrade';
|
|
|
+import { queryQueryWrFriend, queryWrPerformanceStepType } from '@/services/go/wrtrade';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
-
|
|
|
-interface FriendList extends QueryWrFriendApplyRsp {
|
|
|
- checked: boolean;
|
|
|
-}
|
|
|
+import { useQueryData } from '@/common/setup/request';
|
|
|
+import { AddPerformanceTemp, PerfomanceStempTempInfo } from '@/services/proto/performance/interface';
|
|
|
+import { validateAction } from '@/common/setup/form';
|
|
|
+import { PermanceTemp, PermanceTempForm } from './interface';
|
|
|
|
|
|
export default defineComponent({
|
|
|
emits: ['cancel', 'update'],
|
|
|
@@ -102,51 +111,38 @@ export default defineComponent({
|
|
|
setup(props, context) {
|
|
|
const { visible, cancel } = _closeModal(context);
|
|
|
const loading = ref<boolean>(false);
|
|
|
- const searchValue = ref<string>('');
|
|
|
- const myFriends = ref<FriendList[]>([]);
|
|
|
- // 模板字段
|
|
|
- const form = {
|
|
|
- pay: '1',
|
|
|
- step1: '',
|
|
|
- day1: '',
|
|
|
- };
|
|
|
- // 查询好友列表
|
|
|
- function queryMyFriend(value?: string) {
|
|
|
- loading.value = true;
|
|
|
- queryQueryWrFriend(value)
|
|
|
- .then((res) => {
|
|
|
- if (res) {
|
|
|
- myFriends.value = [];
|
|
|
- res.forEach((el) => {
|
|
|
- myFriends.value.push({ ...el, checked: false });
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err: string) => message.error(err))
|
|
|
- .finally(() => {
|
|
|
- loading.value = false;
|
|
|
- });
|
|
|
+ const { list } = useQueryData<QueryWrPerformanceStepTypeRsp>(queryWrPerformanceStepType);
|
|
|
+ const temp: PermanceTemp = { steptypeid: undefined, stepindex: 1, stepvalue: null, isauto: 0, remark: '', stepdays: null };
|
|
|
+ const tableList = ref<PermanceTemp[]>([temp]);
|
|
|
+ // 新增
|
|
|
+ function addTemp(index: number) {
|
|
|
+ tableList.value.push(temp);
|
|
|
+ }
|
|
|
+ // 删除
|
|
|
+ function deleteTemp(index: number) {
|
|
|
+ tableList.value.splice(index, 1);
|
|
|
}
|
|
|
- queryMyFriend();
|
|
|
- function getViewFriends() {
|
|
|
- if (searchValue.value) {
|
|
|
- return myFriends.value.filter((el) => String(el.frienduserid).includes(searchValue.value));
|
|
|
- } else {
|
|
|
- return myFriends.value;
|
|
|
+ function stepTypeChange(item: PermanceTemp) {
|
|
|
+ const stepType = list.value.find((el) => el.steptypeid === item.steptypeid)!;
|
|
|
+ const { steptypename } = stepType;
|
|
|
+ // 买方支付汇总值必须为100%;
|
|
|
+ // 卖方收款汇总值必须为100%;
|
|
|
+ if (steptypename === '买方支付汇总' || steptypename === '卖方收款汇总') {
|
|
|
+ item.stepvalue = 100;
|
|
|
}
|
|
|
}
|
|
|
+ // 表单
|
|
|
+ const formRef = ref();
|
|
|
+ const formState: UnwrapRef<PermanceTempForm> = reactive({ domains: [] });
|
|
|
+ const rules = {
|
|
|
+ domains: {
|
|
|
+ steptypeid: { required: true, message: '请选择步骤类型', trigger: 'change' },
|
|
|
+ stepvalue: { required: true, message: '请输入步骤值', trigger: 'blur' },
|
|
|
+ stepdays: { required: true, message: '请输入距离上一步天数', trigger: 'blur' },
|
|
|
+ },
|
|
|
+ };
|
|
|
function submit() {
|
|
|
- const result: string[] = [];
|
|
|
- myFriends.value.forEach((el) => {
|
|
|
- if (el.checked) {
|
|
|
- result.push(el.frienduserid);
|
|
|
- }
|
|
|
- });
|
|
|
- if (result.length) {
|
|
|
- context.emit('update', result);
|
|
|
- } else {
|
|
|
- message.warn('请选择朋友');
|
|
|
- }
|
|
|
+ validateAction<PermanceTempForm>(formRef, formState).then((res) => {});
|
|
|
}
|
|
|
function handleSearch(value: string) {
|
|
|
// const findResult = myFriends.value.find((e) => String(e.frienduserid).includes(value));
|
|
|
@@ -158,13 +154,15 @@ export default defineComponent({
|
|
|
}
|
|
|
return {
|
|
|
loading,
|
|
|
- myFriends,
|
|
|
+ list,
|
|
|
+ tableList,
|
|
|
+ addTemp,
|
|
|
+ deleteTemp,
|
|
|
+ stepTypeChange,
|
|
|
+
|
|
|
cancel,
|
|
|
visible,
|
|
|
submit,
|
|
|
- searchValue,
|
|
|
- getViewFriends,
|
|
|
- form,
|
|
|
};
|
|
|
},
|
|
|
});
|