You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

652 lines
22 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="会员昵称" prop="nickName">
<el-input
v-model="queryParams.nickName"
placeholder="请输入单个会员昵称搜索"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-popover placement="top-start" width="200" trigger="click"
content="手机号码和用户编号,满足其中之一内容即可">
<el-form-item label="用户编号" prop="userIdArray" slot="reference">
<el-input
v-model="queryParams.userIdArray"
placeholder="搜索多个请用英文逗号隔开"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-popover>
<el-popover placement="top-start" width="200" trigger="click"
content="手机号码和用户编号,满足其中之一内容即可">
<el-form-item label="手机号码" prop="userPhone" slot="reference">
<el-input
v-model="queryParams.userPhone"
placeholder="搜索多个请用英文逗号隔开"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-popover>
<el-form-item label="仪器名称" prop="source">
<el-select
v-model="queryParams.instrumentIdArray"
placeholder="请选择类型"
multiple
:style="{ width: '100%' }"
clearable
>
<el-option
v-for="item in instrumentList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="绑定状态" prop="source">
<el-select
v-model="queryParams.bindingStatus"
placeholder="请选择类型"
:style="{ width: '100%' }"
clearable
>
<el-option label="全部" value="" />
<el-option label="未绑定" value="1" />
<el-option label="已绑定" value="0" />
</el-select>
</el-form-item>
<el-form-item label="仪器ID" prop="instrumentId">
<el-input
v-model="queryParams.instrumentId"
placeholder="请输入仪器ID进行搜索"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="序列号" prop="serial">
<el-input
v-model="queryParams.serial"
placeholder="请输入序列号进行搜索"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="操作开始" prop="startTime">
<el-date-picker clearable
v-model="queryParams.startTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择操作开始时间">
</el-date-picker>
</el-form-item>
<el-form-item prop="endTime">
<el-date-picker clearable
v-model="queryParams.endTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm"
placeholder="请选择操作结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['system:instrument:add']"-->
<!-- >新增</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['system:instrument:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['system:instrument:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['system:instrument:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!-- </el-row>-->
<el-table v-loading="loading" :data="userInstrumentList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" prop="id" />
<el-table-column label="头像" align="center" prop="wxUserMember.headimg" >
<template slot-scope="scope">
<el-image :src="scope.row.wxUserMember.headimg" style="width: 60px;height: 80px" :preview-src-list="[scope.row.wxUserMember.headimg]">
<div slot="placeholder" class="image-slot"><span class="dot"></span>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column label="会员昵称" align="center" prop="wxUserMember.nickname" />
<el-table-column label="用户编号" align="center" prop="wxUserMember.id" />
<el-table-column label="手机号码" align="center" prop="wxUserMember.mobile" />
<el-table-column label="仪器名称" align="center" prop="wxInstrument.name" />
<el-table-column label="保修年限" align="center" prop="guarantee" />
<el-table-column label="保修到期时间" align="center" prop="guaranteeEndtime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.guaranteeEndtime, '{y}-{m}-{d} {h}:{m}') }}</span>
</template>
</el-table-column>
<el-table-column label="绑定状态" align="center" prop="bindingStatus" >
<template slot-scope="scope">
<span v-show="scope.row.bindingStatus == 0">已绑定</span>
<span v-show="scope.row.bindingStatus == 1">未绑定</span>
<span v-show="scope.row.bindingStatus == 2">已解绑</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="detailShow(scope.row)"
v-hasPermi="['system:instrument:edit']"
>记录详情</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="bingCancel(scope.row)"
v-hasPermi="['system:instrument:edit']"
>解绑</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-bell"
@click="changeSerialHandler(scope.row)"
v-hasPermi="['system:instrument:edit']"
>换绑序列号</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="changeGuaranteeHandler(scope.row)"
v-hasPermi="['system:instrument:edit']"
>编辑保修年限</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改用户仪器绑定对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户id" prop="userId">
<el-input v-model="form.userId" placeholder="请输入用户id" />
</el-form-item>
<el-form-item label="序列号" prop="serial">
<el-input v-model="form.serial" placeholder="请输入序列号" />
</el-form-item>
<el-form-item label="仪器id" prop="instrumentId">
<el-input v-model="form.instrumentId" placeholder="请输入仪器id" />
</el-form-item>
<el-form-item label="仪器名称" prop="instrumentName">
<el-input v-model="form.instrumentName" placeholder="请输入仪器名称" />
</el-form-item>
<el-form-item label="序列号图片" prop="serialImage">
<image-upload v-model="form.serialImage"/>
</el-form-item>
<el-form-item label="保修日期" prop="guarantee">
<el-input v-model="form.guarantee" placeholder="请输入保修日期" />
</el-form-item>
<el-form-item label="保修到期时间" prop="guaranteeEndtime">
<el-date-picker clearable
v-model="form.guaranteeEndtime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择保修到期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="${comment}" prop="remark">
<el-input v-model="form.remark" placeholder="请输入${comment}" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 详情记录对话框 -->
<el-dialog :title="detailTitle" :visible.sync="detailOpen" width="880px" append-to-body>
<el-table v-loading="loading" :data="userInstrumentLogList">
<el-table-column label="序号" align="center" prop="id" />
<el-table-column label="仪器序列号" align="center" prop="serial" />
<el-table-column label="仪器号图片" align="center" prop="serialImage" >
<template slot-scope="scope">
<el-image :src="scope.row.serialImage" style="width: 60px;height: 80px" :preview-src-list="[scope.row.serialImage]">
<div slot="placeholder" class="image-slot"><span class="dot"></span>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="bindingStatus" >
<template slot-scope="scope">
<span v-show="scope.row.bindingStatus == 0">已绑定</span>
<span v-show="scope.row.bindingStatus == 1">未绑定</span>
<span v-show="scope.row.bindingStatus == 2">已解绑</span>
</template>
</el-table-column>
<el-table-column label="操作时间" align="center" prop="createTime" >
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="logTotal>0"
:total="logTotal"
:page.sync="queryLogParams.pageNum"
:limit.sync="queryLogParams.pageSize"
@pagination="getList"
/>
</el-dialog>
<el-dialog :title="serialTitle" :visible.sync="serialOpen" width="600px" append-to-body>
<el-form :model="serialForm" ref="serialForm" label-width="100px" class="demo-ruleForm">
<el-form-item
label="序列号"
prop="changeSerial" >
<!-- :rules="[{ required: true, message: '序列号不能为空'}]"-->
<!-- >-->
<el-input v-model="serialForm.serial" autocomplete="off" maxlength="30"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitSerial('serialForm')">提交</el-button>
<el-button @click="resetSerialForm('serialForm')">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog :title="guaranteeTitle" :visible.sync="guaranteeOpen" width="600px" append-to-body>
<el-form :model="guaranteeForm" ref="guaranteeForm" label-width="100px" class="demo-ruleForm">
<el-form-item
label="保修日期"
prop="changeSerial" >
<el-select
v-model="guaranteeForm.guarantee"
placeholder="请选择保修日期"
:style="{ width: '100%' }"
clearable
>
<el-option label="1年" value="1" />
<el-option label="2年" value="2" />
<el-option label="3年" value="3" />
<el-option label="4年" value="4" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitGuarantee()">提交</el-button>
<el-button @click="resetSerialForm('guaranteeForm')"></el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { listUserInstrument, getInstrument, delInstrument, addInstrument, updateInstrument,changeSerial,changeGuarantee } from "@/api/system/userInstrument";
import {listInstrument} from "@/api/system/instrument";
import {listLog,addLog} from "@/api/system/userInstrumentLog"
export default {
name: "Instrument",
data() {
return {
guaranteeOpen: false,
guaranteeTitle: "编辑保修日期",
guaranteeForm: {
id: "",
guarantee: ""
},
serialForm: {
id: "",
serial: "",
},
// 序列号标题
serialTitle: "换绑序列号",
// 序列号弹窗
serialOpen: false,
// 详情标题
detailTitle: "记录详情",
// 详情弹窗
detailOpen: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 日记总条数
logTotal: 0,
// 用户仪器绑定表格数据
userInstrumentList: [],
// 用户仪器绑定日记表格数据
userInstrumentLogList: [],
// 仪器表格数据
instrumentList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
nickName:null,
userId: null,
serial: null,
instrumentId: null,
instrumentName: null,
serialImage: null,
guarantee: null,
guaranteeEndtime: null,
bindingStatus: "",
status: null,
startTime:null,
entTime:null,
instrumentIdArray: null,
userIdArray: null
},
queryLogParams: {
pageNum: 1,
pageSize: 10,
userInstrumentId: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
userId: [
{ required: true, message: "用户id不能为空", trigger: "blur" }
],
serial: [
{ required: true, message: "序列号不能为空", trigger: "blur" }
],
instrumentId: [
{ required: true, message: "仪器id不能为空", trigger: "blur" }
],
instrumentName: [
{ required: true, message: "仪器名称不能为空", trigger: "blur" }
],
serialImage: [
{ required: true, message: "序列号图片不能为空", trigger: "blur" }
],
guarantee: [
{ required: true, message: "保修日期不能为空", trigger: "blur" }
],
guaranteeEndtime: [
{ required: true, message: "保修到期时间不能为空", trigger: "blur" }
],
bindingStatus: [
{ required: true, message: "绑定状态1未绑定2已解绑不能为空", trigger: "change" }
],
}
};
},
created() {
this.getList();
this.queryInstrument();
},
methods: {
resetSerialForm(formName) {
this.serialForm.serial = ""
this.guaranteeForm.guarantee = "";
},
queryInstrument(){
listInstrument({}).then(response => {
this.instrumentList = response.rows;
});
},
/** 查询用户仪器绑定列表 */
getList() {
this.loading = true;
listUserInstrument(this.queryParams).then(response => {
this.userInstrumentList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
userId: null,
serial: null,
instrumentId: null,
instrumentName: null,
serialImage: null,
guarantee: null,
guaranteeEndtime: null,
bindingStatus: null,
status: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加用户仪器绑定";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getInstrument(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改用户仪器绑定";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateInstrument(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInstrument(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除用户仪器绑定编号为"' + ids + '"的数据项?').then(function() {
return delInstrument(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/instrument/export', {
...this.queryParams
}, `instrument_${new Date().getTime()}.xlsx`)
},
/** 展示详情 */
detailShow(row){
this.queryLogParams.userInstrumentId = row.id;
listLog(this.queryLogParams).then(response => {
this.detailOpen = true;
this.userInstrumentLogList = response.rows;
this.logTotal = response.total;
});
},
/** 解绑 */
bingCancel(row){
this.$confirm('确定将选择的数据解绑序列号?【请谨慎操作,一旦成功将无法撤销】, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 判断是否绑定状态
if (row.bindingStatus == 1 || row.bindingStatus == 2) {
this.$message({
type: 'error',
message: '当前状态不支持解绑'
});
return ;
}
const updateForm= {id: row.id,bindingStatus: 2};
updateInstrument(updateForm).then(response => {
this.$message({
type: 'success',
message: '解绑成功!'
});
});
// 增加一条记录
const logForm = {
userInstrumentId: row.id,
userId: row.userId,
serial: row.serial,
instrumentName: row.instrumentName,
guarantee: row.guarantee,
guaranteeEndtime: row.guaranteeEndtime,
bindingStatus: 2,
instrumentId: row.instrumentId,
serialImage: row.serialImage,
status: 0
};
addLog(logForm).then(response => {
this.getList();
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消解绑'
});
});
},
// 换绑
changeSerialHandler(row){
this.serialForm.serial = ""
this.serialOpen = true;
this.serialForm.id = row.id;
},
submitSerial(){
if (!this.serialForm.serial) {
this.$modal.msgError("序列号不能为空");
return;
}
changeSerial(this.serialForm).then(response => {
if (response.data.code != 200) {
this.$modal.msgError(response.data.message);
} else {
this.$modal.msgSuccess("换绑序列号成功");
this.serialOpen = false;
this.getList();
}
});
},
// 保修日期处理
changeGuaranteeHandler(row){
this.guaranteeForm.guarantee = "";
this.guaranteeOpen = true;
this.guaranteeForm.id = row.id;
},
submitGuarantee(){
if (!this.guaranteeForm.guarantee) {
this.$modal.msgError("保修日期不能为空");
return;
}
changeGuarantee(this.guaranteeForm).then(response => {
this.$modal.msgSuccess("保修日期更新成功");
this.guaranteeOpen = false;
this.getList();
});
}
}
};
</script>