lianmei
/
dc-ui
mirror of https://gitee.com/lmlz_0/dc-ui.git
3
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'develop' of https://gitee.com/lmlz_0/dc-ui into develop

develop
18512435990 8 months ago
parent
f0767a22e8 29f2beb09c
commit
f536b58f04
7 changed files with 1281 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      src/api/model/busiCodeConfig.js
  2. 44
      src/api/model/codeDefine.js
  3. 4
      src/api/model/device.js
  4. 37
      src/api/model/deviceImportInfo.js
  5. 353
      src/views/model/busiCodeConfig/index.vue
  6. 370
      src/views/model/codeDefine/index.vue
  7. 421
      src/views/model/deviceImportInfo/index.vue

54
src/api/model/busiCodeConfig.js
View File

@ -0,0 +1,54 @@
import request from '@/utils/request'
// 查询业务编码配置列表
export function listBusiCodeConfig(query) {
return request({
url: '/model/busiCodeConfig/list',
method: 'get',
params: query
})
}
// 查询业务编码配置详细
export function getBusiCodeConfig(id) {
return request({
url: '/model/busiCodeConfig/' + id,
method: 'get'
})
}
// 新增业务编码配置
export function addBusiCodeConfig(data) {
return request({
url: '/model/busiCodeConfig',
method: 'post',
data: data
})
}
// 修改业务编码配置
export function updateBusiCodeConfig(data) {
return request({
url: '/model/busiCodeConfig',
method: 'put',
data: data
})
}
// 删除业务编码配置
export function delBusiCodeConfig(id) {
return request({
url: '/model/busiCodeConfig/' + id,
method: 'delete'
})
}
// 查询编码规则列表
export function listCodeConfig(query) {
return request({
url: '/model/codeDefine/list',
method: 'get',
params: query
})
}

44
src/api/model/codeDefine.js
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询编码规则定义列表
export function listCodeDefine(query) {
return request({
url: '/model/codeDefine/list',
method: 'get',
params: query
})
}
// 查询编码规则定义详细
export function getCodeDefine(id) {
return request({
url: '/model/codeDefine/' + id,
method: 'get'
})
}
// 新增编码规则定义
export function addCodeDefine(data) {
return request({
url: '/model/codeDefine',
method: 'post',
data: data
})
}
// 修改编码规则定义
export function updateCodeDefine(data) {
return request({
url: '/model/codeDefine',
method: 'put',
data: data
})
}
// 删除编码规则定义
export function delCodeDefine(id) {
return request({
url: '/model/codeDefine/' + id,
method: 'delete'
})
}

4
src/api/model/device.js
View File

