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

663 lines
22 KiB

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="container">
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<LxHeader icon="md-apps" text="工具信息管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content">
</div>
<slot>
<div class="searchFields">
<el-autocomplete class="inline-input" v-model="searchFields.client" :fetch-suggestions="querySearch"
placeholder="所在工具箱" :trigger-on-focus="true" @select="handleSelectSClient" @blur="handleSelectSClient">
</el-autocomplete>
<Select v-model="searchFields.status" style="width:150px; margin-left: 10px;" placeholder="在线状态搜索">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
<Option value="">{{"所有"}}</Option>
<Option :value="0">{{"在箱"}}</Option>
<Option :value="1">{{"借出"}}</Option>
</Select>
<Input style="width: 200px; margin-left: 10px" v-model.number="searchFields.keyword"
placeholder="关键词搜索" />
<Button type="primary" @click="search" style="margin-left: 10px">查询</Button>
<Button type="primary" @click="edit()" style="margin-left: 10px">添加工具</Button>
<a style="margin-left: 10px" href="/res/template-tool.xlsx" class="ivu-btn ivu-btn-primary"><i
class="ivu-icon ivu-icon-ios-download-outline"></i><span>下载模版</span></a>
<Button icon="md-cloud-upload" style="margin-left: 10px" @click="toImport" type="primary">批量导入</Button>
</div>
</slot>
</LxHeader>
</div>
<div ref="lxTable" class="table-tree">
<el-table :data="tableData" v-loading="loading" class="v-table" :height="tableHeight" style="width: 100%">
<el-table-column :prop="column.field" :fixed="column.fixed" :align="column.align"
v-for="(column,index) in columns" :label="column.title" :width="column.width">
<template slot-scope="scope">
<div v-if="column.type == 'img'">
<img v-for="(file, vIndex) in getFilePath( scope.row[column.field], column)" :key="vIndex"
@click="viewImg(file.path)" class="toolImg" :src="file.path" />
</div>
<div v-else-if="column.type=='format'">
<div v-if="column.field=='client'">
{{scope.row[column.field]?scope.row[column.field].name:""}}
</div>
<div v-if="column.field=='isdelete'">
<el-tag :type="(scope.row[column.field]==1?'danger':'info')">
{{scope.row[column.field]==1?"已删":"正常"}}
</el-tag>
</div>
<div v-else-if="column.field=='opt'">
<Button ghost size="small" @click="edit(scope.row)" type="primary">编辑</Button>
<Button ghost size="small" @click="del(scope.row)" type="error" style="margin-left: 10px;">删除</Button>
</div>
</div>
<div v-else>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
:page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
</el-pagination>
</div>
</div>
</div>
<el-dialog title="批量导入工具" :visible.sync="dialogImportVisible" width="60%">
<div>
<el-upload action="/api/admin/upload-file" ref="uploadExcel" :data="uploadOther" :limit="1"
:on-success="handlesuccessExcel">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传xlsx文件,且不超过500kb</div>
</el-upload>
</div>
<div ref="lxTable" class="table-tree">
<el-table :data="tableExcelData" class="v-table" :height="tableHeight*0.5" style="width: 100%">
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in excelColumns"
:label="column.title" :width="column.width">
<template slot-scope="scope">
<div>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogImportVisible = false">取 消</el-button>
<el-button type="primary" @click="handleImport">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="添加工具" :visible.sync="dialogFormVisible" width="50%">
<el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
<el-row :gutter="32">
<el-col :span="24">
<el-form-item label="所在工具箱" prop="client">
<el-autocomplete class="inline-input" v-model="form.client" :fetch-suggestions="querySearch"
placeholder="请选择所在工具箱" style="width: 100%;" :trigger-on-focus="true" @select="handleSelectClient">
</el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所在层数" prop="layer_id">
<el-select v-model="form.layer_id">
<el-option v-for="(item,index) in layers" :value="item.original_id" :label="item.layerno"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所在位置" prop="position">
<el-input v-model="form.position" type="number" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工具状态" prop="toolstate">
<el-select v-model="form.toolstate">
<el-option value="完好" label="完好"></el-option>
<el-option value="破损" label="破损"></el-option>
<el-option value="未知" label="未知"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="定期维护校准" prop="toolmaintain">
<el-switch v-model="form.toolmaintain" @change="handletoolmaintain"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="校准维护日期" prop="maintaindate">
<el-date-picker v-model="form.maintaindate" :disabled="maintaindatedisabled" type="date"
value-format="yyyy-MM-dd" :picker-options="pickerOptions" format="yyyy-MM-dd" placeholder="请选择校准维护日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="编码" prop="toolpn">
<el-input v-model="form.toolpn" :disabled="toolpnDisabled" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称" prop="toolname">
<el-input v-model="form.toolname" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="型号" prop="tooltype">
<el-input v-model="form.tooltype" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="RFID标签号码" prop="toolRFID">
<el-input v-model="form.toolRFID" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="图片上传">
<el-upload class="upload-demo" :data="uploadOther" action="/api/admin/upload-image"
:on-preview="handlePreview" :on-remove="handleRemove" :on-success="handlesuccess" :file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm('form')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import LxHeader from "@/components/LxHeader/index.vue";
import {
listTool,
save,
del,
doimport,
previewimport
} from "../../api/tool/list.js"
import {
listToolbox
} from "../../api/toolbox/list.js"
import {
getToken
} from '@/utils/auth'
export default {
components: {
LxHeader
},
created() {
this.uploadOther.token = getToken();
this.initLoad();
this.load();
},
mounted() {},
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
}
},
maintaindatedisabled: true,
toolpnDisabled: false,
loading: true,
layers: [],
dialogImportVisible: false,
fileList: [],
paginations: {
page: 1,
page_size: 15,
total: 10
},
dialogFormVisible: false,
cityList: [],
form: {
tooltype: "",
toolname: "",
toolRFID: "",
toolstate: "",
toolpn: "",
toolmaintain: false,
maintaindate: "",
layer_id: "",
position: "",
client_id: "",
client: "",
toolimage: ""
},
layers: [],
rules: {
toolname: [{
required: true,
message: '请输入名称',
trigger: 'blur'
}],
toolpn: [{
required: true,
message: '请输入编码',
trigger: 'blur'
}],
client: [{
required: true,
message: '请选择所在工具箱',
trigger: 'change'
}],
tooltype: [{
required: true,
message: '请填写工具型号',
trigger: 'blur'
}],
toolstate: [{
required: true,
message: '请选择状态',
trigger: 'change'
}],
layer_id: [{
required: true,
message: '请选择层编号',
trigger: 'change'
}],
position: [{
required: true,
message: '请填写位置编号',
trigger: 'blur'
}]
},
formLabelWidth: "120px",
tableHeight: 0,
tableData: [],
//查询条件字段
searchFields: {
client_id: "",
status: "",
keyword: ""
},
uploadOther: {
token: ""
},
columns: [{
field: "toolpn",
title: "编码",
width: 120,
align: "center",
fixed: "fixed"
},
{
field: "toolname",
title: "名称",
width: 200,
},
{
field: "toolimage",
title: "图片",
type: "img",
width: 300,
align: "center"
},
{
field: "tooltype",
title: "型号",
width: 120
},
{
field: "toolRFID",
title: "RFID标签号码",
width: 130
},
{
field: "client",
title: "所在工具箱",
width: 120,
type: "format"
},
{
field: "layerno",
title: "所在层",
width: 80,
align: "center"
},
{
field: "position",
title: "位置编号",
width: 80,
align: "center"
},
{
field: "lastuser_loginname",
title: "最后借用",
width: 80,
align: "center"
},
{
field: "maintaindate",
title: "校准保护",
width: 180
},
{
field: "toolstate",
title: "状态",
width: 100,
align: "center"
},
{
field: "isdelete",
title: "删除状态",
width: 100,
type: "format",
align: "center"
},
{
field: "opt",
title: "操作",
width: 120,
type: "format",
fixed: "right",
align: "center"
}
],
uploadPath: "",
excelColumns: [{
field: "toolpn",
title: "编码",
width: 120,
align: "center"
},
{
field: "toolname",
title: "名称"
},
{
field: "tooltype",
title: "型号",
width: 120
},
{
field: "toolRFID",
title: "RFID标签号码",
width: 130
},
{
field: "client_box_id",
title: "所在工具箱(编号)",
width: 180,
type: "format"
},
{
field: "layerno",
title: "工具箱层编号",
width: 120
},
{
field: "position",
title: "所在位置",
width: 80
},
{
field: "toolstate",
title: "工具状态",
width: 80
},
{
field: "toolmaintain",
title: "是否校准",
width: 90
},
{
field: "maintaindate",
title: "校准日期",
width: 120
}
],
tableExcelData: []
};
},
methods: {
handletoolmaintain() {
if (this.form.toolmaintain) {
this.maintaindatedisabled = false;
this.form.maintaindate = this.$moment().format('YYYY-MM-DD');
} else {
this.form.maintaindate = ""
this.maintaindatedisabled = true;
}
},
handlesuccessExcel(response, file, filelist) {
console.log(response)
this.uploadPath = response.path;
previewimport({
file_path: response.path
}).then(res => {
if (res.errors.length > 0) {
this.$message.error(res.errors[0])
} else
this.tableExcelData = res.data;
this.$refs.uploadExcel.clearFiles();
}).catch(error => {
})
},
handleImport() {
if (this.uploadPath == "") {
this.$message.error("请上传附件");
return;
}
doimport({
file_path: this.uploadPath
}).then(res => {
if (res.length != 0) {
this.$message.error(res.join(","))
} else {
this.search();
this.dialogImportVisible = false;
this.tableExcelData = [];
}
this.uploadPath = "";
this.$refs.uploadExcel.clearFiles();
}).catch(error => {
})
},
toImport() {
this.uploadPath = "";
this.tableExcelData = [];
this.dialogImportVisible = true;
},
handleCurrentChange(page) {
this.pagination.page = page;
this.load();
},
viewImg(url) {
this.base.previewImg(url);
},
handleRemove(file, fileList) {
console.log(file, fileList);
this.form.toolimage = "";
},
handlePreview(file) {
console.log(file);
},
handlesuccess(response, file, fileList) {
console.log(response);
this.form.toolimage = response.path;
},
handleCurrentChange(page) {
this.loading = true;
this.paginations.page = page;
this.load();
},
search() {
this.loading = true;
this.paginations.page = 1;
this.load();
},
load() {
this.loading = true;
listTool({
page: this.paginations.page,
page_size: this.paginations.page_size,
client_id: this.searchFields.client_id,
keyword: this.searchFields.keyword,
toolisused: this.searchFields.status
}).then(response => {
var data = response.data;
this.tableData = data;
this.paginations.total = response.total;
this.loading = false;
}).catch(error => {
//reject(error)
})
},
querySearch(queryString, cb) {
listToolbox({
keyword: queryString,
page_size: 999
}).then(response => {
var data = response.data;
for (var m of data) {
m.value = m.name;
}
cb(data)
}).catch(error => {
//reject(error)
})
},
getFilePath(pathSring, column) {
// 获取表的图片与文件显示
if (!pathSring) return [];
// 增加图片自定义操作
// 返回格式必须是[{name:"文件名",path:"图片全路径或base64格式"}]
let filePath = pathSring.replace(/\\/g, "/").split(",");
let fileInfo = [];
for (let index = 0; index < filePath.length; index++) {
let file = filePath[index];
// 2020.12.19增加base64图片显示
if (file) {
fileInfo.push({
name: "",
path: (file.indexOf("base64,") == -1 ? "data:image/png;base64," : "") +
file,
});
}
}
return fileInfo;
},
handleSelectSClient(item) {
this.searchFields.client_id = item.id;
},
handleSelectClient(item) {
this.form.client_id = item.id;
this.layers = item.layers;
},
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //查询 头部
var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight;
that.tableHeight = tableHeight;
this.fileList = [];
},
edit(obj) {
this.form = this.$options.data().form;
this.fileList = [];
if (obj) {
console.log(obj)
var result = Object.assign(this.form, obj)
this.form = result;
this.form.client = obj.client.name;
this.form.client_id = obj.client.id;
this.layers = obj.boxlayers;
this.form.toolmaintain = this.form.toolmaintain == 1;
this.toolpnDisabled = true;
if (this.form.toolmaintain) {
this.maintaindatedisabled = false;
} else {
this.maintaindatedisabled = true;
}
if (obj.toolimage) {
this.fileList.push({
name: "",
url: (obj.toolimage.indexOf("base64,") == -1 ? "data:image/png;base64," : "") +
obj.toolimage,
});
}
this.form.layer_id = obj.layerid;
} else {
this.toolpnDisabled = false;
this.maintaindatedisabled = true;
}
this.dialogFormVisible = true;
},
del(obj) {
var that = this;
if (obj) {
this.$Modal.confirm({
title: '确认要删除数据?',
onOk: () => {
del({
id: obj.id
}).then(response => {
this.$Message.success('操作成功');
that.search();
}).catch(error => {
console.log(error)
//reject(error)
})
},
onCancel: () => {
//this.$Message.info('Clicked cancel');
}
});
}
},
submitForm(formName) {
var that = this;
this.$refs[formName].validate((valid) => {
if (valid) {
save(that.form).then(response => {
console.log(response)
this.$Message.success('操作成功');
that.dialogFormVisible = false;
that.load();
}).catch(error => {
reject(error)
})
} else {
this.$Message.error('数据校验失败');
return false;
}
});
},
resetForm(formName) {
var that = this;
this.$refs[formName].resetFields();
that.dialogFormVisible = false;
}
}
};
</script>
<style>
.toolImg {
max-height: 40px;
}
</style>