页面
This commit is contained in:
褚泓程
parent
aa5e175c77
commit
2d38600dbb
44
src/api/system/goods.js
Normal file
44
src/api/system/goods.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】列表
|
||||||
|
export function listGoods(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/goods/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】详细
|
||||||
|
export function getGoods(goodsId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/goods/' + goodsId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增【请填写功能名称】
|
||||||
|
export function addGoods(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/goods',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改【请填写功能名称】
|
||||||
|
export function updateGoods(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/goods',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除【请填写功能名称】
|
||||||
|
export function delGoods(goodsId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/goods/' + goodsId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
44
src/api/system/led.js
Normal file
44
src/api/system/led.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】列表
|
||||||
|
export function listConfig(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/led/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】详细
|
||||||
|
export function getConfig(ledId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/led/' + ledId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增【请填写功能名称】
|
||||||
|
export function addConfig(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/led',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改【请填写功能名称】
|
||||||
|
export function updateConfig(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/led',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除【请填写功能名称】
|
||||||
|
export function delConfig(ledId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/led/' + ledId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
44
src/api/system/location.js
Normal file
44
src/api/system/location.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】列表
|
||||||
|
export function listLocation(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/location/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】详细
|
||||||
|
export function getLocation(locationId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/location/' + locationId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增【请填写功能名称】
|
||||||
|
export function addLocation(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/location',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改【请填写功能名称】
|
||||||
|
export function updateLocation(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/location',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除【请填写功能名称】
|
||||||
|
export function delLocation(locationId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/location/' + locationId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
44
src/api/system/stand.js
Normal file
44
src/api/system/stand.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】列表
|
||||||
|
export function listStand(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/stand/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】详细
|
||||||
|
export function getStand(standId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/stand/' + standId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增【请填写功能名称】
|
||||||
|
export function addStand(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/stand',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改【请填写功能名称】
|
||||||
|
export function updateStand(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/stand',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除【请填写功能名称】
|
||||||
|
export function delStand(standId) {
|
||||||
|
return request({
|
||||||
|
url: '/system/stand/' + standId,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
672
src/views/system/goods/index.vue
Normal file
672
src/views/system/goods/index.vue
Normal file
|
|
@ -0,0 +1,672 @@
|
||||||
|
<template>
|
||||||
|
<div class="task-management">
|
||||||
|
<!-- 配置抽屉 -->
|
||||||
|
<el-drawer
|
||||||
|
title="页面配置"
|
||||||
|
:visible.sync="configDrawer"
|
||||||
|
direction="rtl"
|
||||||
|
size="300px"
|
||||||
|
>
|
||||||
|
<div class="drawer-content">
|
||||||
|
<h3 class="drawer-section-title">显示字段</h3>
|
||||||
|
<el-checkbox-group v-model="visibleColumns" class="column-checkboxes">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="col in allColumns"
|
||||||
|
:key="col.prop"
|
||||||
|
:label="col.prop"
|
||||||
|
>
|
||||||
|
{{ col.label }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
|
||||||
|
<h3 class="drawer-section-title">表格密度</h3>
|
||||||
|
<el-radio-group v-model="tableSize" class="density-radio">
|
||||||
|
<el-radio-button label="medium">默认</el-radio-button>
|
||||||
|
<el-radio-button label="small">紧凑</el-radio-button>
|
||||||
|
<el-radio-button label="mini">超紧凑</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<div class="search-container" :class="{ collapsed: !showSearch }">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="84px" :size="formSize">
|
||||||
|
<div class="search-form-content" :class="{ 'is-advanced': isAdvanced }">
|
||||||
|
<template v-if="isAdvanced">
|
||||||
|
<el-form-item label="物料编号" prop="goodsId">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.goodsId"
|
||||||
|
placeholder="请输入物料编号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="物料名称" prop="goodsName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.goodsName"
|
||||||
|
placeholder="请输入物料名称"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="单位" prop="goodsUnit">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.goodsUnit"
|
||||||
|
placeholder="请输入单位"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="物料类型" prop="goodsType">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.goodsType"
|
||||||
|
placeholder="请输入物料类型"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="通用容器类型" prop="normalVehicleType">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.normalVehicleType"
|
||||||
|
placeholder="请输入通用容器类型"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="物料状态" prop="goodsStatus">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.goodsStatus"
|
||||||
|
placeholder="请输入物料状态"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="最近更新用户" prop="lastUpdateUser">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.lastUpdateUser"
|
||||||
|
placeholder="请输入最近更新用户"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="search-form-footer">
|
||||||
|
<div class="left">
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
@click="toggleAdvanced"
|
||||||
|
class="advanced-toggle"
|
||||||
|
>
|
||||||
|
{{ isAdvanced ? '收起' : '展开' }}
|
||||||
|
<i :class="['el-icon-arrow-' + (isAdvanced ? 'up' : 'down')]"></i>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-s-operation"
|
||||||
|
@click="toggleSearch"
|
||||||
|
circle
|
||||||
|
size="mini"
|
||||||
|
></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<div class="toolbar-container">
|
||||||
|
<div class="left">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
v-hasPermi="['system:goods:add']"
|
||||||
|
>新增</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="single"
|
||||||
|
@click="handleUpdate"
|
||||||
|
v-hasPermi="['system:goods:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
:disabled="multiple"
|
||||||
|
@click="handleDelete"
|
||||||
|
v-hasPermi="['system:goods:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-tooltip content="导出数据" placement="top">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
icon="el-icon-download"
|
||||||
|
@click="handleExport"
|
||||||
|
v-hasPermi="['system:goods:export']"
|
||||||
|
>导出</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="导入数据" placement="top">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleImport"
|
||||||
|
v-hasPermi="['system:goods:import']"
|
||||||
|
>导入</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="列设置" placement="top">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-setting"
|
||||||
|
@click="configDrawer = true"
|
||||||
|
circle
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="刷新" placement="top">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="getList"
|
||||||
|
circle
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<div class="table-container">
|
||||||
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:data="messageList"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
highlight-current-row
|
||||||
|
@sort-change="handleSortChange"
|
||||||
|
:size="tableSize"
|
||||||
|
:max-height="tableHeight"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" align="center" fixed="left"/>
|
||||||
|
<template v-for="col in tableColumns">
|
||||||
|
<el-table-column
|
||||||
|
:key="col.prop"
|
||||||
|
:label="col.label"
|
||||||
|
:prop="col.prop"
|
||||||
|
:width="col.width"
|
||||||
|
:min-width="col.minWidth"
|
||||||
|
align="center"
|
||||||
|
:sortable="col.sortable"
|
||||||
|
:show-overflow-tooltip="col.tooltip"
|
||||||
|
v-if="isColumnVisible(col.prop)"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<template v-if="col.type === 'dict'">
|
||||||
|
<dict-tag :options="dict.type[col.dict]" :value="scope.row[col.prop]"/>
|
||||||
|
</template>
|
||||||
|
<template v-if="col.prop === 'sts'">
|
||||||
|
<dict-tag :options="dict.type.kc_sts" :value="scope.row.sts"/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="col.type === 'number'">
|
||||||
|
<span class="number-column">{{ scope.row[col.prop] }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="col.type === 'datetime'">
|
||||||
|
<span>{{ parseTime(scope.row[col.prop]) }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[col.prop] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body destroy-on-close>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
|
||||||
|
<el-form-item label="物料名称" prop="goodsName">
|
||||||
|
<el-input v-model="form.goodsName" placeholder="请输入物料名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="单位" prop="goodsUnit">
|
||||||
|
<el-input v-model="form.goodsUnit" placeholder="请输入单位" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="物料类型" prop="goodsType">
|
||||||
|
<el-input v-model="form.goodsType" placeholder="请输入物料类型" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="通用容器类型" prop="normalVehicleType">
|
||||||
|
<el-input v-model="form.normalVehicleType" placeholder="请输入通用容器类型" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="物料状态" prop="goodsStatus">
|
||||||
|
<el-input v-model="form.goodsStatus" placeholder="请输入物料状态" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="最近更新用户" prop="lastUpdateUser">
|
||||||
|
<el-input v-model="form.lastUpdateUser" placeholder="请输入最近更新用户" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="最近更新时间" prop="lastUpdateTime">
|
||||||
|
<el-date-picker clearable
|
||||||
|
v-model="form.lastUpdateTime"
|
||||||
|
type="date"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
placeholder="请选择最近更新时间">
|
||||||
|
</el-date-picker>
|
||||||
|
</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="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||||
|
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
|
||||||
|
:on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||||
|
<i class="el-icon-upload"></i>
|
||||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||||
|
<div class="el-upload__tip text-center" slot="tip">
|
||||||
|
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||||
|
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||||
|
<el-button @click="upload.open = false">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import {addMessage, updateMessage} from "@/api/system/message";
|
||||||
|
import {getToken} from "@/utils/auth";
|
||||||
|
import {addGoods, delGoods, getGoods, listGoods, updateGoods} from "@/api/system/goods";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "goods",
|
||||||
|
dicts: ['kc_sts','site_type'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
upload: {
|
||||||
|
open: false,
|
||||||
|
title: '上传文件',
|
||||||
|
headers: { Authorization: 'Bearer ' + getToken() },
|
||||||
|
url: process.env.VUE_APP_BASE_API + '/system/site/importData', // 确保这里填写正确的上传URL
|
||||||
|
isUploading: false
|
||||||
|
},
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 是否显示高级搜索
|
||||||
|
isAdvanced: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 任务表格数据
|
||||||
|
messageList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 日期范围
|
||||||
|
daterangeCreateTime: [],
|
||||||
|
// 配置抽屉显示状态
|
||||||
|
configDrawer: false,
|
||||||
|
// 表格大小
|
||||||
|
tableSize: 'small',
|
||||||
|
// 表单大小
|
||||||
|
formSize: 'small',
|
||||||
|
// 表格高度
|
||||||
|
tableHeight: window.innerHeight - 300,
|
||||||
|
// 可见列
|
||||||
|
visibleColumns: [],
|
||||||
|
// 所有列配置
|
||||||
|
allColumns: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
goodsId: null,
|
||||||
|
goodsName: null,
|
||||||
|
goodsUnit: null,
|
||||||
|
goodsType: null,
|
||||||
|
normalVehicleType: null,
|
||||||
|
goodsStatus: null,
|
||||||
|
lastUpdateUser: null,
|
||||||
|
lastUpdateTime: null
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
goodsUnit: [
|
||||||
|
{ required: true, message: "单位,不能为空不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
goodsStatus: [
|
||||||
|
{ required: true, message: "物料状态，不可为空不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前可见的表格列
|
||||||
|
tableColumns() {
|
||||||
|
return this.allColumns.filter(col => this.isColumnVisible(col.prop));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
this.initTableHeight();
|
||||||
|
window.addEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化表格高度
|
||||||
|
initTableHeight() {
|
||||||
|
this.tableHeight = window.innerHeight - 300;
|
||||||
|
},
|
||||||
|
// 处理窗口大小变化
|
||||||
|
handleResize() {
|
||||||
|
this.tableHeight = window.innerHeight - 300;
|
||||||
|
},
|
||||||
|
// 检查列是否可见
|
||||||
|
isColumnVisible(prop) {
|
||||||
|
return this.visibleColumns.includes(prop);
|
||||||
|
},
|
||||||
|
// 切换搜索区域显示
|
||||||
|
toggleSearch() {
|
||||||
|
this.showSearch = !this.showSearch;
|
||||||
|
},
|
||||||
|
/** 查询任务明细
|
||||||
|
列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
this.queryParams.params = {};
|
||||||
|
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
|
||||||
|
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
|
||||||
|
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
|
||||||
|
}
|
||||||
|
listGoods(this.queryParams).then(response => {
|
||||||
|
this.allColumns = response.columns
|
||||||
|
console.log('All columns:', this.allColumns);
|
||||||
|
this.allColumns.forEach((column) => {
|
||||||
|
this.visibleColumns.push(column.prop)
|
||||||
|
});
|
||||||
|
this.messageList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
goodsId: null,
|
||||||
|
goodsName: null,
|
||||||
|
goodsUnit: null,
|
||||||
|
goodsType: null,
|
||||||
|
normalVehicleType: null,
|
||||||
|
goodsStatus: null,
|
||||||
|
remark: null,
|
||||||
|
lastUpdateUser: null,
|
||||||
|
lastUpdateTime: null
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.daterangeCreateTime = [];
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.goodsId)
|
||||||
|
this.single = selection.length !== 1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加物料信息";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const materialCode = this.ids
|
||||||
|
getGoods(materialCode).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改物料信息";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.goodsId != null) {
|
||||||
|
updateGoods(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addGoods(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const materialCodes = row.goodsId || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除物料编号为"' + materialCodes + '"的数据项？').then(function () {
|
||||||
|
return delGoods(materialCodes);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('system/goods/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `goods_${new Date().getTime()}.xlsx`)
|
||||||
|
},
|
||||||
|
handleImport() {
|
||||||
|
this.upload.title = '导入';
|
||||||
|
this.upload.open = true;
|
||||||
|
},
|
||||||
|
/** 下载模板操作 */
|
||||||
|
importTemplate() {
|
||||||
|
this.download('/system/goods/importTemplate', {}, `bas_goods_${new Date().getTime()}.xlsx`);
|
||||||
|
},
|
||||||
|
// 文件上传中处理
|
||||||
|
handleFileUploadProgress(event, file, fileList) {
|
||||||
|
this.upload.isUploading = true;
|
||||||
|
},
|
||||||
|
// 文件上传成功处理
|
||||||
|
handleFileSuccess(response, file, fileList) {
|
||||||
|
this.upload.open = false;
|
||||||
|
this.upload.isUploading = false;
|
||||||
|
this.$refs.upload.clearFiles();
|
||||||
|
this.$alert(
|
||||||
|
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||||
|
response.msg +
|
||||||
|
'</div>',
|
||||||
|
'导入结果',
|
||||||
|
{ dangerouslyUseHTMLString: true },
|
||||||
|
);
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
// 提交上传文件
|
||||||
|
submitFileForm() {
|
||||||
|
this.$refs.upload.submit();
|
||||||
|
},
|
||||||
|
/** 排序触发事件 */
|
||||||
|
handleSortChange({ prop, order }) {
|
||||||
|
this.queryParams.orderByColumn = prop;
|
||||||
|
this.queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc';
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 切换高级搜索 */
|
||||||
|
toggleAdvanced() {
|
||||||
|
this.isAdvanced = !this.isAdvanced;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.task-management {
|
||||||
|
padding: 16px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
min-height: calc(100vh - 84px);
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
padding: 0;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
// 数字列样式
|
||||||
|
.number-column {
|
||||||
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 配置抽屉样式
|
||||||
|
.drawer-content {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.drawer-section-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-checkboxes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.density-radio {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-radio-button {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
652
src/views/system/led/index.vue
Normal file
652
src/views/system/led/index.vue
Normal file
|
|
@ -0,0 +1,652 @@
|
||||||
|
<template>
|
||||||
|
<div class="task-management">
|
||||||
|
<!-- 配置抽屉 -->
|
||||||
|
<el-drawer
|
||||||
|
title="页面配置"
|
||||||
|
:visible.sync="configDrawer"
|
||||||
|
direction="rtl"
|
||||||
|
size="300px"
|
||||||
|
>
|
||||||
|
<div class="drawer-content">
|
||||||
|
<h3 class="drawer-section-title">显示字段</h3>
|
||||||
|
<el-checkbox-group v-model="visibleColumns" class="column-checkboxes">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="col in allColumns"
|
||||||
|
:key="col.prop"
|
||||||
|
:label="col.prop"
|
||||||
|
>
|
||||||
|
{{ col.label }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
|
||||||
|
<h3 class="drawer-section-title">表格密度</h3>
|
||||||
|
<el-radio-group v-model="tableSize" class="density-radio">
|
||||||
|
<el-radio-button label="medium">默认</el-radio-button>
|
||||||
|
<el-radio-button label="small">紧凑</el-radio-button>
|
||||||
|
<el-radio-button label="mini">超紧凑</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<div class="search-container" :class="{ collapsed: !showSearch }">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="84px" :size="formSize">
|
||||||
|
<div class="search-form-content" :class="{ 'is-advanced': isAdvanced }">
|
||||||
|
<template v-if="isAdvanced">
|
||||||
|
<!-- <el-form-item label="站台名称" prop="standName">-->
|
||||||
|
<!-- <el-input-->
|
||||||
|
<!-- v-model="queryParams.standName"-->
|
||||||
|
<!-- placeholder="请输入站台名称"-->
|
||||||
|
<!-- clearable-->
|
||||||
|
<!-- @keyup.enter.native="handleQuery"-->
|
||||||
|
<!-- />-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="站台区域" prop="standArea">-->
|
||||||
|
<!-- <el-input-->
|
||||||
|
<!-- v-model="queryParams.standArea"-->
|
||||||
|
<!-- placeholder="请输入站台区域"-->
|
||||||
|
<!-- clearable-->
|
||||||
|
<!-- @keyup.enter.native="handleQuery"-->
|
||||||
|
<!-- />-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="站台属性" prop="standProperty">-->
|
||||||
|
<!-- <el-input-->
|
||||||
|
<!-- v-model="queryParams.standProperty"-->
|
||||||
|
<!-- placeholder="请输入站台属性"-->
|
||||||
|
<!-- clearable-->
|
||||||
|
<!-- @keyup.enter.native="handleQuery"-->
|
||||||
|
<!-- />-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="是否锁定" prop="isLock">-->
|
||||||
|
<!-- <el-input-->
|
||||||
|
<!-- v-model="queryParams.isLock"-->
|
||||||
|
<!-- placeholder="请输入是否锁定"-->
|
||||||
|
<!-- clearable-->
|
||||||
|
<!-- @keyup.enter.native="handleQuery"-->
|
||||||
|
<!-- />-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="search-form-footer">
|
||||||
|
<div class="left">
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
@click="toggleAdvanced"
|
||||||
|
class="advanced-toggle"
|
||||||
|
>
|
||||||
|
{{ isAdvanced ? '收起' : '展开' }}
|
||||||
|
<i :class="['el-icon-arrow-' + (isAdvanced ? 'up' : 'down')]"></i>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-s-operation"
|
||||||
|
@click="toggleSearch"
|
||||||
|
circle
|
||||||
|
size="mini"
|
||||||
|
></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<div class="toolbar-container">
|
||||||
|
<div class="left">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
v-hasPermi="['system:led:add']"
|
||||||
|
>新增</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="single"
|
||||||
|
@click="handleUpdate"
|
||||||
|
v-hasPermi="['system:led:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
:disabled="multiple"
|
||||||
|
@click="handleDelete"
|
||||||
|
v-hasPermi="['system:led:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-tooltip content="导出数据" placement="top">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
icon="el-icon-download"
|
||||||
|
@click="handleExport"
|
||||||
|
v-hasPermi="['system:led:export']"
|
||||||
|
>导出</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="导入数据" placement="top">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleImport"
|
||||||
|
v-hasPermi="['system:led:import']"
|
||||||
|
>导入</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="列设置" placement="top">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-setting"
|
||||||
|
@click="configDrawer = true"
|
||||||
|
circle
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="刷新" placement="top">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="getList"
|
||||||
|
circle
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<div class="table-container">
|
||||||
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:data="messageList"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
highlight-current-row
|
||||||
|
@sort-change="handleSortChange"
|
||||||
|
:size="tableSize"
|
||||||
|
:max-height="tableHeight"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" align="center" fixed="left"/>
|
||||||
|
<template v-for="col in tableColumns">
|
||||||
|
<el-table-column
|
||||||
|
:key="col.prop"
|
||||||
|
:label="col.label"
|
||||||
|
:prop="col.prop"
|
||||||
|
:width="col.width"
|
||||||
|
:min-width="col.minWidth"
|
||||||
|
align="center"
|
||||||
|
:sortable="col.sortable"
|
||||||
|
:show-overflow-tooltip="col.tooltip"
|
||||||
|
v-if="isColumnVisible(col.prop)"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<template v-if="col.type === 'dict'">
|
||||||
|
<dict-tag :options="dict.type[col.dict]" :value="scope.row[col.prop]"/>
|
||||||
|
</template>
|
||||||
|
<template v-if="col.prop === 'sts'">
|
||||||
|
<dict-tag :options="dict.type.kc_sts" :value="scope.row.sts"/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="col.type === 'number'">
|
||||||
|
<span class="number-column">{{ scope.row[col.prop] }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="col.type === 'datetime'">
|
||||||
|
<span>{{ parseTime(scope.row[col.prop]) }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[col.prop] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body destroy-on-close>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
|
||||||
|
<!-- <el-form-item label="站台名称" prop="standName">-->
|
||||||
|
<!-- <el-input v-model="form.standName" placeholder="请输入站台名称" />-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="站台区域" prop="standArea">-->
|
||||||
|
<!-- <el-input v-model="form.standArea" placeholder="请输入站台区域" />-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="站台类型" prop="standType">-->
|
||||||
|
<!-- <el-select v-model="form.standType" placeholder="请选择站台类型">-->
|
||||||
|
<!-- <el-option-->
|
||||||
|
<!-- v-for="dict in dict.type.site_type"-->
|
||||||
|
<!-- :key="dict.value"-->
|
||||||
|
<!-- :label="dict.label"-->
|
||||||
|
<!-- :value="dict.value"-->
|
||||||
|
<!-- ></el-option>-->
|
||||||
|
<!-- </el-select>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="站台状态" prop="standStatus">-->
|
||||||
|
<!-- <el-select v-model="form.standStatus" placeholder="请选择站台状态">-->
|
||||||
|
<!-- <el-option-->
|
||||||
|
<!-- v-for="dict in dict.type.site_status"-->
|
||||||
|
<!-- :key="dict.value"-->
|
||||||
|
<!-- :label="dict.label"-->
|
||||||
|
<!-- :value="dict.value"-->
|
||||||
|
<!-- ></el-option>-->
|
||||||
|
<!-- </el-select>-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="站台属性" prop="standProperty">-->
|
||||||
|
<!-- <el-input v-model="form.standProperty" placeholder="请输入站台属性" />-->
|
||||||
|
<!-- </el-form-item>-->
|
||||||
|
<!-- <el-form-item label="是否锁定" prop="isLock">-->
|
||||||
|
<!-- <el-input v-model="form.isLock" placeholder="请输入是否锁定" />-->
|
||||||
|
<!-- </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="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||||
|
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
|
||||||
|
:on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||||
|
<i class="el-icon-upload"></i>
|
||||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||||
|
<div class="el-upload__tip text-center" slot="tip">
|
||||||
|
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||||
|
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||||
|
<el-button @click="upload.open = false">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {listConfig, getConfig, addConfig, updateConfig, delConfig,} from "@/api/system/led";
|
||||||
|
// import {addMessage, updateMessage} from "@/api/system/message";
|
||||||
|
import {getToken} from "@/utils/auth";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "led",
|
||||||
|
dicts: ['kc_sts','site_type'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
upload: {
|
||||||
|
open: false,
|
||||||
|
title: '上传文件',
|
||||||
|
headers: { Authorization: 'Bearer ' + getToken() },
|
||||||
|
url: process.env.VUE_APP_BASE_API + '/system/led/importData', // 确保这里填写正确的上传URL
|
||||||
|
isUploading: false
|
||||||
|
},
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 是否显示高级搜索
|
||||||
|
isAdvanced: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 任务表格数据
|
||||||
|
messageList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 日期范围
|
||||||
|
daterangeCreateTime: [],
|
||||||
|
// 配置抽屉显示状态
|
||||||
|
configDrawer: false,
|
||||||
|
// 表格大小
|
||||||
|
tableSize: 'small',
|
||||||
|
// 表单大小
|
||||||
|
formSize: 'small',
|
||||||
|
// 表格高度
|
||||||
|
tableHeight: window.innerHeight - 300,
|
||||||
|
// 可见列
|
||||||
|
visibleColumns: [],
|
||||||
|
// 所有列配置
|
||||||
|
allColumns: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
// standName: [
|
||||||
|
// { required: true, message: "站台名称,不能为空不能为空", trigger: "blur" }
|
||||||
|
// ],
|
||||||
|
// standArea: [
|
||||||
|
// { required: true, message: "站台区域，不可为空不能为空", trigger: "blur" }
|
||||||
|
// ],
|
||||||
|
// standType: [
|
||||||
|
// { required: true, message: "站台类型，不能为空不能为空", trigger: "change" }
|
||||||
|
// ],
|
||||||
|
// standStatus: [
|
||||||
|
// { required: true, message: "站台状态，不能为空不能为空", trigger: "change" }
|
||||||
|
// ],
|
||||||
|
// standProperty: [
|
||||||
|
// { required: true, message: "站台属性，不能为空不能为空", trigger: "change" }
|
||||||
|
// ],
|
||||||
|
// isLock: [
|
||||||
|
// { required: true, message: "是否锁定，不能为空不能为空", trigger: "change" }
|
||||||
|
// ],
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前可见的表格列
|
||||||
|
tableColumns() {
|
||||||
|
return this.allColumns.filter(col => this.isColumnVisible(col.prop));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
this.initTableHeight();
|
||||||
|
window.addEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化表格高度
|
||||||
|
initTableHeight() {
|
||||||
|
this.tableHeight = window.innerHeight - 300;
|
||||||
|
},
|
||||||
|
// 处理窗口大小变化
|
||||||
|
handleResize() {
|
||||||
|
this.tableHeight = window.innerHeight - 300;
|
||||||
|
},
|
||||||
|
// 检查列是否可见
|
||||||
|
isColumnVisible(prop) {
|
||||||
|
return this.visibleColumns.includes(prop);
|
||||||
|
},
|
||||||
|
// 切换搜索区域显示
|
||||||
|
toggleSearch() {
|
||||||
|
this.showSearch = !this.showSearch;
|
||||||
|
},
|
||||||
|
/** 查询任务明细
|
||||||
|
列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
this.queryParams.params = {};
|
||||||
|
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
|
||||||
|
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
|
||||||
|
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
|
||||||
|
}
|
||||||
|
listConfig(this.queryParams).then(response => {
|
||||||
|
this.allColumns = response.columns
|
||||||
|
console.log('All columns:', this.allColumns);
|
||||||
|
this.allColumns.forEach((column) => {
|
||||||
|
this.visibleColumns.push(column.prop)
|
||||||
|
});
|
||||||
|
this.messageList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
// standName: null,
|
||||||
|
// standType: null,
|
||||||
|
// standArea: null,
|
||||||
|
// standProperty: null,
|
||||||
|
// standStatus: null,
|
||||||
|
// isLock: null,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.daterangeCreateTime = [];
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.ledId)
|
||||||
|
this.single = selection.length !== 1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加LED显示";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const materialCode = this.ids
|
||||||
|
getConfig(materialCode).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改LED显示";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.materialCode != null) {
|
||||||
|
updateConfig(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addConfig(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const materialCodes = row.ledId || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除id编号为"' + materialCodes + '"的数据项？').then(function () {
|
||||||
|
return delConfig(materialCodes);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('system/led/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `led_${new Date().getTime()}.xlsx`)
|
||||||
|
},
|
||||||
|
handleImport() {
|
||||||
|
this.upload.title = '导入';
|
||||||
|
this.upload.open = true;
|
||||||
|
},
|
||||||
|
/** 下载模板操作 */
|
||||||
|
importTemplate() {
|
||||||
|
this.download('/system/led/importTemplate', {}, `bas_led_${new Date().getTime()}.xlsx`);
|
||||||
|
},
|
||||||
|
// 文件上传中处理
|
||||||
|
handleFileUploadProgress(event, file, fileList) {
|
||||||
|
this.upload.isUploading = true;
|
||||||
|
},
|
||||||
|
// 文件上传成功处理
|
||||||
|
handleFileSuccess(response, file, fileList) {
|
||||||
|
this.upload.open = false;
|
||||||
|
this.upload.isUploading = false;
|
||||||
|
this.$refs.upload.clearFiles();
|
||||||
|
this.$alert(
|
||||||
|
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||||
|
response.msg +
|
||||||
|
'</div>',
|
||||||
|
'导入结果',
|
||||||
|
{ dangerouslyUseHTMLString: true },
|
||||||
|
);
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
// 提交上传文件
|
||||||
|
submitFileForm() {
|
||||||
|
this.$refs.upload.submit();
|
||||||
|
},
|
||||||
|
/** 排序触发事件 */
|
||||||
|
handleSortChange({ prop, order }) {
|
||||||
|
this.queryParams.orderByColumn = prop;
|
||||||
|
this.queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc';
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 切换高级搜索 */
|
||||||
|
toggleAdvanced() {
|
||||||
|
this.isAdvanced = !this.isAdvanced;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.task-management {
|
||||||
|
padding: 16px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
min-height: calc(100vh - 84px);
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
padding: 0;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
// 数字列样式
|
||||||
|
.number-column {
|
||||||
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 配置抽屉样式
|
||||||
|
.drawer-content {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.drawer-section-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-checkboxes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.density-radio {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-radio-button {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
784
src/views/system/location/index.vue
Normal file
784
src/views/system/location/index.vue
Normal file
|
|
@ -0,0 +1,784 @@
|
||||||
|
<template>
|
||||||
|
<div class="task-management">
|
||||||
|
<!-- 配置抽屉 -->
|
||||||
|
<el-drawer
|
||||||
|
title="页面配置"
|
||||||
|
:visible.sync="configDrawer"
|
||||||
|
direction="rtl"
|
||||||
|
size="300px"
|
||||||
|
>
|
||||||
|
<div class="drawer-content">
|
||||||
|
<h3 class="drawer-section-title">显示字段</h3>
|
||||||
|
<el-checkbox-group v-model="visibleColumns" class="column-checkboxes">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="col in allColumns"
|
||||||
|
:key="col.prop"
|
||||||
|
:label="col.prop"
|
||||||
|
>
|
||||||
|
{{ col.label }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
|
||||||
|
<h3 class="drawer-section-title">表格密度</h3>
|
||||||
|
<el-radio-group v-model="tableSize" class="density-radio">
|
||||||
|
<el-radio-button label="medium">默认</el-radio-button>
|
||||||
|
<el-radio-button label="small">紧凑</el-radio-button>
|
||||||
|
<el-radio-button label="mini">超紧凑</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<div class="search-container" :class="{ collapsed: !showSearch }">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="84px" :size="formSize">
|
||||||
|
<div class="search-form-content" :class="{ 'is-advanced': isAdvanced }">
|
||||||
|
<template v-if="isAdvanced">
|
||||||
|
<el-form-item label="库位号" prop="locationId">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.locationId"
|
||||||
|
placeholder="请输入库位号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="库位类型" prop="locationType">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.locationType"
|
||||||
|
placeholder="请输入库位类型"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="库位状态" prop="locationStatus">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.locationStatus"
|
||||||
|
placeholder="请输入库位状态"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="外部库位号" prop="outerId">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.outerId"
|
||||||
|
placeholder="请输入外部库位号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="库区号" prop="areaId">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.areaId"
|
||||||
|
placeholder="请输入库区号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="巷道号" prop="tunnelId">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.tunnelId"
|
||||||
|
placeholder="请输入巷道号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备号" prop="equipmentId">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.equipmentId"
|
||||||
|
placeholder="请输入设备号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排" prop="wRow">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.wRow"
|
||||||
|
placeholder="请输入排"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="列" prop="wCol">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.wCol"
|
||||||
|
placeholder="请输入列"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="层" prop="wLayer">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.wLayer"
|
||||||
|
placeholder="请输入层"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="深度" prop="wDepth">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.wDepth"
|
||||||
|
placeholder="请输入深度"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否锁定" prop="isLock">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.isLock"
|
||||||
|
placeholder="请输入是否锁定"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="载具号" prop="vehicleId">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.vehicleId"
|
||||||
|
placeholder="请输入载具号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否正在工作" prop="isWorking">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.isWorking"
|
||||||
|
placeholder="请输入是否正在工作"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="search-form-footer">
|
||||||
|
<div class="left">
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
@click="toggleAdvanced"
|
||||||
|
class="advanced-toggle"
|
||||||
|
>
|
||||||
|
{{ isAdvanced ? '收起' : '展开' }}
|
||||||
|
<i :class="['el-icon-arrow-' + (isAdvanced ? 'up' : 'down')]"></i>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-s-operation"
|
||||||
|
@click="toggleSearch"
|
||||||
|
circle
|
||||||
|
size="mini"
|
||||||
|
></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<div class="toolbar-container">
|
||||||
|
<div class="left">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
v-hasPermi="['system:location:add']"
|
||||||
|
>新增</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="single"
|
||||||
|
@click="handleUpdate"
|
||||||
|
v-hasPermi="['system:location:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
:disabled="multiple"
|
||||||
|
@click="handleDelete"
|
||||||
|
v-hasPermi="['system:location:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-tooltip content="导出数据" placement="top">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
icon="el-icon-download"
|
||||||
|
@click="handleExport"
|
||||||
|
v-hasPermi="['system:location:export']"
|
||||||
|
>导出</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="导入数据" placement="top">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleImport"
|
||||||
|
v-hasPermi="['system:location:import']"
|
||||||
|
>导入</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="列设置" placement="top">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-setting"
|
||||||
|
@click="configDrawer = true"
|
||||||
|
circle
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="刷新" placement="top">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="getList"
|
||||||
|
circle
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<div class="table-container">
|
||||||
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:data="messageList"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
highlight-current-row
|
||||||
|
@sort-change="handleSortChange"
|
||||||
|
:size="tableSize"
|
||||||
|
:max-height="tableHeight"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" align="center" fixed="left"/>
|
||||||
|
<template v-for="col in tableColumns">
|
||||||
|
<el-table-column
|
||||||
|
:key="col.prop"
|
||||||
|
:label="col.label"
|
||||||
|
:prop="col.prop"
|
||||||
|
:width="col.width"
|
||||||
|
:min-width="col.minWidth"
|
||||||
|
align="center"
|
||||||
|
:sortable="col.sortable"
|
||||||
|
:show-overflow-tooltip="col.tooltip"
|
||||||
|
v-if="isColumnVisible(col.prop)"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<template v-if="col.type === 'dict'">
|
||||||
|
<dict-tag :options="dict.type[col.dict]" :value="scope.row[col.prop]"/>
|
||||||
|
</template>
|
||||||
|
<template v-if="col.prop === 'sts'">
|
||||||
|
<dict-tag :options="dict.type.kc_sts" :value="scope.row.sts"/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="col.type === 'number'">
|
||||||
|
<span class="number-column">{{ scope.row[col.prop] }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="col.type === 'datetime'">
|
||||||
|
<span>{{ parseTime(scope.row[col.prop]) }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[col.prop] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body destroy-on-close>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="库位号" prop="locationId">
|
||||||
|
<el-input v-model="form.locationId" placeholder="请输入库位号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="库位类型" prop="locationType">
|
||||||
|
<el-input v-model="form.locationType" placeholder="请输入库位类型" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="库位状态" prop="locationStatus">
|
||||||
|
<el-input v-model="form.locationStatus" placeholder="请输入库位状态" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="外部库位号" prop="outerId">
|
||||||
|
<el-input v-model="form.outerId" placeholder="请输入外部库位号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="库区号" prop="areaId">
|
||||||
|
<el-input v-model="form.areaId" placeholder="请输入库区号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="巷道号" prop="tunnelId">
|
||||||
|
<el-input v-model="form.tunnelId" placeholder="请输入巷道号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备号" prop="equipmentId">
|
||||||
|
<el-input v-model="form.equipmentId" placeholder="请输入设备号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排" prop="wRow">
|
||||||
|
<el-input v-model="form.wRow" placeholder="请输入排" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="列" prop="wCol">
|
||||||
|
<el-input v-model="form.wCol" placeholder="请输入列" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="层" prop="wLayer">
|
||||||
|
<el-input v-model="form.wLayer" placeholder="请输入层" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="深度" prop="wDepth">
|
||||||
|
<el-input v-model="form.wDepth" placeholder="请输入深度" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否锁定" prop="isLock">
|
||||||
|
<el-input v-model="form.isLock" placeholder="请输入是否锁定" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="载具号" prop="vehicleId">
|
||||||
|
<el-input v-model="form.vehicleId" placeholder="请输入载具号" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注" prop="remark">
|
||||||
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否正在工作" prop="isWorking">
|
||||||
|
<el-input v-model="form.isWorking" placeholder="请输入是否正在工作" />
|
||||||
|
</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="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||||
|
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
|
||||||
|
:on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||||
|
<i class="el-icon-upload"></i>
|
||||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||||
|
<div class="el-upload__tip text-center" slot="tip">
|
||||||
|
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||||
|
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||||
|
<el-button @click="upload.open = false">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {listLocation, getLocation, addLocation, updateLocation, delLocation} from "@/api/system/location";
|
||||||
|
// import {addMessage, updateMessage} from "@/api/system/message";
|
||||||
|
import {getToken} from "@/utils/auth";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "location",
|
||||||
|
dicts: ['kc_sts','site_type'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
upload: {
|
||||||
|
open: false,
|
||||||
|
title: '上传文件',
|
||||||
|
headers: { Authorization: 'Bearer ' + getToken() },
|
||||||
|
url: process.env.VUE_APP_BASE_API + '/system/location/importData', // 确保这里填写正确的上传URL
|
||||||
|
isUploading: false
|
||||||
|
},
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 是否显示高级搜索
|
||||||
|
isAdvanced: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 任务表格数据
|
||||||
|
messageList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 日期范围
|
||||||
|
daterangeCreateTime: [],
|
||||||
|
// 配置抽屉显示状态
|
||||||
|
configDrawer: false,
|
||||||
|
// 表格大小
|
||||||
|
tableSize: 'small',
|
||||||
|
// 表单大小
|
||||||
|
formSize: 'small',
|
||||||
|
// 表格高度
|
||||||
|
tableHeight: window.innerHeight - 300,
|
||||||
|
// 可见列
|
||||||
|
visibleColumns: [],
|
||||||
|
// 所有列配置
|
||||||
|
allColumns: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
locationType: null,
|
||||||
|
locationStatus: null,
|
||||||
|
outerId: null,
|
||||||
|
areaId: null,
|
||||||
|
tunnelId: null,
|
||||||
|
equipmentId: null,
|
||||||
|
wRow: null,
|
||||||
|
wCol: null,
|
||||||
|
wLayer: null,
|
||||||
|
wDepth: null,
|
||||||
|
isLock: null,
|
||||||
|
vehicleId: null,
|
||||||
|
isWorking: null
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
locationId: [
|
||||||
|
{ required: true, message: "库位号不能为空", trigger: "change" }
|
||||||
|
],
|
||||||
|
locationType: [
|
||||||
|
{ required: true, message: "库位类型不能为空", trigger: "change" }
|
||||||
|
],
|
||||||
|
locationStatus: [
|
||||||
|
{ required: true, message: "库位状态不能为空", trigger: "change" }
|
||||||
|
],
|
||||||
|
areaId: [
|
||||||
|
{ required: true, message: "库区号不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
tunnelId: [
|
||||||
|
{ required: true, message: "巷道号不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
equipmentId: [
|
||||||
|
{ required: true, message: "设备号不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
wRow: [
|
||||||
|
{ required: true, message: "排不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
wCol: [
|
||||||
|
{ required: true, message: "列不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
wLayer: [
|
||||||
|
{ required: true, message: "层不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
wDepth: [
|
||||||
|
{ required: true, message: "深度不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
isLock: [
|
||||||
|
{ required: true, message: "是否锁定不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
isWorking: [
|
||||||
|
{ required: true, message: "是否正在工作不能为空", trigger: "blur" }
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前可见的表格列
|
||||||
|
tableColumns() {
|
||||||
|
return this.allColumns.filter(col => this.isColumnVisible(col.prop));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
this.initTableHeight();
|
||||||
|
window.addEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化表格高度
|
||||||
|
initTableHeight() {
|
||||||
|
this.tableHeight = window.innerHeight - 300;
|
||||||
|
},
|
||||||
|
// 处理窗口大小变化
|
||||||
|
handleResize() {
|
||||||
|
this.tableHeight = window.innerHeight - 300;
|
||||||
|
},
|
||||||
|
// 检查列是否可见
|
||||||
|
isColumnVisible(prop) {
|
||||||
|
return this.visibleColumns.includes(prop);
|
||||||
|
},
|
||||||
|
// 切换搜索区域显示
|
||||||
|
toggleSearch() {
|
||||||
|
this.showSearch = !this.showSearch;
|
||||||
|
},
|
||||||
|
/** 查询任务明细
|
||||||
|
列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
this.queryParams.params = {};
|
||||||
|
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
|
||||||
|
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
|
||||||
|
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
|
||||||
|
}
|
||||||
|
listLocation(this.queryParams).then(response => {
|
||||||
|
this.allColumns = response.columns
|
||||||
|
console.log('All columns:', this.allColumns);
|
||||||
|
this.allColumns.forEach((column) => {
|
||||||
|
this.visibleColumns.push(column.prop)
|
||||||
|
});
|
||||||
|
this.messageList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
locationId: null,
|
||||||
|
locationType: null,
|
||||||
|
locationStatus: null,
|
||||||
|
outerId: null,
|
||||||
|
areaId: null,
|
||||||
|
tunnelId: null,
|
||||||
|
equipmentId: null,
|
||||||
|
wRow: null,
|
||||||
|
wCol: null,
|
||||||
|
wLayer: null,
|
||||||
|
wDepth: null,
|
||||||
|
isLock: null,
|
||||||
|
vehicleId: null,
|
||||||
|
remark: null,
|
||||||
|
isWorking: null
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.daterangeCreateTime = [];
|
||||||
|
this.resetForm("queryForm");
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.locationId)
|
||||||
|
this.single = selection.length !== 1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset();
|
||||||
|
this.open = true;
|
||||||
|
this.title = "添加库位";
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset();
|
||||||
|
const materialCode = this.ids
|
||||||
|
getLocation(materialCode).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改库位";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.materialCode != null) {
|
||||||
|
updateLocation(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addLocation(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const materialCodes = row.locationId || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除库位号为"' + materialCodes + '"的数据项？').then(function () {
|
||||||
|
return delLocation(materialCodes);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('system/location/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `location_${new Date().getTime()}.xlsx`)
|
||||||
|
},
|
||||||
|
handleImport() {
|
||||||
|
this.upload.title = '导入';
|
||||||
|
this.upload.open = true;
|
||||||
|
},
|
||||||
|
/** 下载模板操作 */
|
||||||
|
importTemplate() {
|
||||||
|
this.download('/system/location/importTemplate', {}, `bas_location_${new Date().getTime()}.xlsx`);
|
||||||
|
},
|
||||||
|
// 文件上传中处理
|
||||||
|
handleFileUploadProgress(event, file, fileList) {
|
||||||
|
this.upload.isUploading = true;
|
||||||
|
},
|
||||||
|
// 文件上传成功处理
|
||||||
|
handleFileSuccess(response, file, fileList) {
|
||||||
|
this.upload.open = false;
|
||||||
|
this.upload.isUploading = false;
|
||||||
|
this.$refs.upload.clearFiles();
|
||||||
|
this.$alert(
|
||||||
|
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||||
|
response.msg +
|
||||||
|
'</div>',
|
||||||
|
'导入结果',
|
||||||
|
{ dangerouslyUseHTMLString: true },
|
||||||
|
);
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
// 提交上传文件
|
||||||
|
submitFileForm() {
|
||||||
|
this.$refs.upload.submit();
|
||||||
|
},
|
||||||
|
/** 排序触发事件 */
|
||||||
|
handleSortChange({ prop, order }) {
|
||||||
|
this.queryParams.orderByColumn = prop;
|
||||||
|
this.queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc';
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 切换高级搜索 */
|
||||||
|
toggleAdvanced() {
|
||||||
|
this.isAdvanced = !this.isAdvanced;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.task-management {
|
||||||
|
padding: 16px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
min-height: calc(100vh - 84px);
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
padding: 0;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
// 数字列样式
|
||||||
|
.number-column {
|
||||||
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 配置抽屉样式
|
||||||
|
.drawer-content {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.drawer-section-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-checkboxes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.density-radio {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-radio-button {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
657
src/views/system/stand/index.vue
Normal file
657
src/views/system/stand/index.vue
Normal file
|
|
@ -0,0 +1,657 @@
|
||||||
|
<template>
|
||||||
|
<div class="task-management">
|
||||||
|
<!-- 配置抽屉 -->
|
||||||
|
<el-drawer
|
||||||
|
title="页面配置"
|
||||||
|
:visible.sync="configDrawer"
|
||||||
|
direction="rtl"
|
||||||
|
size="300px"
|
||||||
|
>
|
||||||
|
<div class="drawer-content">
|
||||||
|
<h3 class="drawer-section-title">显示字段</h3>
|
||||||
|
<el-checkbox-group v-model="visibleColumns" class="column-checkboxes">
|
||||||
|
<el-checkbox
|
||||||
|
v-for="col in allColumns"
|
||||||
|
:key="col.prop"
|
||||||
|
:label="col.prop"
|
||||||
|
>
|
||||||
|
{{ col.label }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
|
||||||
|
<h3 class="drawer-section-title">表格密度</h3>
|
||||||
|
<el-radio-group v-model="tableSize" class="density-radio">
|
||||||
|
<el-radio-button label="medium">默认</el-radio-button>
|
||||||
|
<el-radio-button label="small">紧凑</el-radio-button>
|
||||||
|
<el-radio-button label="mini">超紧凑</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
|
||||||
|
<!-- 搜索区域 -->
|
||||||
|
<div class="search-container" :class="{ collapsed: !showSearch }">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="84px" :size="formSize">
|
||||||
|
<div class="search-form-content" :class="{ 'is-advanced': isAdvanced }">
|
||||||
|
<template v-if="isAdvanced">
|
||||||
|
<el-form-item label="站台名称" prop="standName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.standName"
|
||||||
|
placeholder="请输入站台名称"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="站台区域" prop="standArea">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.standArea"
|
||||||
|
placeholder="请输入站台区域"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="站台属性" prop="standProperty">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.standProperty"
|
||||||
|
placeholder="请输入站台属性"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否锁定" prop="isLock">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.isLock"
|
||||||
|
placeholder="请输入是否锁定"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="search-form-footer">
|
||||||
|
<div class="left">
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
@click="toggleAdvanced"
|
||||||
|
class="advanced-toggle"
|
||||||
|
>
|
||||||
|
{{ isAdvanced ? '收起' : '展开' }}
|
||||||
|
<i :class="['el-icon-arrow-' + (isAdvanced ? 'up' : 'down')]"></i>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-s-operation"
|
||||||
|
@click="toggleSearch"
|
||||||
|
circle
|
||||||
|
size="mini"
|
||||||
|
></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<!-- 工具栏 -->
|
||||||
|
<div class="toolbar-container">
|
||||||
|
<div class="left">
|
||||||
|
<el-button-group>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
v-hasPermi="['system:site:add']"
|
||||||
|
>新增</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="single"
|
||||||
|
@click="handleUpdate"
|
||||||
|
v-hasPermi="['system:site:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
:disabled="multiple"
|
||||||
|
@click="handleDelete"
|
||||||
|
v-hasPermi="['system:site:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</el-button-group>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-tooltip content="导出数据" placement="top">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
icon="el-icon-download"
|
||||||
|
@click="handleExport"
|
||||||
|
v-hasPermi="['system:site:export']"
|
||||||
|
>导出</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="导入数据" placement="top">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleImport"
|
||||||
|
v-hasPermi="['system:location:import']"
|
||||||
|
>导入</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="列设置" placement="top">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-setting"
|
||||||
|
@click="configDrawer = true"
|
||||||
|
circle
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="刷新" placement="top">
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="getList"
|
||||||
|
circle
|
||||||
|
></el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<div class="table-container">
|
||||||
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:data="messageList"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
border
|
||||||
|
stripe
|
||||||
|
highlight-current-row
|
||||||
|
@sort-change="handleSortChange"
|
||||||
|
:size="tableSize"
|
||||||
|
:max-height="tableHeight"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" align="center" fixed="left"/>
|
||||||
|
<template v-for="col in tableColumns">
|
||||||
|
<el-table-column
|
||||||
|
:key="col.prop"
|
||||||
|
:label="col.label"
|
||||||
|
:prop="col.prop"
|
||||||
|
:width="col.width"
|
||||||
|
:min-width="col.minWidth"
|
||||||
|
align="center"
|
||||||
|
:sortable="col.sortable"
|
||||||
|
:show-overflow-tooltip="col.tooltip"
|
||||||
|
v-if="isColumnVisible(col.prop)"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<template v-if="col.type === 'dict'">
|
||||||
|
<dict-tag :options="dict.type[col.dict]" :value="scope.row[col.prop]"/>
|
||||||
|
</template>
|
||||||
|
<template v-if="col.prop === 'sts'">
|
||||||
|
<dict-tag :options="dict.type.kc_sts" :value="scope.row.sts"/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="col.type === 'number'">
|
||||||
|
<span class="number-column">{{ scope.row[col.prop] }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="col.type === 'datetime'">
|
||||||
|
<span>{{ parseTime(scope.row[col.prop]) }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[col.prop] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body destroy-on-close>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
|
||||||
|
<el-form-item label="站台名称" prop="standName">
|
||||||
|
<el-input v-model="form.standName" placeholder="请输入站台名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="站台区域" prop="standArea">
|
||||||
|
<el-input v-model="form.standArea" placeholder="请输入站台区域" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="站台类型" prop="standType">
|
||||||
|
<el-select v-model="form.standType" placeholder="请选择站台类型">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.site_type"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="站台状态" prop="standStatus">
|
||||||
|
<el-select v-model="form.standStatus" placeholder="请选择站台状态">
|
||||||
|
<el-option
|
||||||
|
v-for="dict in dict.type.site_status"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.label"
|
||||||
|
:value="dict.value"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="站台属性" prop="standProperty">
|
||||||
|
<el-input v-model="form.standProperty" placeholder="请输入站台属性" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否锁定" prop="isLock">
|
||||||
|
<el-input v-model="form.isLock" placeholder="请输入是否锁定" />
|
||||||
|
</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="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||||||
|
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
|
||||||
|
:on-success="handleFileSuccess" :auto-upload="false" drag>
|
||||||
|
<i class="el-icon-upload"></i>
|
||||||
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||||
|
<div class="el-upload__tip text-center" slot="tip">
|
||||||
|
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||||
|
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||||
|
<el-button @click="upload.open = false">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {listStand, getStand, delStand, addStand, updateStand} from "@/api/system/stand";
|
||||||
|
// import {addMessage, updateMessage} from "@/api/system/message";
|
||||||
|
import {getToken} from "@/utils/auth";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "stand",
|
||||||
|
dicts: ['kc_sts','site_type'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
upload: {
|
||||||
|
open: false,
|
||||||
|
title: '上传文件',
|
||||||
|
headers: { Authorization: 'Bearer ' + getToken() },
|
||||||
|
url: process.env.VUE_APP_BASE_API + '/system/site/importData', // 确保这里填写正确的上传URL
|
||||||
|
isUploading: false
|
||||||
|
},
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 是否显示高级搜索
|
||||||
|
isAdvanced: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 任务表格数据
|
||||||
|
messageList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 日期范围
|
||||||
|
daterangeCreateTime: [],
|
||||||
|
// 配置抽屉显示状态
|
||||||
|
configDrawer: false,
|
||||||
|
// 表格大小
|
||||||
|
tableSize: 'small',
|
||||||
|
// 表单大小
|
||||||
|
formSize: 'small',
|
||||||
|
// 表格高度
|
||||||
|
tableHeight: window.innerHeight - 300,
|
||||||
|
// 可见列
|
||||||
|
visibleColumns: [],
|
||||||
|
// 所有列配置
|
||||||
|
allColumns: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
standName: null,
|
||||||
|
standType: null,
|
||||||
|
standArea: null,
|
||||||
|
standProperty: null,
|
||||||
|
standStatus: null,
|
||||||
|
isLock: null,
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
standName: [
|
||||||
|
{ required: true, message: "站台名称,不能为空不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
standArea: [
|
||||||
|
{ required: true, message: "站台区域，不可为空不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
standType: [
|
||||||
|
{ required: true, message: "站台类型，不能为空不能为空", trigger: "change" }
|
||||||
|
],
|
||||||
|
standStatus: [
|
||||||
|
{ required: true, message: "站台状态，不能为空不能为空", trigger: "change" }
|
||||||
|
],
|
||||||
|
standProperty: [
|
||||||
|
{ required: true, message: "站台属性，不能为空不能为空", trigger: "change" }
|
||||||
|
],
|
||||||
|
isLock: [
|
||||||
|
{ required: true, message: "是否锁定，不能为空不能为空", trigger: "change" }
|
||||||
|
],
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前可见的表格列
|
||||||
|
tableColumns() {
|
||||||
|
return this.allColumns.filter(col => this.isColumnVisible(col.prop));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
this.initTableHeight();
|
||||||
|
window.addEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.handleResize);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化表格高度
|
||||||
|
initTableHeight() {
|
||||||
|
this.tableHeight = window.innerHeight - 300;
|
||||||
|
},
|
||||||
|
// 处理窗口大小变化
|
||||||
|
handleResize() {
|
||||||
|
this.tableHeight = window.innerHeight - 300;
|
||||||
|
},
|
||||||
|
// 检查列是否可见
|
||||||
|
isColumnVisible(prop) {
|
||||||
|
return this.visibleColumns.includes(prop);
|
||||||
|
},
|
||||||
|
// 切换搜索区域显示
|
||||||
|
toggleSearch() {
|
||||||
|
this.showSearch = !this.showSearch;
|
||||||
|
},
|
||||||
|
/** 查询任务明细
|
||||||
|
列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
this.queryParams.params = {};
|
||||||
|
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
|
||||||
|
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
|
||||||
|
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
|
||||||
|
}
|
||||||
|
listStand(this.queryParams).then(response => {
|
||||||
|
this.allColumns = response.columns
|
||||||
|
console.log('All columns:', this.allColumns);
|
||||||
|
this.allColumns.forEach((column) => {
|
||||||
|
this.visibleColumns.push(column.prop)
|
||||||
|
});
|
||||||
|
this.messageList = response.rows;
|
||||||
|
this.total = response.total;
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false;
|
||||||
|
this.reset();
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
standName: null,
|
||||||
|
standType: null,
|
||||||
|
standArea: null,
|
||||||
|
standProperty: null,
|
||||||
|
standStatus: null,
|
||||||
|
isLock: null,
|
||||||
|
};
|
||||||
|
this.resetForm("form");
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.daterangeCreateTime = [];
|
||||||
|
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 materialCode = this.ids
|
||||||
|
getStand(materialCode).then(response => {
|
||||||
|
this.form = response.data;
|
||||||
|
this.open = true;
|
||||||
|
this.title = "修改站点";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.materialCode != null) {
|
||||||
|
updateStand(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
addStand(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功");
|
||||||
|
this.open = false;
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const materialCodes = row.materialCode || this.ids;
|
||||||
|
this.$modal.confirm('是否确认删除id编号为"' + materialCodes + '"的数据项？').then(function () {
|
||||||
|
return delStand(materialCodes);
|
||||||
|
}).then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.$modal.msgSuccess("删除成功");
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('system/site/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `material_${new Date().getTime()}.xlsx`)
|
||||||
|
},
|
||||||
|
handleImport() {
|
||||||
|
this.upload.title = '导入';
|
||||||
|
this.upload.open = true;
|
||||||
|
},
|
||||||
|
/** 下载模板操作 */
|
||||||
|
importTemplate() {
|
||||||
|
this.download('/system/site/importTemplate', {}, `bas_site_${new Date().getTime()}.xlsx`);
|
||||||
|
},
|
||||||
|
// 文件上传中处理
|
||||||
|
handleFileUploadProgress(event, file, fileList) {
|
||||||
|
this.upload.isUploading = true;
|
||||||
|
},
|
||||||
|
// 文件上传成功处理
|
||||||
|
handleFileSuccess(response, file, fileList) {
|
||||||
|
this.upload.open = false;
|
||||||
|
this.upload.isUploading = false;
|
||||||
|
this.$refs.upload.clearFiles();
|
||||||
|
this.$alert(
|
||||||
|
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||||
|
response.msg +
|
||||||
|
'</div>',
|
||||||
|
'导入结果',
|
||||||
|
{ dangerouslyUseHTMLString: true },
|
||||||
|
);
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
// 提交上传文件
|
||||||
|
submitFileForm() {
|
||||||
|
this.$refs.upload.submit();
|
||||||
|
},
|
||||||
|
/** 排序触发事件 */
|
||||||
|
handleSortChange({ prop, order }) {
|
||||||
|
this.queryParams.orderByColumn = prop;
|
||||||
|
this.queryParams.isAsc = order === 'ascending' ? 'asc' : 'desc';
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 切换高级搜索 */
|
||||||
|
toggleAdvanced() {
|
||||||
|
this.isAdvanced = !this.isAdvanced;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.task-management {
|
||||||
|
padding: 16px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
min-height: calc(100vh - 84px);
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
padding: 0;
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 16px;
|
||||||
|
border-top: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
// 数字列样式
|
||||||
|
.number-column {
|
||||||
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 配置抽屉样式
|
||||||
|
.drawer-content {
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.drawer-section-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-checkboxes {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.density-radio {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-radio-button {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user