2023-08-30 14:14:15 +08:00

858 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="table-box">
<ProTable
ref="proTable"
title="设备管理"
:columns="columns"
:requestApi="getTableList"
:dataCallback="dataCallback"
:tool-button="false"
:pagination="true"
background
:isShowSearch="false"
:initParam="initParam"
:onReset="true"
>
<template #formButton="scope">
<el-button class="addButtonStyle" @click="handleAddItem">新增</el-button>
</template>
<template #operation="{ row }">
<el-button type="primary" link @click="handleLookItem(row)">
<img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" />
<span>查看</span>
</el-button>
<el-button type="primary" link @click="handleEditItem(row)">
<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
<span>编辑</span>
</el-button>
<el-button type="danger" link :icon="Delete" @click="handleDeleteItem(row)">删除</el-button>
</template>
<template #state="{ row }">
<span :class="row.state === 1 ? '' : 'redText'">{{ row.state == 1 ? "启用" : "禁用" }}</span>
</template>
</ProTable>
<el-dialog :title="title" show-close v-model="newUnitDialog" style="min-width: 1200px">
<el-form ref="formRef" :model="formData" label-width="180px" :rules="rules" class="basic-form" size="default">
<!-- <el-form ref="formDataRef" :model="formData" label-width="150px" class="basic-form"> -->
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="设备名称:" prop="devName">
<el-input v-model="formData.devName" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安装日期:" prop="installTime">
<el-date-picker
:disabled="title == '查看设备'"
style="width: 100%"
v-model="formData.installTime"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
type="date"
placeholder="请选择"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="黑匣子信息:" prop="blackBox">
<el-input v-model="formData.blackBox" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结构类型:" prop="structureType">
<el-select
v-model="formData.structureType"
:disabled="title == '查看设备'"
placeholder="请选择"
style="width: 100%"
>
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="设备使用状态:" prop="useState">
<el-select v-model="formData.useState" :disabled="title == '查看设备'" placeholder="请选择" style="width: 100%">
<el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备图片:" prop="installImage">
<div class="face-img">
<el-upload
class="face-uploader"
:action="`${baseUrl}` + '/xmgl/file/upload'"
:show-file-list="false"
:on-success="(response, uploadFile) => handleAvatarSuccess(response, uploadFile)"
accept="image/jpg, image/jpeg, image/png"
>
<img v-if="formData.installImage" :src="formData.installImage" class="face-avatar" />
<el-icon v-else><plus /></el-icon>
</el-upload>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="是否外地设备:" prop="isForeignDev">
<el-radio-group placeholder="请选择" v-model="formData.isForeignDev" :disabled="title == '查看设备'">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否全新设备:" prop="isNewDev">
<el-radio-group placeholder="请选择" v-model="formData.isNewDev" :disabled="title == '查看设备'">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="规格型号:" prop="model">
<el-input v-model="formData.model" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="许可证发证机关:" prop="licensingAuthority">
<el-input v-model="formData.licensingAuthority" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="出厂(合格证):" prop="factoryCertificate">
<el-input v-model="formData.factoryCertificate" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工作幅度(m):" prop="workingRange">
<el-input v-model="formData.workingRange" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="最大额定起重量(kg):" prop="maxLiftingCapacity">
<el-input v-model="formData.maxLiftingCapacity" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="独立起升高度(m):" prop="independentLiftingHeight">
<el-input v-model="formData.independentLiftingHeight" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="购置日期:" prop="acquisitionDate">
<el-date-picker
:disabled="title == '查看设备'"
style="width: 100%"
v-model="formData.acquisitionDate"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
type="date"
placeholder="请选择时间"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="编号有效期:" prop="numberValidityPeriod">
<el-date-picker
:disabled="title == '查看设备'"
style="width: 100%"
v-model="formData.numberValidityPeriod"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
type="date"
placeholder="请选择时间"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="设备原值:" prop="originalValue">
<el-input v-model.number="formData.originalValue" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备改造次数:" prop="renovations">
<el-input v-model.number="formData.renovations" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="发票编码:" prop="invoiceCode">
<el-input v-model="formData.invoiceCode" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="购买合同编码:" prop="contractCode">
<el-input v-model="formData.contractCode" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="生产厂家:" prop="manufacturer">
<el-input v-model="formData.manufacturer" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出厂日期:" prop="productionDate">
<el-date-picker
:disabled="title == '查看设备'"
style="width: 100%"
v-model="formData.productionDate"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
type="date"
placeholder="请选择时间"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="制造许可证编号:" prop="manufacturerLicense">
<el-input v-model="formData.manufacturerLicense" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否为原购产品:" prop="isOriginalProduct">
<el-radio-group placeholder="请选择" v-model="formData.isOriginalProduct" :disabled="title == '查看设备'">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="设备用途:" prop="useTo">
<el-input v-model="formData.useTo" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="前臂长:" prop="forearmLength">
<el-input v-model="formData.forearmLength" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="后臂长:" prop="posteriorArmLength">
<el-input v-model="formData.posteriorArmLength" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="塔身高度:" prop="towerHeight">
<el-input v-model="formData.towerHeight" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="前臂永久性标识:" prop="forearmFlag">
<el-input v-model="formData.forearmFlag" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="后臂永久性标识:" prop="rearArmFlag">
<el-input v-model="formData.rearArmFlag" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="塔帽永久性标识:" prop="towerCapFlag">
<el-input v-model="formData.towerCapFlag" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上转台永久性标识:" prop="upwardTurntableFlag">
<el-input v-model="formData.upwardTurntableFlag" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="120">
<el-col :span="12">
<el-form-item label="下转台永久性标识:" prop="lowerTurntableFlag">
<el-input v-model="formData.lowerTurntableFlag" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="标准节点永久性标识:" prop="mastSectionFlag">
<el-input v-model="formData.mastSectionFlag" placeholder="请输入" :disabled="title == '查看设备'" />
</el-form-item>
</el-col>
</el-row>
<footer class="footer flx-center" v-if="title != '查看设备'">
<el-button class="cancelButtonStyle" @click="newUnitDialog = false">取消</el-button>
<el-button type="primary" @click="submitForm(formData)">保存</el-button>
</footer>
</el-form>
</el-dialog>
<!-- 侧边栏选择 -->
<engineeringEngDrawer v-model="engVisable" ref="engDrawer" :engList="engList">
<template #default="{ data }">
<span style="margin-left: 10px" @click="onUpdate(data)">{{ data.engineeringName }}</span>
</template>
</engineeringEngDrawer>
<allEngineering @click="engVisable = true" />
</div>
</template>
<script setup lang="tsx" name="ProjectSupervisionRecord">
import { ref, reactive, nextTick, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import type { UploadProps } from "element-plus";
import { useRouter } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import { jxj_User } from "@/api/types";
import { getRelevanceList } from "@/api/modules/common";
import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
import allEngineering from "@/components/allEngineering/index.vue";
import { towerCraneEquipAdd, towerCraneEquipEdit, towerCraneEquipDel, towerCraneEquipPage } from "@/api/modules/enterpriseApi";
import { GlobalStore } from "@/stores";
import { Delete } from "@element-plus/icons-vue";
const baseUrl = import.meta.env.VITE_API_URL;
const typeList = ref([
{ label: "尖头塔", value: 1 },
{ label: "平头塔", value: 2 },
{ label: "动臂塔", value: 3 }
]);
const stateList = ref([
{ label: "设备进场", value: 1 },
{ label: "设备安装", value: 2 },
{ label: "设备验收", value: 3 },
{ label: "设备使用", value: 4 },
{ label: "设备拆除", value: 5 },
{ label: "设备退场", value: 6 }
]);
const engList = ref([]);
const engVisable = ref(false);
const searchSn = ref("");
const changeType = ref(1);
const datas = reactive([]);
const formRef = ref<FormInstance>();
const router = useRouter();
const store = GlobalStore();
const drawerVisible = ref(false);
const title = ref("");
const newUnitDialog = ref(false);
// 如果表格需要初始化请求参数,直接定义传给 ProTable(之后每次请求都会自动带上该参数,此参数更改之后也会一直带上,改变此参数会自动刷新表格数据)
const initParam = reactive({
engineeringSn: ""
});
const formData = ref({
devName: "",
installTime: "",
blackBox: "",
structureType: "",
useState: "",
installImage: "",
isForeignDev: 0,
isNewDev: 0,
model: "",
licensingAuthority: "",
factoryCertificate: "",
workingRange: "",
maxLiftingCapacity: "",
independentLiftingHeight: "",
acquisitionDate: "",
numberValidityPeriod: "",
originalValue: "",
renovations: "",
invoiceCode: "",
contractCode: "",
manufacturer: "",
productionDate: "",
manufacturerLicense: "",
isOriginalProduct: 0,
useTo: "",
forearmLength: "",
posteriorArmLength: "",
towerHeight: "",
forearmFlag: "",
rearArmFlag: "",
towerCapFlag: "",
upwardTurntableFlag: "",
lowerTurntableFlag: "",
mastSectionFlag: ""
});
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数)
const proTable = ref();
const getId = ref<number | undefined>(undefined);
// 表格配置项
const columns: ColumnProps[] = [
{ type: "index", label: "序号", width: 80 },
{
prop: "devName",
label: "设备名称",
search: { el: "input" }
},
{
prop: "installTime",
label: "安装时间",
search: {
el: "date-picker",
props: {
type: "daterange",
format: "YYYY-MM-DD",
valueFormat: "YYYY-MM-DD"
// defaultTime: defaultTime2
}
}
},
{ prop: "blackBox", label: "黑匣子信息" },
{ prop: "operation", label: "操作", fixed: "right", width: 260 }
];
const rules = ref({
devName: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
installTime: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
blackBox: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
structureType: [
{
required: true,
message: "请输入",
trigger: "change"
}
],
installImage: [
{
required: true,
message: "请上传",
trigger: "change"
}
],
isForeignDev: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
isNewDev: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
model: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
factoryCertificate: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
workingRange: [
{
required: true,
message: "请输入",
trigger: "blur"
},
{
pattern: /^\d+(\.\d2)?$/,
message: "请输入整数或小数点后两位小数",
trigger: "blur"
}
],
maxLiftingCapacity: [
{
required: true,
message: "请输入",
trigger: "blur"
},
{
pattern: /^\d+(\.\d2)?$/,
message: "请输入整数或小数点后两位小数",
trigger: "blur"
}
],
independentLiftingHeight: [
{
required: true,
message: "请输入",
trigger: "blur"
},
{
pattern: /^\d+(\.\d2)?$/,
message: "请输入整数或小数点后两位小数",
trigger: "blur"
}
],
acquisitionDate: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
numberValidityPeriod: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
originalValue: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
renovations: [
{
required: true,
message: "请输入",
trigger: "blur"
},
{
pattern: /^[0-9]+$/,
message: "请输入整数",
trigger: "blur"
}
],
invoiceCode: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
manufacturer: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
productionDate: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
manufacturerLicense: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
isOriginalProduct: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
useTo: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
forearmLength: [
{
required: true,
message: "请输入",
trigger: "blur"
},
{
pattern: /^\d+(\.\d2)?$/,
message: "请输入整数或小数点后两位小数",
trigger: "blur"
}
],
posteriorArmLength: [
{
required: true,
message: "请输入",
trigger: "blur"
},
{
pattern: /^\d+(\.\d2)?$/,
message: "请输入整数或小数点后两位小数",
trigger: "blur"
}
],
towerHeight: [
{
required: true,
message: "请输入",
trigger: "blur"
},
{
pattern: /^\d+(\.\d2)?$/,
message: "请输入整数或小数点后两位小数",
trigger: "blur"
}
],
forearmFlag: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
rearArmFlag: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
towerCapFlag: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
upwardTurntableFlag: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
lowerTurntableFlag: [
{
required: true,
message: "请输入",
trigger: "blur"
}
],
mastSectionFlag: [
{
required: true,
message: "请输入",
trigger: "blur"
}
]
});
// 图片上传成功后的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
console.log(response.result.url);
console.log(response, uploadFile);
formData.value.installImage = response.result.url;
formRef.value?.validateField("installImage");
};
// 删除设备
const handleDeleteItem = async (params: jxj_User.ResUserList) => {
await useHandleData(towerCraneEquipDel, { id: params.id }, `删除【${params.devName}`);
proTable.value.getTableList();
};
// dataCallback 是对于返回的表格数据做处理,如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段,那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
// console.log(data);
return {
list: data.records,
total: Number(data.total),
pageNo: Number(data.current),
pageSize: Number(data.size)
};
};
const transfrom = (arr: Array<any>) => {
const result: any[] | ConcatArray<{ authorityId: any; roleId: number | undefined; type: any }> = [];
return arr
.map(item => {
if (arr.children && Array.isArray(arr.children)) {
result.concat(transfrom(arr.children));
}
return {
authorityId: item.name,
roleId: getId.value,
type: item.type
};
})
.concat(result);
};
// 如果你想在请求之前对当前请求参数做一些操作可以自定义如下函数params 为当前所有的请求参数(包括分页),最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params));
if (newParams.installTime) {
newParams.installTime_begin = newParams.installTime[0];
newParams.installTime_end = newParams.installTime[1];
delete newParams.installTime;
}
if (searchSn.value) {
newParams.engineeringSn = searchSn.value;
} else {
return { result: { current: "1", pages: "1", records: [], size: "10", total: "0" } };
}
return towerCraneEquipPage(newParams);
};
// 新增
const handleAddItem = () => {
formRef.value?.resetFields();
formData.value = {
devName: "",
installTime: "",
blackBox: "",
structureType: "",
useState: "",
installImage: "",
isForeignDev: 0,
isNewDev: 0,
model: "",
licensingAuthority: "",
factoryCertificate: "",
workingRange: "",
maxLiftingCapacity: "",
independentLiftingHeight: "",
acquisitionDate: "",
numberValidityPeriod: "",
originalValue: "",
renovations: "",
invoiceCode: "",
contractCode: "",
manufacturer: "",
productionDate: "",
manufacturerLicense: "",
isOriginalProduct: 0,
useTo: "",
forearmLength: "",
posteriorArmLength: "",
towerHeight: "",
forearmFlag: "",
rearArmFlag: "",
towerCapFlag: "",
upwardTurntableFlag: "",
lowerTurntableFlag: "",
mastSectionFlag: ""
};
title.value = "新增设备";
newUnitDialog.value = true;
};
// 查看
const handleLookItem = (row: any) => {
formRef.value?.resetFields();
title.value = "查看设备";
console.log(row);
formData.value = reactive({ ...row });
changeType.value = formData.value.businessLicenseLifespan ? 1 : 2;
newUnitDialog.value = true;
};
// 编辑
const handleEditItem = (row: any) => {
formRef.value?.clearValidate();
title.value = "编辑设备";
console.log(row);
formData.value = reactive({ ...row });
changeType.value = formData.value.businessLicenseLifespan ? 1 : 2;
newUnitDialog.value = true;
};
// TODO: 提交表单操作
const submitForm = async (data: any) => {
const formEl = formRef.value;
if (!formEl) return;
await formEl.validate((valid, fields) => {
if (valid) {
if (changeType.value == 2) {
delete data.businessLicenseLifespan;
}
data.engineeringSn = searchSn.value;
saveItem(data);
} else {
console.log("error submit!", fields);
}
});
};
const saveItem = async (form: any) => {
if (form.id) {
// console.log(form.dictCode);
const res = await towerCraneEquipEdit(form);
proTable.value.getTableList();
ElMessage.success("编辑成功");
newUnitDialog.value = false;
} else {
const res = await towerCraneEquipAdd(form);
proTable.value.getTableList();
ElMessage.success("新增成功");
newUnitDialog.value = false;
}
};
const getengineering = async () => {
// let newParams = JSON.parse(JSON.stringify(params));
const res = await getRelevanceList();
engList.value = res.result;
if (res.result && res.result.length > 0) {
searchSn.value = res.result[0].engineeringSn;
}
proTable.value.getTableList();
console.log(res);
};
// 点击抽屉的工程名称更新页面
const onUpdate = async row => {
searchSn.value = row.engineeringSn;
proTable.value.getTableList();
ElMessage.success("页面已更新");
};
onMounted(() => {
getengineering();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>