forked from b2894lxlx/tuanwei-admin
完成合同管理模块和公共参数模块
This commit is contained in:
gxwebsoft
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<a-button type="primary" style="margin-bottom: 10px" @click="add">
|
||||
<span>添加</span>
|
||||
</a-button>
|
||||
<a-table
|
||||
size="middle"
|
||||
row-key="projectOrderId"
|
||||
:pagination="false"
|
||||
:data-source="list"
|
||||
:columns="columns"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'equipmentName'">
|
||||
<TowerSelectModel
|
||||
v-if="record.isEdit"
|
||||
:placeholder="`请选择设备名称`"
|
||||
v-model:value="record.equipmentName"
|
||||
:index="index"
|
||||
@done="chooseEquipmentName"
|
||||
/>
|
||||
<div v-else>{{ record.equipmentName }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'equipmentModel'">
|
||||
<TowerSelectModel
|
||||
v-if="record.isEdit"
|
||||
:placeholder="`请选择设备型号`"
|
||||
v-model:value="record.equipmentModel"
|
||||
@done="chooseEquipmentModel"
|
||||
/>
|
||||
<div v-else>{{ record.equipmentModel }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'equipmentNum'">
|
||||
<a-input
|
||||
v-if="record.isEdit"
|
||||
v-model:value="record.equipmentNum"
|
||||
placeholder="请输入预定数量"
|
||||
/>
|
||||
<div v-else>{{ record.equipmentNum }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'unit'">
|
||||
<a-input
|
||||
v-if="record.isEdit"
|
||||
v-model:value="record.unit"
|
||||
placeholder="请输入单位"
|
||||
/>
|
||||
<div v-else>{{ record.unit }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'startTime'">
|
||||
<a-date-picker
|
||||
v-if="record.isEdit"
|
||||
placeholder="预计进场时间"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="record.startTime"
|
||||
/>
|
||||
<div v-else>{{ record.startTime }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'endTime'">
|
||||
<a-date-picker
|
||||
v-if="record.isEdit"
|
||||
placeholder="预计退场时间"
|
||||
value-format="YYYY-MM-DD"
|
||||
v-model:value="record.endTime"
|
||||
/>
|
||||
<div v-else>{{ record.endTime }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'year'">
|
||||
<a-input-number
|
||||
v-if="record.isEdit"
|
||||
v-model:value="record.year"
|
||||
placeholder="出厂年限"
|
||||
/>
|
||||
<div v-else>{{ record.year }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'documenter'">
|
||||
<SelectStaff
|
||||
v-if="record.isEdit"
|
||||
:placeholder="`对应资料员`"
|
||||
:index="index"
|
||||
v-model:value="record.documenter"
|
||||
@done="chooseDocumenter"
|
||||
/>
|
||||
<div v-else>{{ record.documenter }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'comments'">
|
||||
<a-input
|
||||
v-if="record.isEdit"
|
||||
v-model:value="record.comments"
|
||||
placeholder="备注"
|
||||
/>
|
||||
<div v-else>{{ record.comments }}</div>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a v-if="record.isEdit" @click="done(record, index)">完成</a>
|
||||
<a v-else @click="edit(record, index)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此记录吗？"
|
||||
@confirm="remove(record, index)"
|
||||
>
|
||||
<a class="ele-text-danger">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { uuid } from 'ele-admin-pro/es';
|
||||
import type { ColumnsType } from 'ant-design-vue/es/table';
|
||||
import { ProjectOrder } from '@/api/tower/project/order/model';
|
||||
import { removeProjectOrder } from '@/api/tower/project/order';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value?: ProjectOrder[];
|
||||
projectId?: number;
|
||||
placeholder?: string;
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择数据'
|
||||
}
|
||||
);
|
||||
|
||||
// 已添加成员
|
||||
const list = ref<ProjectOrder[]>([]);
|
||||
// 请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 列
|
||||
const columns = reactive<ColumnsType>([
|
||||
{
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 30,
|
||||
customRender: ({ index }) => index + 1,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
align: 'center',
|
||||
dataIndex: 'equipmentName',
|
||||
key: 'equipmentName'
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
align: 'center',
|
||||
dataIndex: 'equipmentModel',
|
||||
key: 'equipmentModel'
|
||||
},
|
||||
{
|
||||
title: '签订数量',
|
||||
align: 'center',
|
||||
dataIndex: 'equipmentNum',
|
||||
key: 'equipmentNum',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
align: 'center',
|
||||
dataIndex: 'unit',
|
||||
key: 'unit',
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
title: '预计进场时间',
|
||||
align: 'center',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime'
|
||||
},
|
||||
{
|
||||
title: '预计进场时间',
|
||||
align: 'center',
|
||||
dataIndex: 'endTime',
|
||||
key: 'endTime'
|
||||
},
|
||||
{
|
||||
title: '出厂年限',
|
||||
align: 'center',
|
||||
dataIndex: 'year',
|
||||
key: 'year',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '对应资料员',
|
||||
align: 'center',
|
||||
dataIndex: 'documenter',
|
||||
key: 'documenter'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
align: 'center',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: 100
|
||||
}
|
||||
]);
|
||||
|
||||
/* 添加 */
|
||||
const add = () => {
|
||||
list.value.push({
|
||||
projectId: props.projectId,
|
||||
key: uuid(8),
|
||||
isEdit: true,
|
||||
equipmentNum: 1,
|
||||
unit: '台',
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
year: undefined,
|
||||
documenter: undefined,
|
||||
comments: undefined
|
||||
});
|
||||
};
|
||||
|
||||
const chooseEquipmentName = (data) => {
|
||||
list.value[data.index].equipmentName = data.name;
|
||||
list.value[data.index].equipmentModel = data.model;
|
||||
list.value[data.index].year = data.yearLife;
|
||||
};
|
||||
|
||||
const chooseEquipmentModel = (data) => {
|
||||
list.value[data.index].equipmentName = data.name;
|
||||
list.value[data.index].equipmentModel = data.model;
|
||||
list.value[data.index].year = data.yearLife;
|
||||
};
|
||||
|
||||
const chooseDocumenter = (data) => {
|
||||
list.value[data.index].documenter = data.nickname;
|
||||
};
|
||||
|
||||
/* 编辑 */
|
||||
const edit = (_row: any, index: number) => {
|
||||
list.value[index].isEdit = true;
|
||||
};
|
||||
|
||||
/* 完成编辑 */
|
||||
const done = (_row: any, index: number) => {
|
||||
list.value[index].isEdit = false;
|
||||
};
|
||||
|
||||
/* 删除 */
|
||||
const remove = (_row: any, index: number) => {
|
||||
console.log(_row);
|
||||
removeProjectOrder(_row.projectOrderId);
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(value) => {
|
||||
if (value) {
|
||||
list.value = value;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user