358 lines
13 KiB
Vue
358 lines
13 KiB
Vue
<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> |