forked from b2894lxlx/tuanwei-admin
303 lines
9.6 KiB
Vue
303 lines
9.6 KiB
Vue
<template>
|
|
<a-spin :spinning="loading">
|
|
<a-button type="primary" style="margin-bottom: 10px" @click="add" :disabled="placeList?.length === 0">
|
|
<span>添加</span>
|
|
</a-button>
|
|
<p style="color: red" v-if="placeList?.length === 0">请先添加标地</p>
|
|
<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'">
|
|
<TowerEquipmentModel
|
|
v-if="record.isEdit"
|
|
:placeholder="`请选择设备`"
|
|
v-model:value="record.equipmentName"
|
|
:index="index"
|
|
idle-only
|
|
@done="chooseEquipmentName($event, index)"
|
|
/>
|
|
<div v-else>{{ record.equipmentName }}</div>
|
|
</template>
|
|
<template v-else-if="column.key === 'equipmentModel'">
|
|
<a-input
|
|
v-if="record.isEdit"
|
|
v-model:value="record.equipmentModel"
|
|
placeholder="设备型号"
|
|
readonly
|
|
/>
|
|
<div v-else>{{ record.equipmentModel }}</div>
|
|
</template>
|
|
<template v-else-if="column.key === 'factoryNo'">
|
|
<a-input
|
|
v-if="record.isEdit"
|
|
v-model:value="record.factoryNo"
|
|
placeholder="出厂编号"
|
|
readonly
|
|
/>
|
|
<div v-else>{{ record.factoryNo }}</div>
|
|
</template>
|
|
<template v-else-if="column.key === 'filingNo'">
|
|
<a-input
|
|
v-if="record.isEdit"
|
|
v-model:value="record.filingNo"
|
|
placeholder="备案编号"
|
|
readonly
|
|
/>
|
|
<div v-else>{{ record.filingNo }}</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-select v-if="record.isEdit" v-model:value="record.comments" placeholder="请选择标地">
|
|
<a-select-option :value="item" v-for="(item, index) in placeList" :key="index">{{ item }}</a-select-option>
|
|
</a-select>
|
|
<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";
|
|
import { message } from "ant-design-vue";
|
|
import { TowerEquipment } from "@/api/tower/equipment/model";
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
value?: ProjectOrder[];
|
|
projectId?: number;
|
|
placeholder?: string;
|
|
placeList?: 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: "comments",
|
|
key: "comments"
|
|
},
|
|
{
|
|
title: "设备名称",
|
|
align: "center",
|
|
dataIndex: "equipmentName",
|
|
key: "equipmentName"
|
|
},
|
|
{
|
|
title: "出厂编号",
|
|
align: "center",
|
|
dataIndex: "factoryNo",
|
|
key: "factoryNo"
|
|
},
|
|
{
|
|
title: "规格型号",
|
|
align: "center",
|
|
dataIndex: "equipmentModel",
|
|
key: "equipmentModel",
|
|
width: 200
|
|
},
|
|
{
|
|
title: "备案编号",
|
|
align: "center",
|
|
dataIndex: "filingNo",
|
|
key: "filingNo",
|
|
width: 200
|
|
},
|
|
// {
|
|
// title: '签订数量',
|
|
// align: 'center',
|
|
// dataIndex: 'equipmentNum',
|
|
// key: 'equipmentNum',
|
|
// width: 80
|
|
// },
|
|
// {
|
|
// title: '单位',
|
|
// align: 'center',
|
|
// dataIndex: 'unit',
|
|
// key: 'unit',
|
|
// width: 100
|
|
// },
|
|
{
|
|
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: "操作",
|
|
key: "action",
|
|
align: "center",
|
|
width: 100
|
|
}
|
|
]);
|
|
|
|
/* 添加 */
|
|
const add = () => {
|
|
list.value.push({
|
|
projectId: props.projectId,
|
|
key: uuid(8),
|
|
isEdit: true,
|
|
equipmentNum: 1,
|
|
filingNo: undefined,
|
|
unit: "台",
|
|
startTime: undefined,
|
|
endTime: undefined,
|
|
year: undefined,
|
|
documenter: undefined,
|
|
comments: undefined
|
|
});
|
|
};
|
|
|
|
const chooseEquipmentName = (data: TowerEquipment, index: number) => {
|
|
if (list.value.find((row) => row.equipmentId === data.equipmentId && !row.endTime)) return message.error('该设备已存在')
|
|
list.value[index].equipmentId = data.equipmentId;
|
|
list.value[index].equipmentName = data.name;
|
|
list.value[index].equipmentModel = data.model;
|
|
list.value[index].year = data.lifeYear;
|
|
list.value[index].filingNo = data.filingNo;
|
|
list.value[index].factoryNo = data.factoryNo;
|
|
};
|
|
|
|
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) => {
|
|
removeProjectOrder(_row.projectOrderId).then((msg) => {
|
|
message.success(msg);
|
|
});
|
|
list.value.splice(index, 1);
|
|
};
|
|
|
|
watch(
|
|
() => props.value,
|
|
(value) => {
|
|
if (value) {
|
|
list.value = value;
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|