bonus-ui/src/views/lessor/equipment/detail.vue

358 lines
13 KiB
Vue
Raw Normal View History

2024-11-22 14:23:41 +08:00
<template>
<div class="app-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary" size="mini"
icon="el-icon-back" @click="backList"
>取消</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning" plain
icon="el-icon-download" size="mini"
>存草稿</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-check"
size="mini"
>上架</el-button>
</el-col>
</el-row>
<el-form :model="formData" ref="formData" size="small" :inline="true" label-width="130px" style="margin-left: 40px;">
<el-row :gutter="24" class="mb8">
<el-form-item label="装备名称:" prop="equipmentName">
<el-input
v-model="formData.equipmentName"
placeholder="请输入装备名称"
clearable maxlength="20"
style="width: 1100px;"
/>
</el-form-item>
</el-row>
<el-row :gutter="24" class="mb8">
<el-form-item label="装备类目:" prop="typeId1">
<el-select v-model="formData.typeId1"
placeholder="一级分类" clearable>
<el-option v-for="dict in equipmentTypeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="" prop="typeId2">
<el-select v-model="formData.typeId2"
placeholder="二级分类" clearable>
<el-option v-for="dict in equipmentTypeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="" prop="typeId3">
<el-select v-model="formData.typeId3"
placeholder="三级分类" clearable>
<el-option v-for="dict in equipmentTypeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="" prop="typeId4">
<el-select v-model="formData.typeId4"
placeholder="四级分类" clearable>
<el-option v-for="dict in equipmentTypeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-row>
<el-row :gutter="24" class="mb8">
<el-form-item label="装备所在地:" prop="local1">
<el-select v-model="formData.local1"
placeholder="所在省份" clearable>
<el-option v-for="dict in equipmentTypeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="" prop="local2">
<el-select v-model="formData.local2"
placeholder="所在市" clearable>
<el-option v-for="dict in equipmentTypeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
<el-form-item label="" prop="local3">
<el-select v-model="formData.local3"
placeholder="所在县" clearable>
<el-option v-for="dict in equipmentTypeList"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-row>
<el-row :gutter="24" class="mb8">
<el-col :span="10">
<el-form-item label="装备编号:" prop="equipmentCode">
<el-input
v-model="formData.equipmentCode"
placeholder="请输入装备编号"
clearable maxlength="20"
style="width: 400px;"
/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="装备品牌:" prop="equipmentBrand">
<el-input
v-model="formData.equipmentBrand"
placeholder="请输入装备品牌"
clearable maxlength="20"
style="width: 400px;"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="mb8">
<el-col :span="10">
<el-form-item label="出厂日期:" prop="productionTime">
<el-date-picker
v-model="formData.productionTime"
placeholder="请选择出厂日期"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime" style="width: 400px;">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="租赁价格(天/元)" prop="leasePrice">
<el-input
v-model="formData.leasePrice"
placeholder="请输入租赁价格"
clearable maxlength="20"
style="width: 400px;"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="mb8">
<el-col :span="10">
<el-form-item label="联系人:" prop="userName">
<el-input
v-model="formData.userName"
placeholder="请输入联系人"
clearable maxlength="20"
style="width: 400px;"
/>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="联系电话:" prop="phone">
<el-input
v-model="formData.phone"
placeholder="请输入联系电话"
clearable maxlength="20"
style="width: 400px;"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="mb8">
<el-col :span="10">
<el-form-item label="整机重量(KG)" prop="weight">
<el-input
v-model="formData.weight"
placeholder="请输入整机重量"
clearable maxlength="20"
style="width: 400px;"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="mb8">
<span style="color: #606266;font-size: 14px;font-weight: 600;margin-left: 20px;">添加描述:</span>
<span style="color: rgb(255, 59, 48);font-size: 12px;margin-left: 10px;">:添加不少于2个关于装备性能外观等相关的描述如档位标定功率规格等</span>
</el-row>
<el-row :gutter="24" class="mb8">
<el-col :span="10">
<div v-for="(item,index) in describeList" :key="index">
<el-input
v-model="item.label"
placeholder="描述名称"
clearable maxlength="20"
style="width: 120px;"
/>
<span>:</span>
<el-input
v-model="item.describe"
placeholder="描述详情"
clearable maxlength="20"
style="width: 400px;"
/>
</div>
</el-col>
</el-row>
</el-form>
<!-- 图片查看弹窗 -->
<el-dialog :visible.sync="dialogVisible" width="500px" height="500px">
<img width="100%" height="500px" :src="dialogImageUrl" />
</el-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
name: "",
// dicts: ["purchase_task_status"],
data() {
return {
Id:"",
isView: false,
equipmentTypeList: [], //下拉
materialModelList: [], //规格型号下拉
supplierList: [], //厂家下拉
fixCodeList: ["否", "是"],
formData: {
typeId: undefined,
supplierId: undefined,
productionTime: undefined,
},
describeList:[
{label:"",describe:""},{label:"",describe:""}
],//描述
//图片查看弹窗
dialogImageUrl: "",
dialogVisible: false,
//上传
upload: {
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/file/upload",
},
};
},
mounted() {
// const Id = this.$route.query && this.$route.query.Id;
// const isView = this.$route.query && this.$route.query.isView;
// this.Id = Id;
// if (isView == "true") {
// this.isView = true;
// } else {
// this.isView = false;
// }
// this.resetForm("formData");
// console.log(this.isView);
// this.getSupplierList()
},
methods: {
// 返回列表页
backList() {
const obj = { path: "/lessor/equipment" };
this.$tab.closeOpenPage(obj);
},
// getDeviceType() {
// getDeviceType({ level: 4, skipPermission: 1 }).then((response) => {
// let matModelRes = response.data;
// this.materialModelList = matModelRes.map((item) => {
// return {
// label: item.typeName,
// value: item.typeId,
// };
// });
// });
// },
// getSupplierList() {
// getManufacturerSelect().then((response) => {
// let arrRes = response.rows;
// this.supplierList = arrRes.map((item) => {
// return {
// label: item.supplier,
// value: item.supplierId,
// };
// });
// });
// },
//上传
beforeFileUpload(row) {
this.rowData.fileType = row.fileType;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if (response.code == 200) {
let param = {
taskId: this.taskId,
taskType: "0",
name: response.data.name,
url: response.data.url,
modelId: this.rowData.typeId,
fileType: this.rowData.fileType,
};
console.log(param);
uploadPurchaseFile(param)
.then((response) => {
this.$modal.msgSuccess("上传成功");
this.getFileData();
})
.catch(() => {
this.$modal.msgError("上传失败");
});
}
},
//查看
picturePreview(file) {
this.dialogImageUrl = file.url;
const parts = file.name.split(".");
const extension = parts.pop();
if (extension === "doc" || extension === "docx" || extension === "pdf") {
const windowName = file.name;
window.open(file.url, windowName);
} else {
this.dialogVisible = true;
}
},
},
};
</script>
<style lang="scss" scoped>
.uploadImg {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.deviceCode {
margin-top: 10px;
padding-bottom: 20px;
font-size: 18px;
}
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}
</style>