<template>
|
<div class="product viewWrap">
|
<a ref="download" style="display: none" />
|
<h2>产品管理</h2>
|
|
<!-- 搜索功能区 -->
|
<div class="wrap">
|
<div class="searchWrap">
|
<div class="searchItem">
|
<span class="searchTitle">型号</span>
|
<el-input v-model="type" placeholder="请输入内容" clearable style="width:220px;"></el-input>
|
</div>
|
<div class="searchButton">
|
<el-button type="primary" @click="onGetSearchData">查询</el-button>
|
<el-button @click="onClearSearchData">清空</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 数据功能按钮区 -->
|
<div style="margin-top:20px; ">
|
<el-button type="primary" icon="el-icon-plus" style="width: 100px;" @click="handleFormDataAdd">添加</el-button>
|
<el-button type="primary" icon="el-icon-download" style="width: 100px;" @click="handleExport">导出</el-button>
|
</div>
|
|
<!-- 数据表格区 -->
|
<el-table stripe :data="tableData" height="0" style="margin-top: 20px;">
|
<el-table-column type="index" label="序号"> </el-table-column>
|
<el-table-column prop="name" label="名称"> </el-table-column>
|
<el-table-column prop="type" label="型号"> </el-table-column>
|
<el-table-column label="典型图片">
|
<template slot-scope="scope">
|
<img class="imageWeb" :src="scope.row.imageWebPath" @click="handleShowImg(scope.row.imageWebPath)" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="director" label="技术负责人"> </el-table-column>
|
<el-table-column prop="dMobile" label="技术负责人手机号">
|
</el-table-column>
|
<el-table-column prop="dt" label="创建时间"> </el-table-column>
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column label="操作" width="100">
|
<template slot-scope="scope">
|
<el-button icon="el-icon-edit" @click.native.prevent="handleFormDataEdit(scope.row)" type="text" size="small">
|
编辑
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页组件 -->
|
<el-pagination style="margin-top: 20px;" @size-change="onGetTableData" @current-change="onGetTableData"
|
:current-page.sync="pageCurr" :page-size.sync="pageSize" :page-sizes="[10, 20, 50, 100]"
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
</el-pagination>
|
|
<!-- 表单 -->
|
<el-dialog title="产品信息" :visible.sync="showFromData" width="700px" :before-close="handleFormDataClose">
|
<el-form :model="formData" :rules="formRules" ref="formData" label-width="140px" style="margin: -30px 0">
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="基础信息" name="base">
|
<el-form-item label="用户ID" prop="id" style="display: none;">
|
<el-input style="width:220px" v-model="formData.id" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="名称" prop="name">
|
<el-input style="width:220px" v-model="formData.name" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="型号" prop="type">
|
<el-input style="width:220px" v-model="formData.type" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="技术负责人" prop="director">
|
<el-input style="width:220px" v-model="formData.director" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="技术负责人手机号" prop="dMobile">
|
<el-input style="width:220px" v-model="formData.dMobile" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="典型图片">
|
<el-upload action="base/webFile/upPhoto" :headers="headers" :show-file-list="false"
|
:on-success="handleAvatarSuccess">
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input style="width:220px" v-model="formData.remark" clearable></el-input>
|
</el-form-item>
|
</el-tab-pane>
|
<el-tab-pane label="文件信息" name="files">
|
<el-upload action="base/webFile/upDocument" :headers="headers" :show-file-list="false"
|
:on-success="handleUploadProFilesSuccess">
|
<el-button icon="el-icon-upload" type="text" size="small">
|
上传文件
|
</el-button>
|
</el-upload>
|
<div v-for="(item, index) in formData.proFiles" :key="index" style="margin: 10px 0;">
|
<span class="link">{{ item.orgName }}.{{ item.extName }}</span>
|
<el-link type="primary" icon="el-icon-download" :href="item.webUrl" target="_blank" :underline="false"
|
style="margin:0 20px;">点击下载</el-link>
|
<el-link type="primary" icon="el-icon-delete" @click="handleDeleteProFiles(index, item)"
|
:underline="false">删除</el-link>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="主要技术参数" name="params">
|
<div v-for="(item, index) in formData.params" :key="index" style="margin-bottom: 10px;">
|
<div v-show="!item.deleted">
|
<span>技术参数名称</span>
|
<el-input v-model="item.paramName" placeholder="请输入内容" clearable
|
style="width:220px; margin:0 10px;"></el-input>
|
<span>技术参数值</span>
|
<el-input v-model="item.paramValue" placeholder="请输入内容" clearable
|
style="width:220px; margin:0 10px;"></el-input>
|
<el-button icon="el-icon-delete" @click="handleDeleteParams(index, item)" type="text" size="small">
|
</el-button>
|
</div>
|
</div>
|
<el-button icon="el-icon-plus" @click="handleAddParams" type="text" size="small">
|
添加
|
</el-button>
|
</el-tab-pane>
|
</el-tabs>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button v-if="activeName != 'base'" @click="handlePrevious">上一步</el-button>
|
<el-button v-if="activeName != 'params'" @click="handleNext">下一步</el-button>
|
<el-button v-if="activeName == 'params'" @click="handleFormDataClose">取 消</el-button>
|
<el-button v-if="activeName == 'params'" type="primary" @click="handleFormDataSubmit">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 二维码 -->
|
<div class="codeWrap" v-show="showImg" @click="handleCloseImg">
|
<transition name="el-zoom-in-center">
|
<img class="showImg" v-show="showImg" :src="imageWebPath" />
|
</transition>
|
<div class="codeMessage">点击屏幕关闭预览</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.product {
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 98px;
|
height: 98px;
|
line-height: 98px;
|
text-align: center;
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
}
|
|
.avatar-uploader-icon:hover {
|
border-color: #409eff;
|
}
|
|
.avatar {
|
height: 100px;
|
display: inline-block;
|
}
|
|
.link {
|
color: #000;
|
font-weight: 500;
|
margin-right: 10px;
|
text-decoration: none;
|
}
|
|
.imageWeb {
|
max-width: 40px;
|
max-height: 40px;
|
}
|
|
.showImg {
|
max-width: 80vw;
|
max-height: 80vh;
|
background-color: #fff;
|
border: 10px solid #fff;
|
}
|
}
|
</style>
|
|
<script>
|
export default {
|
name: "product",
|
components: {},
|
data() {
|
return {
|
type: null,
|
pageSize: 10,
|
pageCurr: 1,
|
total: 0,
|
tableData: [],
|
showFromData: false,
|
activeName: "base",
|
headers: {
|
token: localStorage.getItem("token"),
|
},
|
formData: {
|
id: null,
|
name: null,
|
type: null,
|
director: null,
|
dMobile: null,
|
image: null,
|
remark: null,
|
proFiles: [],
|
params: [],
|
},
|
formRules: {
|
name: [{ required: true, message: "必填项", trigger: "blur" }],
|
type: [{ required: true, message: "必填项", trigger: "blur" }],
|
director: [{ required: true, message: "必填项", trigger: "blur" }],
|
dMobile: [{ required: true, message: "必填项", trigger: "blur" }],
|
},
|
imageUrl: "",
|
readonly: false,
|
|
imageWebPath: null,
|
showImg: false,
|
};
|
},
|
computed: {},
|
mounted() {
|
this.onGetTableData();
|
},
|
methods: {
|
// 执行条件查询
|
onGetSearchData: function () {
|
this.pageCurr = 1;
|
this.onGetTableData();
|
},
|
// 清空查询条件
|
onClearSearchData: function () {
|
this.type = null;
|
this.pageCurr = 1;
|
this.onGetTableData();
|
},
|
// 获取表格数据
|
onGetTableData: function () {
|
var that = this;
|
var data = {
|
type: this.type,
|
pageSize: this.pageSize,
|
pageCurr: this.pageCurr,
|
};
|
that
|
.$axiosAdmin({
|
method: "post",
|
url: "platform/product/some",
|
data,
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.tableData = res.content.obj;
|
that.total = res.content.itemTotal;
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 删除确认
|
handleDelete(row) {
|
this.$confirm(`此操作将删除 ${row.name} , 是否继续?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.onDelete(row);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
// 执行删除
|
onDelete: function (row) {
|
var that = this;
|
var params = {
|
id: row.id,
|
};
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "platform/station/delete",
|
params: params,
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.$message({
|
type: "success",
|
message: "已成功",
|
});
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
that.onGetTableData();
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 添加
|
handleFormDataAdd: function () {
|
this.formData.id = null;
|
this.formData.name = null;
|
this.formData.type = null;
|
this.formData.director = null;
|
this.formData.dMobile = null;
|
this.formData.image = null;
|
this.formData.remark = null;
|
this.formData.proFiles = [];
|
this.formData.params = [];
|
|
this.showFromData = true;
|
this.activeName = "base"
|
this.imageUrl = null
|
},
|
// 关闭
|
handleFormDataClose: function () {
|
this.formData.id = null;
|
this.formData.name = null;
|
this.formData.type = null;
|
this.formData.director = null;
|
this.formData.dMobile = null;
|
this.formData.image = null;
|
this.formData.remark = null;
|
this.formData.proFiles = [];
|
this.formData.params = [];
|
|
this.showFromData = false;
|
this.activeName = "base"
|
this.imageUrl = null
|
this.$refs["formData"].resetFields();
|
},
|
// 编辑
|
handleFormDataEdit: function (row) {
|
var that = this;
|
that
|
.$axiosAdmin({
|
method: "get",
|
url: "platform/product/one",
|
params: {
|
id: row.id,
|
},
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.formData.id = res.content.id;
|
that.formData.name = res.content.name;
|
that.formData.type = res.content.type;
|
that.formData.director = res.content.director;
|
that.formData.dMobile = res.content.dMobile;
|
that.formData.image = res.content.image;
|
that.formData.remark = res.content.remark;
|
that.formData.proFiles = JSON.parse(
|
JSON.stringify(res.content.proFiles)
|
);
|
that.formData.proFiles.forEach(item => {
|
item.deleted = false
|
})
|
that.formData.params = JSON.parse(
|
JSON.stringify(res.content.params)
|
);
|
// that.formData.params.forEach(item => {
|
// item.deleted = false
|
// })
|
that.showFromData = true;
|
that.activeName = "base"
|
that.imageUrl = res.content.imageWebPath
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 提交数据确认
|
handleFormDataSubmit: function () {
|
this.$confirm(`此操作将保存并更新数据, 是否继续?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.onFormDataSubmit();
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
// 提交数据
|
onFormDataSubmit: function () {
|
var that = this;
|
var url;
|
if (this.formData.id) {
|
url = "platform/product/update";
|
} else {
|
url = "platform/product/save";
|
}
|
that
|
.$axiosAdmin({
|
method: "post",
|
url: url,
|
data: JSON.stringify(this.formData),
|
})
|
.then((res) => {
|
if (res.success == true) {
|
that.$message({
|
type: "success",
|
message: "已成功",
|
});
|
that.handleFormDataClose();
|
that.onGetTableData();
|
} else {
|
that.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 上传典型图片
|
handleAvatarSuccess(res, file) {
|
if (res.success) {
|
this.imageUrl = res.content.webPath;
|
this.formData.image = res.content.id;
|
} else {
|
this.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
},
|
// 上传文件
|
handleUploadProFilesSuccess(res, file) {
|
if (res.success) {
|
this.formData.proFiles.push({
|
extName: res.content.extName,
|
fileId: res.content.id,
|
orgName: res.content.orgName,
|
webUrl: res.content.webPath,
|
// deleted: false,
|
})
|
} else {
|
this.$alert(res.content, "提示", {
|
confirmButtonText: "确定",
|
});
|
}
|
},
|
// 删除文件
|
handleDeleteProFiles: function (index, item) {
|
this.$confirm(`此操作将删除 "${item.orgName}.${item.extName}" , 是否继续?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.formData.proFiles.splice(index, 1);
|
// this.formData.proFiles[index].deleted = true
|
// if (!this.formData.proFiles[index].hasOwnProperty('id')) {
|
// this.formData.proFiles.splice(index, 1);
|
// }
|
// this.$forceUpdate()
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
// 添加技术参数
|
handleAddParams() {
|
this.formData.params.push({
|
paramName: "",
|
paramValue: "",
|
deleted: false
|
})
|
},
|
// 删除技术参数
|
handleDeleteParams(index, item) {
|
this.$confirm(`此操作将删除 "${item.paramName}" , 是否继续?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.formData.params[index].deleted = true
|
if (!this.formData.params[index].hasOwnProperty('id')) {
|
this.formData.params.splice(index, 1)
|
}
|
this.$forceUpdate()
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
// 导出产品
|
handleExport: function () {
|
var that = this;
|
that
|
.$axiosAdmin({
|
method: "post",
|
responseType: "blob",
|
url: "platform/product/export",
|
data: JSON.stringify({
|
"type": ""
|
})
|
})
|
.then((res) => {
|
const blob = res;
|
that.$refs.download.href = window.URL.createObjectURL(new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
|
that.$refs.download.download = `产品信息.xlsx`;
|
that.$refs.download.click();
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 打开预览图
|
handleShowImg: function (url) {
|
this.imageWebPath = url
|
this.showImg = true
|
},
|
// 关闭预览图
|
handleCloseImg: function () {
|
this.imageWebPath = null
|
this.showImg = false
|
},
|
// 上一步
|
handlePrevious: function () {
|
if (this.activeName == 'files') {
|
this.activeName = 'base'
|
return
|
}
|
if (this.activeName == 'params') {
|
this.activeName = 'files'
|
return
|
}
|
},
|
// 下一步
|
handleNext: function () {
|
if (this.activeName == 'base') {
|
this.activeName = 'files'
|
return
|
}
|
if (this.activeName == 'files') {
|
this.activeName = 'params'
|
return
|
}
|
},
|
},
|
};
|
</script>
|
