forked from b2894lxlx/tuanwei-admin
调整
This commit is contained in:
@@ -1,268 +1,302 @@
|
||||
<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>
|
||||
<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 { 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(
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value?: ProjectOrder[];
|
||||
projectId?: number;
|
||||
placeholder?: string;
|
||||
value?: ProjectOrder[];
|
||||
projectId?: number;
|
||||
placeholder?: string;
|
||||
placeList?: string[];
|
||||
}>(),
|
||||
{
|
||||
placeholder: '请选择数据'
|
||||
placeholder: "请选择数据"
|
||||
}
|
||||
);
|
||||
);
|
||||
|
||||
// 已添加成员
|
||||
const list = ref<ProjectOrder[]>([]);
|
||||
// 请求状态
|
||||
const loading = ref(false);
|
||||
// 已添加成员
|
||||
const list = ref<ProjectOrder[]>([]);
|
||||
// 请求状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 列
|
||||
const columns = reactive<ColumnsType>([
|
||||
// 列
|
||||
const columns = reactive<ColumnsType>([
|
||||
{
|
||||
key: 'index',
|
||||
align: 'center',
|
||||
width: 30,
|
||||
customRender: ({ index }) => index + 1,
|
||||
fixed: 'left'
|
||||
key: "index",
|
||||
align: "center",
|
||||
width: 30,
|
||||
customRender: ({ index }) => index + 1,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
align: 'center',
|
||||
dataIndex: 'equipmentName',
|
||||
key: 'equipmentName'
|
||||
title: "具体标地",
|
||||
align: "center",
|
||||
dataIndex: "comments",
|
||||
key: "comments"
|
||||
},
|
||||
{
|
||||
title: '规格型号',
|
||||
align: 'center',
|
||||
dataIndex: 'equipmentModel',
|
||||
key: 'equipmentModel'
|
||||
title: "设备名称",
|
||||
align: "center",
|
||||
dataIndex: "equipmentName",
|
||||
key: "equipmentName"
|
||||
},
|
||||
{
|
||||
title: '签订数量',
|
||||
align: 'center',
|
||||
dataIndex: 'equipmentNum',
|
||||
key: 'equipmentNum',
|
||||
width: 80
|
||||
title: "出厂编号",
|
||||
align: "center",
|
||||
dataIndex: "factoryNo",
|
||||
key: "factoryNo"
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
align: 'center',
|
||||
dataIndex: 'unit',
|
||||
key: 'unit',
|
||||
width: 60
|
||||
title: "规格型号",
|
||||
align: "center",
|
||||
dataIndex: "equipmentModel",
|
||||
key: "equipmentModel",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '预计进场时间',
|
||||
align: 'center',
|
||||
dataIndex: 'startTime',
|
||||
key: 'startTime'
|
||||
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: "endTime",
|
||||
key: "endTime"
|
||||
},
|
||||
{
|
||||
title: '出厂年限',
|
||||
align: 'center',
|
||||
dataIndex: 'year',
|
||||
key: 'year',
|
||||
width: 80
|
||||
title: "出厂年限",
|
||||
align: "center",
|
||||
dataIndex: "year",
|
||||
key: "year",
|
||||
width: 80
|
||||
},
|
||||
// {
|
||||
// title: '对应资料员',
|
||||
// align: 'center',
|
||||
// dataIndex: 'documenter',
|
||||
// key: 'documenter'
|
||||
// },
|
||||
{
|
||||
title: '对应资料员',
|
||||
align: 'center',
|
||||
dataIndex: 'documenter',
|
||||
key: 'documenter'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
align: 'center',
|
||||
dataIndex: 'comments',
|
||||
key: 'comments'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: 100
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
width: 100
|
||||
}
|
||||
]);
|
||||
]);
|
||||
|
||||
/* 添加 */
|
||||
const add = () => {
|
||||
/* 添加 */
|
||||
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
|
||||
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) => {
|
||||
list.value[data.index].equipmentName = data.name;
|
||||
list.value[data.index].equipmentModel = data.model;
|
||||
list.value[data.index].year = data.yearLife;
|
||||
};
|
||||
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 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) => {
|
||||
const chooseDocumenter = (data) => {
|
||||
list.value[data.index].documenter = data.nickname;
|
||||
};
|
||||
};
|
||||
|
||||
/* 编辑 */
|
||||
const edit = (_row: any, index: number) => {
|
||||
/* 编辑 */
|
||||
const edit = (_row: any, index: number) => {
|
||||
list.value[index].isEdit = true;
|
||||
};
|
||||
};
|
||||
|
||||
/* 完成编辑 */
|
||||
const done = (_row: any, index: number) => {
|
||||
/* 完成编辑 */
|
||||
const done = (_row: any, index: number) => {
|
||||
list.value[index].isEdit = false;
|
||||
};
|
||||
};
|
||||
|
||||
/* 删除 */
|
||||
const remove = (_row: any, index: number) => {
|
||||
/* 删除 */
|
||||
const remove = (_row: any, index: number) => {
|
||||
removeProjectOrder(_row.projectOrderId).then((msg) => {
|
||||
message.success(msg);
|
||||
message.success(msg);
|
||||
});
|
||||
list.value.splice(index, 1);
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => props.value,
|
||||
(value) => {
|
||||
if (value) {
|
||||
list.value = value;
|
||||
}
|
||||
if (value) {
|
||||
list.value = value;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user