|
@@ -1,104 +1,216 @@
|
|
|
<template>
|
|
|
- <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1024" @ok="handleSubmit">
|
|
|
- <BasicForm @register="registerForm" ref="formRef" name="CuspSupplierEvaluationForm"/>
|
|
|
- <!-- 子表单区域 -->
|
|
|
- <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs">
|
|
|
- <a-tab-pane tab="供应商考评-得分" key="cuspSupplierEvaluationScore" :forceRender="true">
|
|
|
- <JVxeTable
|
|
|
- keep-source
|
|
|
- resizable
|
|
|
- ref="cuspSupplierEvaluationScore"
|
|
|
- :loading="cuspSupplierEvaluationScoreTable.loading"
|
|
|
- :columns="cuspSupplierEvaluationScoreTable.columns"
|
|
|
- :dataSource="cuspSupplierEvaluationScoreTable.dataSource"
|
|
|
- :height="340"
|
|
|
- :rowNumber="true"
|
|
|
- :rowSelection="true"
|
|
|
- :disabled="formDisabled"
|
|
|
- :toolbar="true"
|
|
|
- />
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
- </BasicModal>
|
|
|
+ <a-modal
|
|
|
+ :title="title"
|
|
|
+ width="95%"
|
|
|
+ :visible="visible"
|
|
|
+ :maskClosable="false"
|
|
|
+ switchFullscreen
|
|
|
+ @ok = "handleOk"
|
|
|
+ @cancel="handleCancel">
|
|
|
+ <template #footer>
|
|
|
+ <a-button @click="handleCancel" >关闭(close)</a-button>
|
|
|
+ <a-button @click="handleOk" type="primary" v-if="showFooter">保存(save)</a-button>
|
|
|
+ </template>
|
|
|
+ <div style=" padding: 16px;">
|
|
|
+ <a-form ref="form" :model="model" :rules="validatorRules">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billDate" label="单据日期(billDate)">
|
|
|
+ <a-date-picker v-model:value="model.billDate" show-time valueFormat="YYYY-MM-DD HH:mm:ss" format='YYYY-MM-DD HH:mm:ss' style="width: 100%;" :disabled="!showFooter"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="evaluationPeriod" label="考评期间(evaluation period)">
|
|
|
+ <a-date-picker v-model:value="model.evaluationPeriod" valueFormat="YYYY" picker="year" style="width: 100%;" :disabled="!showFooter"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplierId" label="供应商(supplier)">
|
|
|
+ <JSelectInput v-model:value="model.supplierId" placeholder="请选择" :options="supplierOptions" :disabled="!showFooter"></JSelectInput>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billCode" label="考评单号(bill code)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="model.billCode" AutoComplete='off' :disabled="!showFooter"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="evaluationLevel" label="考评等级(evaluation level)">
|
|
|
+ <JDictSelectTag v-model:value="model.evaluationLevel" placeholder="请选择" dictCode="grade" :disabled="!showFooter"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
|
|
|
+ <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="notes" label="备注(notes)">
|
|
|
+ <a-input placeholder="请输入" v-model:value="model.notes" AutoComplete='off' :disabled="!showFooter"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <!-- 子表单区域 -->
|
|
|
+ <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs" style=" padding: 24px;padding-top: 0px;">
|
|
|
+ <a-tab-pane tab="供应商考评-得分" key="cuspSupplierEvaluationScore" :forceRender="true">
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :row-key="record => record.id"
|
|
|
+ :data-source="dataSource"
|
|
|
+ bordered
|
|
|
+ size="small"
|
|
|
+ height="500"
|
|
|
+ :pagination="false"
|
|
|
+ :scroll="{ x: 1500, y: 500 }"
|
|
|
+ >
|
|
|
+ <template #totalScore="{ text, record,index }">
|
|
|
+ <a-input placeholder="请输入" v-model:value="model.priceScore" AutoComplete='off' v-if="record.item=='价格(price)'" @change="changeTotal" :disabled="!showFooter"/>
|
|
|
+ <a-input placeholder="请输入" v-model:value="model.qualityScore" AutoComplete='off' v-if="record.item=='质量(quality)'" @change="changeTotal" :disabled="!showFooter"/>
|
|
|
+ <a-input placeholder="请输入" v-model:value="model.deliveryTimeScore" AutoComplete='off' v-if="record.item=='交期(delivery time)'" @change="changeTotal" :disabled="!showFooter"/>
|
|
|
+ <a-input placeholder="请输入" v-model:value="model.serviceScore" AutoComplete='off' v-if="record.item=='服务(service)'" @change="changeTotal" :disabled="!showFooter"/>
|
|
|
+ <span v-if="record.item=='合计(total)'">{{ model.totalScore }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import {ref, computed, unref,reactive} from 'vue';
|
|
|
- import {BasicModal, useModalInner} from '/@/components/Modal';
|
|
|
- import {BasicForm, useForm} from '/@/components/Form/index';
|
|
|
- import { JVxeTable } from '/@/components/jeecg/JVxeTable'
|
|
|
- import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts'
|
|
|
- import {formSchema,cuspSupplierEvaluationScoreColumns} from '../CuspSupplierEvaluation.data';
|
|
|
+ import { defHttp } from '/@/utils/http/axios';
|
|
|
+ import {formSchema,cuspSupplierEvaluationScoreColumns,supplierOptions} from '../CuspSupplierEvaluation.data';
|
|
|
import {saveOrUpdate,cuspSupplierEvaluationScoreList} from '../CuspSupplierEvaluation.api';
|
|
|
- import { VALIDATE_FAILED } from '/@/utils/common/vxeUtils'
|
|
|
+ import { JDictSelectTag } from '/@/components/Form';
|
|
|
+ import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
|
|
|
// Emits声明
|
|
|
const emit = defineEmits(['register','success']);
|
|
|
const isUpdate = ref(true);
|
|
|
- const formDisabled = ref(false);
|
|
|
+ const visible = ref(false);
|
|
|
const refKeys = ref(['cuspSupplierEvaluationScore', ]);
|
|
|
const activeKey = ref('cuspSupplierEvaluationScore');
|
|
|
const cuspSupplierEvaluationScore = ref();
|
|
|
- const tableRefs = {cuspSupplierEvaluationScore, };
|
|
|
- const cuspSupplierEvaluationScoreTable = reactive({
|
|
|
- loading: false,
|
|
|
- dataSource: [],
|
|
|
- columns:cuspSupplierEvaluationScoreColumns
|
|
|
- })
|
|
|
- //表单配置
|
|
|
- const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
|
|
|
- schemas: formSchema,
|
|
|
- showActionButtonGroup: false,
|
|
|
- baseColProps: {span: 8}
|
|
|
+ const labelCol = ref({
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 8 },
|
|
|
+ });
|
|
|
+ const wrapperCol = ref({
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 16 },
|
|
|
});
|
|
|
- //表单赋值
|
|
|
- const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
|
|
|
- //重置表单
|
|
|
- await reset();
|
|
|
- setModalProps({confirmLoading: false,showCancelBtn:data?.showFooter,showOkBtn:data?.showFooter});
|
|
|
- isUpdate.value = !!data?.isUpdate;
|
|
|
- formDisabled.value = !data?.showFooter;
|
|
|
- if (unref(isUpdate)) {
|
|
|
- //表单赋值
|
|
|
- await setFieldsValue({
|
|
|
- ...data.record,
|
|
|
- });
|
|
|
- requestSubTableData(cuspSupplierEvaluationScoreList, {id:data?.record?.id}, cuspSupplierEvaluationScoreTable)
|
|
|
- }
|
|
|
- // 隐藏底部时禁用整个表单
|
|
|
- setProps({ disabled: !data?.showFooter })
|
|
|
+ var showFooter= ref(true);
|
|
|
+ var model = ref({
|
|
|
+ billDate:'',
|
|
|
+ evaluationPeriod:'',
|
|
|
+ supplierId:'',
|
|
|
+ billCode:'',
|
|
|
+ evaluationLevel:'',
|
|
|
+ notes:'',
|
|
|
+ priceScore:'',
|
|
|
+ qualityScore:'',
|
|
|
+ deliveryTimeScore:'',
|
|
|
+ serviceScore:'',
|
|
|
+ totalScore:'',
|
|
|
});
|
|
|
- //方法配置
|
|
|
- const [handleChangeTabs,handleSubmit,requestSubTableData,formRef] = useJvxeMethod(requestAddOrEdit,classifyIntoFormData,tableRefs,activeKey,refKeys);
|
|
|
-
|
|
|
- //设置标题
|
|
|
- const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(formDisabled) ? '编辑' : '详情'));
|
|
|
-
|
|
|
- async function reset(){
|
|
|
- await resetFields();
|
|
|
- activeKey.value = 'cuspSupplierEvaluationScore';
|
|
|
- cuspSupplierEvaluationScoreTable.dataSource = [];
|
|
|
- }
|
|
|
- function classifyIntoFormData(allValues) {
|
|
|
- let main = Object.assign({}, allValues.formValue)
|
|
|
- return {
|
|
|
- ...main, // 展开
|
|
|
- cuspSupplierEvaluationScoreList: allValues.tablesValue[0].tableData,
|
|
|
- }
|
|
|
- }
|
|
|
- //表单提交事件
|
|
|
- async function requestAddOrEdit(values) {
|
|
|
- try {
|
|
|
- setModalProps({confirmLoading: true});
|
|
|
- //提交表单
|
|
|
- await saveOrUpdate(values, isUpdate.value);
|
|
|
- //关闭弹窗
|
|
|
- closeModal();
|
|
|
- //刷新列表
|
|
|
- emit('success');
|
|
|
- } finally {
|
|
|
- setModalProps({confirmLoading: false});
|
|
|
- }
|
|
|
- }
|
|
|
+ var validatorRules = ref({});
|
|
|
+ var title = ref('');
|
|
|
+ const tableRefs = {cuspSupplierEvaluationScore, };
|
|
|
+ var dataSource = ref([
|
|
|
+ {item:'价格(price)',weight:'3',automaticData:'',totalScore:''},
|
|
|
+ {item:'质量(quality)',weight:'3',automaticData:'退货数量/入库数量(return/inventory):10/100',totalScore:''},
|
|
|
+ {item:'交期(delivery time)',weight:'2',automaticData:'延迟次数/发货次数(delay/deliver):5/45',totalScore:''},
|
|
|
+ {item:'服务(service)',weight:'2',automaticData:'',totalScore:''},
|
|
|
+ {item:'合计(total)',weight:'10',automaticData:'',totalScore:'',},
|
|
|
+ ]);
|
|
|
+ var columns = reactive([
|
|
|
+ {
|
|
|
+ title: '项目(item)',
|
|
|
+ dataIndex: 'item',
|
|
|
+ key: 'item',
|
|
|
+ align:"center",
|
|
|
+ ellipsis: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '权重(weight)',
|
|
|
+ dataIndex: 'weight',
|
|
|
+ key: 'weight',
|
|
|
+ align:"center"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '自动取数(automatic data)',
|
|
|
+ dataIndex: 'automaticData',
|
|
|
+ key: 'automaticData',
|
|
|
+ align:"center",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总计得分(total score)',
|
|
|
+ key: 'totalScore',
|
|
|
+ dataIndex: 'totalScore',
|
|
|
+ align:"center",
|
|
|
+ slots: { customRender: 'totalScore' },
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ function handleChangeTabs(key: string) {
|
|
|
+ activeKey.value = key;
|
|
|
+ }
|
|
|
+ async function handleOk(){
|
|
|
+ await saveOrUpdate(model.value, isUpdate.value);
|
|
|
+ //关闭弹窗
|
|
|
+ handleCancel();
|
|
|
+ //刷新列表
|
|
|
+ emit('success');
|
|
|
+ }
|
|
|
+ function handleCancel(){
|
|
|
+ visible.value = false
|
|
|
+ model.value = {
|
|
|
+ billDate:'',
|
|
|
+ evaluationPeriod:'',
|
|
|
+ supplierId:'',
|
|
|
+ billCode:'',
|
|
|
+ evaluationLevel:'',
|
|
|
+ notes:'',
|
|
|
+ priceScore:'',
|
|
|
+ qualityScore:'',
|
|
|
+ deliveryTimeScore:'',
|
|
|
+ serviceScore:'',
|
|
|
+ totalScore:'',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function getAdd(){
|
|
|
+ visible.value = true
|
|
|
+ title.value = '新增(add)'
|
|
|
+ isUpdate.value = false;
|
|
|
+ showFooter.value = true
|
|
|
+ }
|
|
|
+ function getEdit(record){
|
|
|
+ visible.value = true
|
|
|
+ title.value = '编辑(edit)'
|
|
|
+ isUpdate.value = true;
|
|
|
+ showFooter.value = true
|
|
|
+ model.value = record
|
|
|
+ model.value.priceScore = model.value.priceScore?model.value.priceScore:'0'
|
|
|
+ model.value.qualityScore = model.value.qualityScore?model.value.qualityScore:'0'
|
|
|
+ model.value.deliveryTimeScore = model.value.deliveryTimeScore?model.value.deliveryTimeScore:'0'
|
|
|
+ model.value.serviceScore = model.value.serviceScore?model.value.serviceScore:'0'
|
|
|
+ }
|
|
|
+ function changeTotal(){
|
|
|
+ var total = 0
|
|
|
+ total = Number(model.value.priceScore)+Number(model.value.qualityScore)+Number(model.value.deliveryTimeScore)+Number(model.value.serviceScore)
|
|
|
+ model.value.totalScore = total.toString()
|
|
|
+ }
|
|
|
+ function getDetail(record){
|
|
|
+ visible.value = true
|
|
|
+ title.value = '详情(detail)'
|
|
|
+ isUpdate.value = true;
|
|
|
+ showFooter.value = false
|
|
|
+ model.value = record
|
|
|
+ model.value.priceScore = model.value.priceScore?model.value.priceScore:'0'
|
|
|
+ model.value.qualityScore = model.value.qualityScore?model.value.qualityScore:'0'
|
|
|
+ model.value.deliveryTimeScore = model.value.deliveryTimeScore?model.value.deliveryTimeScore:'0'
|
|
|
+ model.value.serviceScore = model.value.serviceScore?model.value.serviceScore:'0'
|
|
|
+ }
|
|
|
+ defineExpose({
|
|
|
+ getAdd,
|
|
|
+ getEdit,
|
|
|
+ getDetail
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
@@ -110,4 +222,14 @@
|
|
|
:deep(.ant-calendar-picker) {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+ /deep/.vxe-table--body-wrapper{
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ /deep/.ant-modal-body{
|
|
|
+ padding: 24px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.ant-form-item{
|
|
|
+ margin-bottom: 8px !important;
|
|
|
+ }
|
|
|
</style>
|