@ -63,8 +63,8 @@ export function exportDevice(query) {
//获取总台设备的UUID
export function getUuid(){
return request({
url: '/model/dcBaseDeviceinfo/getUuid',
method: 'post',
url: '/model/codeDefine/coder/device_code',
method: 'get',
})
}

37
src/api/model/deviceImportInfo.js
View File

@ -0,0 +1,37 @@
import request from '@/utils/request'
// 查询设备导入信息列表
export function listInfo(query) {
return request({
url: '/model/deviceImportInfo/list',
method: 'get',
params: query
})
}
// 删除设备导入信息
export function delInfo(id) {
return request({
url: '/model/deviceImportInfo/' + id,
method: 'delete'
})
}
// 导出设备导入信息
export function exportInfo(id) {
return request({
responseType: 'blob',
url: '/model/deviceImportInfo/export?id=' + id,
method: 'post'
})
}
// 上传设备参数信息
export function uploadInfo(param, formData) {
return request({
url: '/model/deviceImportInfo/upload',
method: 'post',
data: formData,
params: param
})
}

353
src/views/model/busiCodeConfig/index.vue
View File

@ -0,0 +1,353 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="my-custom-form">
<el-row>
<el-col :span="4">
<el-form-item label="配置名称" prop="configName" label-width="auto">
<el-input
v-model="queryParams.configName"
placeholder="请输入配置名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="业务代码" prop="nodeCode" label-width="auto">
<el-input
v-model="queryParams.nodeCode"
placeholder="请输入业务代码"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col >
<el-col :span="4">
<el-form-item class="childTextAlignLeft">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['model:busiCodeConfig:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['model:busiCodeConfig:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['model:busiCodeConfig:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['model:busiCodeConfig:export']"
>导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="busiCodeConfigList" @selection-change="handleSelectionChange" :max-height="tableHeight" :border="true" :column-width-draggable="true">
<el-table-column type="selection" width="55" align="center" fixed="left"/>
<el-table-column label="主键" align="center" :width="60" prop="id" />
<el-table-column label="配置名称" align="center" :width="240" prop="configName" />
<el-table-column label="业务代码" align="center" :width="320" prop="nodeCode" />
<el-table-column label="字段名称" align="center" :width="200" prop="columnName" />
<el-table-column label="规则ID" align="center" :width="120" prop="ruleId" >
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="200" :fixed="fixedColumns?'right':false">
<template #header>
<div class="fixed-column-header" style="text-align: center;display: block;" @dblclick="toggleFixedColumns">
<span style="text-align: center;display: block;">操作<img style="width:10px;margin-left:5px" v-show="fixedColumns" :src="lock" alt="Image"/></span>
</div>
</template>
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['model:busiCodeConfig:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['model:busiCodeConfig:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改业务编码配置对话框 -->
<el-dialog :title="title" v-model="open" width="60%" append-to-body :close-on-click-modal="true" draggable>
<el-form ref="busiCodeConfigRef" :model="form" :rules="rules" label-width="120px" class="my-custom-form">
<el-row>
<el-col :span="12">
<el-form-item label="配置名称" prop="configName">
<el-input v-model="form.configName" placeholder="请输入配置名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="业务代码" prop="nodeCode">
<el-input v-model="form.nodeCode" placeholder="请输入业务代码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="字段名称" prop="columnName">
<el-input v-model="form.columnName" placeholder="请输入字段名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规则ID" prop="ruleId">
<el-select v-model="form.ruleId" placeholder="请选择规则">
<el-option
v-for="item in CodeRuleList"
:key="item.id"
:label="item.codeConfigName"
:value="item.id">
<span style="float: left">{{ item.codeConfigName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" >
@import "@/assets/styles/self-defined.scss";
</style>
<script setup name="BusiCodeConfig">
import { listBusiCodeConfig, getBusiCodeConfig, delBusiCodeConfig, addBusiCodeConfig, updateBusiCodeConfig, listCodeConfig} from "@/api/model/busiCodeConfig";
import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
const busiCodeConfigList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const tableHeight = ref("0px");
const collapseVisible = ref(false);
const fixedColumns = ref(false);
const CodeRuleList = ref([]);
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
configName: null,
nodeCode: null,
},
rules: {
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询业务编码配置列表 */
function getList() {
loading.value = true;
listBusiCodeConfig(queryParams.value).then(response => {
busiCodeConfigList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
function getCodeRul() {
let params = {
pageNum: 1,
pageSize: 10000
}
listCodeConfig(params).then(response => {
CodeRuleList.value = response.rows;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
tenantId: null,
revision: null,
createdBy: null,
createdTime: null,
updatedBy: null,
updatedTime: null,
deleteBy: null,
deleteTime: null,
id: null,
configName: null,
nodeCode: null,
columnName: null,
ruleId: null
};
proxy.resetForm("busiCodeConfigRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加业务编码配置";
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const _id = row.id || ids.value
getBusiCodeConfig(_id).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改业务编码配置";
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["busiCodeConfigRef"].validate(valid => {
if (valid) {
if (form.value.id != null) {
updateBusiCodeConfig(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addBusiCodeConfig(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除业务编码配置编号为"' + _ids + '"的数据项？').then(function() {
return delBusiCodeConfig(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('asset/busiCodeConfig/export', {
...queryParams.value
}, `busiCodeConfig_${new Date().getTime()}.xlsx`)
}
function toggleFixedColumns() {
fixedColumns.value = !fixedColumns.value;
}
onMounted(()=>{
calculateTableHeight();
window.addEventListener('resize', calculateTableHeight);
window.onresize = () => {
return (() => {
calculateTableHeight();
})()
}
})
onUnmounted(() => {
window.removeEventListener('resize', calculateTableHeight);
});
watch(
[collapseVisible,showSearch],
() => {
calculateTableHeight();
}
);
const calculateTableHeight = () => {
nextTick(() => {
const heightForm = proxy.$refs.queryRef?.$el.clientHeight || 0;
const windowHeight = window.innerHeight;
const paginationHeight = 60;
const tableHeaderHeight = 40;
const tableMargin = 20;
const remainingHeight = windowHeight - paginationHeight - tableHeaderHeight - tableMargin - heightForm - 100;
tableHeight.value = remainingHeight + 'px';
});
};
function toggleCollapse() {
collapseVisible.value = !collapseVisible.value;
if(collapseVisible.value){
editName.value = "折叠筛选项";
}else{
editName.value = "更多筛选项"
}
}
getList();
getCodeRul();
</script>

370
src/views/model/codeDefine/index.vue
View File

@ -0,0 +1,370 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" class="my-custom-form">
<el-row>
<el-col :span="4">
<el-form-item label="配置名称" prop="codeConfigName" label-width="auto">
<el-input
v-model="queryParams.codeConfigName"
placeholder="请输入配置名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="编码头" prop="codeHeader" label-width="auto">
<el-input
v-model="queryParams.codeHeader"
placeholder="请输入编码头"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item class="childTextAlignLeft">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['model:codeDefine:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['model:codeDefine:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['model:codeDefine:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['model:codeDefine:export']"
>导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" width="100%" :data="codeDefineList" @selection-change="handleSelectionChange" :max-height="tableHeight" :border="true" :column-width-draggable="true">
<el-table-column type="selection" width="55" align="center" fixed="left"/>
<el-table-column label="配置ID" align="center" :width="80" prop="id" />
<el-table-column label="配置名称" align="center" :width="200" prop="codeConfigName" />
<el-table-column label="编码头" align="center" :width="120" prop="codeHeader" />
<el-table-column label="编码体类型" align="center" :width="180" prop="codeBodyType">
<template #default="scope">
<dict-tag :options="dc_coderule_body_type" :value="scope.row.codeBodyType"/>
</template>
</el-table-column>
<el-table-column label="编码体" align="center" :width="200" prop="codeBody" />
<el-table-column label="流水号长度" align="center" :width="120" prop="codeSerialLength" />
<el-table-column label="分割符" align="center" :width="80" prop="codeSplitFlag">
<template #default="scope">
<dict-tag :options="dc_code_split" :value="scope.row.codeSplitFlag"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" :width="200" :fixed="fixedColumns?'right':false">
<template #header>
<div class="fixed-column-header" style="text-align: center;display: block;" @dblclick="toggleFixedColumns">
<span style="text-align: center;display: block;">操作<img style="width:10px;margin-left:5px" v-show="fixedColumns" :src="lock" alt="Image"/></span>
</div>
</template>
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['model:codeDefine:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['model:codeDefine:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改编码规则定义对话框 -->
<el-dialog :title="title" v-model="open" width="60%" append-to-body :close-on-click-modal="true" draggable>
<el-form ref="codeDefineRef" :model="form" :rules="rules" label-width="120px" class="my-custom-form">
<el-row>
<el-col :span="12">
<el-form-item label="配置名称" prop="codeConfigName">
<el-input v-model="form.codeConfigName" placeholder="请输入配置名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="编码头" prop="codeHeader">
<el-input v-model="form.codeHeader" placeholder="请输入编码头" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="编码体类型" prop="codeBodyType">
<el-select v-model="form.codeBodyType" placeholder="请选择编码体类型">
<el-option
v-for="dict in dc_coderule_body_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="编码体" prop="codeBody">
<el-input v-model="form.codeBody" placeholder="请输入编码体" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="流水号长度" prop="codeSerialLength">
<el-input v-model="form.codeSerialLength" placeholder="请输入流水号长度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分割符" prop="codeSplitFlag">
<el-select v-model="form.codeSplitFlag" placeholder="请选择分割符">
<el-option
v-for="dict in dc_code_split"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" >
@import "@/assets/styles/self-defined.scss";
</style>
<script setup name="CodeDefine">
import { listCodeDefine, getCodeDefine, delCodeDefine, addCodeDefine, updateCodeDefine } from "@/api/model/codeDefine";
import lock from "@/assets/icons/svg/lock.svg";
const { proxy } = getCurrentInstance();
const { dc_code_split,dc_coderule_body_type } = proxy.useDict('dc_code_split','dc_coderule_body_type');
const codeDefineList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const tableHeight = ref("0px");
const collapseVisible = ref(false);
const fixedColumns = ref(false);
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
codeConfigName: null,
codeHeader: null,
},
rules: {
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询编码规则定义列表 */
function getList() {
loading.value = true;
listCodeDefine(queryParams.value).then(response => {
codeDefineList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
tenantId: null,
revision: null,
createdBy: null,
createdTime: null,
updatedBy: null,
updatedTime: null,
deleteBy: null,
deleteTime: null,
id: null,
codeConfigName: null,
codeHeader: null,
codeBody: null,
codeBodyType: null,
codeSerialLength: null,
codeSplitFlag: null
};
proxy.resetForm("codeDefineRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加编码规则定义";
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const _id = row.id || ids.value
getCodeDefine(_id).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改编码规则定义";
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["codeDefineRef"].validate(valid => {
if (valid) {
if (form.value.id != null) {
updateCodeDefine(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addCodeDefine(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除编码规则定义编号为"' + _ids + '"的数据项？').then(function() {
return delCodeDefine(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('asset/codeDefine/export', {
...queryParams.value
}, `codeDefine_${new Date().getTime()}.xlsx`)
}
function toggleFixedColumns() {
fixedColumns.value = !fixedColumns.value;
}
onMounted(()=>{
calculateTableHeight();
window.addEventListener('resize', calculateTableHeight);
window.onresize = () => {
return (() => {
calculateTableHeight();
})()
}
})
onUnmounted(() => {
window.removeEventListener('resize', calculateTableHeight);
});
watch(
[collapseVisible,showSearch],
() => {
calculateTableHeight();
}
);
const calculateTableHeight = () => {
nextTick(() => {
const heightForm = proxy.$refs.queryRef?.$el.clientHeight || 0;
const windowHeight = window.innerHeight;
const paginationHeight = 60;
const tableHeaderHeight = 40;
const tableMargin = 20;
const remainingHeight = windowHeight - paginationHeight - tableHeaderHeight - tableMargin - heightForm - 100;
tableHeight.value = remainingHeight + 'px';
});
};
function toggleCollapse() {
collapseVisible.value = !collapseVisible.value;
if(collapseVisible.value){
editName.value = "折叠筛选项";
}else{
editName.value = "更多筛选项"
}
}
getList();
</script>

421
src/views/model/deviceImportInfo/index.vue
View File

@ -0,0 +1,421 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="文件名" prop="filename">
<el-input
v-model="queryParams.filename"
placeholder="请输入文件名"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="组织编码" prop="orgCode">
<el-tree-select v-model="queryParams.orgCode" :data="deptOptions"
:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择"
check-strictly :default-expand-all="true" />
</el-form-item>
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="服务配置ID" prop="issServerconfid">
<el-input
v-model="queryParams.issServerconfid"
placeholder="请输入服务配置ID"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button type="info" plain icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="success"
icon="Delete"
@click="handleDelete"
v-hasPermi="['model:deviceImportInfo:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
icon="Upload"
@click="handleUpload"
v-hasPermi="['model:deviceImportInfo:upload']"
>上传</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="文件名" align="center" prop="filename" />
<el-table-column label="记录条数" align="center" prop="recordSize" />
<el-table-column label="组织名称" align="center" prop="orgName" />
<el-table-column label="项目名称" align="center" prop="projectName" />
<el-table-column label="服务配置ID" align="center" prop="issServerconfid" />
<el-table-column label="上传时间" align="center" prop="createTime" />
<el-table-column label="上传状态" align="center" prop="uploadStatus" :formatter="formatUploadStatus"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button
type="text"
icon="Download"
@click="handleExport(scope.row)"
>导出</el-button>
<el-button
type="text"
icon="Delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<el-dialog :title="title" v-model="open" width="800px" append-to-body draggable>
<el-form ref="deviceImportRef" :model="form" :rules="rules" label-width="125px">
<el-row>
<el-col :span="12">
<el-form-item label="工程名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入工程名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属组织名称" prop="orgCode">
<el-tree-select v-model="form.orgCode" :data="deptOptions" @node-click="orgNodeClick"
:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择组织名称"
check-strictly :default-expand-all="true"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="服务配置ID" prop="issServerconfid">
<el-input v-model="form.issServerconfid" placeholder="请输入服务配置ID" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上传文件" prop="file">
<el-upload
multiple
:action="uploadFileUrl"
accept=".xls,.xlsx"
:before-upload="handleBeforeUpload"
:auto-upload="false"
:file-list="fileList"
:on-change="fileChange"
:on-remove="handleRemove"
:limit="limit"
:on-exceed="handleExceed"
:show-file-list="true"
class="upload-file-uploader"
ref="fileUpload"
>
<!-- 上传按钮 -->
<el-button type="primary">选取文件</el-button>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的文件
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Info">
import { listInfo, delInfo, exportInfo, uploadInfo } from "@/api/model/deviceImportInfo";
import { deptTreeSelect } from "@/api/system/user";
const { proxy } = getCurrentInstance();
const infoList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const deptOptions = ref(undefined);
const fileList = ref([]);
const props = defineProps({
// 数量限制
limit: {
type: Number,
default: 1,
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["xlsx", "xls"],
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true
}
});
//定义校验规则
var validateFileList = (rule, value, callback) => {
if (fileList.value.length < 1) {//我控制了FileList 长度代表文件个数
callback(new Error("请上传文件"))
} else {
callback()
}
}
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
tentantId: null,
recordSize: null,
filename: null,
orgCode: null,
projectName: null,
uploadStatus: null
},
rules: {
projectName: [
{ required: true, message: "工程名称不能为空", trigger: "change" }
],
orgCode: [
{ required: true, message: "所属组织不能为空", trigger: "change" }
],
issServerconfid: [
{ required: true, message: "服务配置ID不能为空", trigger: "change" }
],
file: [
{ required: true, validator:validateFileList, message: "上传文件不能为空", trigger: "change" }
]
}});
const { queryParams, form, rules } = toRefs(data);
const showTip = computed(
() => props.isShowTip && (props.fileType || props.fileSize)
);
/** 查询部门下拉树结构 */
function getDeptTree() {
deptTreeSelect().then(response => {
deptOptions.value = response.data;
});
};
/** 查询设备导入信息列表 */
function getList() {
loading.value = true;
listInfo(queryParams.value).then(response => {
infoList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
projectName: null,
orgCode: null,
orgName: null,
issServerconfid: null
};
proxy.resetForm("deviceImportRef");
fileList.value = [];
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加设备导入信息";
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
if (_ids.length == 0) {
proxy.$modal.msgError('请选择需要删除的设备参数导入信息!');
} else {
proxy.$modal.confirm('是否确认删除设备导入信息编号为"' + _ids + '"的数据项？').then(function() {
return delInfo(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
}
/** 导出按钮操作 */
function handleExport(row) {
const _id = row.id;
exportInfo(_id).then(res => {
var debug = res;
if (debug) {
var elink = document.createElement('a');
elink.download = '设备参数导入明细'+ new Date().getTime() +'.xlsx';
elink.style.display = 'none';
var blob = new Blob([debug], { type: 'application/x-msdownload' });
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
document.body.removeChild(elink);
} else {
proxy.$modal.msgError('导出异常请联系管理员');
}
}).catch(err => {
console.log(err);
});
}
function handleUpload() {
reset();
open.value = true;
title.value = "上传设备参数信息";
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["deviceImportRef"].validate(valid => {
if (valid) {
loading.value = true;
let formData = new FormData()
var param = {
"orgCode":form.value.orgCode,
"orgName":form.value.orgName,
"issServerconfid":form.value.issServerconfid,
"projectName":form.value.projectName
}
formData.append('file', fileList.value[0].raw);
cancel();
uploadInfo(param, formData).then(response => {
if (response.data == true) {
proxy.$modal.msgSuccess("上传成功");
} else {
proxy.$modal.msgError("上传失败");
}
loading.value = false;
getList();
}).catch(err => {
proxy.$modal.msgError("设备参数上传出现异常");
});
}
});
}
// 上传前校检格式和大小
function handleBeforeUpload(file) {
// 校检文件类型
if (props.fileType.length) {
const fileName = file.name.split('.');
const fileExt = fileName[fileName.length - 1];
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
return false;
}
}
// 校检文件大小
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
proxy.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
return false;
}
}
number.value++;
return true;
}
// 文件个数超出
function handleExceed() {
proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
}
// 文件列表移除文件时的钩子
function handleRemove(file, files) {
fileList.value = [];
}
//上传文件时以及更改时进入
function fileChange(file, files) {
fileList.value = files;
}
function orgNodeClick(data,e) {
form.value.orgCode = data.value;
form.value.orgName = data.label;
}
function formatUploadStatus(row){
return row.uploadStatus == true ? "成功" : "失败";
}
getDeptTree();
getList();
</script>
Write Preview
Loading…
Cancel
Save