Browse Source

重构资产管理页面

dev
qb 4 weeks ago
parent
commit
b50d1fdd6b
  1. 47
      src/api/basic/basicProperty.js
  2. 277
      src/option/basic/basicProperty.js
  3. 678
      src/views/basic/property/basicProperty.vue
  4. 5
      src/views/basic/property/basicPropertyDetails.vue
  5. 8
      src/views/resource/attach.vue
  6. 1
      src/views/resource/oss.vue

47
src/api/basic/basicProperty.js

@ -1,50 +1,45 @@
import request from '@/axios';
export const getList = (current, size, params) => {
export const getList = params => {
return request({
url: '/api/logpm-basic/property/list',
method: 'get',
params: {
...params,
current,
size,
}
})
}
params,
});
};
export const getDetail = (id) => {
export const getDetail = id => {
return request({
url: '/api/logpm-basic/property/detail',
method: 'get',
params: {
id
}
})
}
id,
},
});
};
export const remove = (ids) => {
export const remove = ids => {
return request({
url: '/api/logpm-basic/property/remove',
method: 'post',
params: {
ids,
}
})
}
},
});
};
export const add = (row) => {
export const add = row => {
return request({
url: '/api/logpm-basic/property/save',
method: 'post',
data: row
})
}
data: row,
});
};
export const update = (row) => {
export const update = row => {
return request({
url: '/api/logpm-basic/property/update',
method: 'post',
data: row
})
}
data: row,
});
};

277
src/option/basic/basicProperty.js

@ -1,194 +1,83 @@
export default {
height:'auto',
calcHeight: 30,
tip: false,
searchShow: false,
searchMenuSpan: 6,
border: true,
index: true,
viewBtn: false,
editBtn: false,
selection: true,
addBtn:false,
dialogClickModal: false,
column: [
{
label: "主键",
prop: "id",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "租户号",
prop: "tenantId",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "创建人",
prop: "createUser",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "创建时间",
prop: "createTime",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "更新人",
prop: "updateUser",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "更新时间",
prop: "updateTime",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "状态",
prop: "status",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "是否已删除",
prop: "isDeleted",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "创建部门",
prop: "createDept",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "预留1",
prop: "reserve1",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "预留2",
prop: "reserve2",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "预留3",
prop: "reserve3",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "预留4",
prop: "reserve4",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "预留5",
prop: "reserve5",
type: "input",
addDisplay: false,
editDisplay: false,
viewDisplay: false,
hide: true,
},
{
label: "资产类型",
prop: "assetType",
type: "select",
labelWidth:'150',
width:"280px",
align:'center',
span:11,
dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_property_type',
props: {
label: 'dictValue',
value: 'dictKey',
},
search: true,
},
{
label: "资产名称",
prop: "assetName",
type: "input",
labelWidth:'150',
width:"270px",
align:'center',
span:11,
search: true,
},
{
label: "资产统一编号",
prop: "assetId",
type: "input",
labelWidth:'150',
width:"200px",
align:'center',
span:11,
},
{
label: "资产现有数量",
prop: "assetNub",
type: "input",
labelWidth:'150',
width:"250px",
align:'center',
span:11,
},
{
label: "备注",
prop: "node",
type: "input",
labelWidth:'150',
width:"360px",
align:'center',
span:11,
},
]
}
export const columnList = [
{
prop: '',
label: '复选框',
type: 0,
width: 55,
fixed: true,
},
{
prop: '',
label: '序号',
type: 12,
values: '',
width: 55,
fixed: true,
},
{
label: '资产类型',
prop: 'assetTypeName',
type: 3,
values: '',
width: '200',
checkarr: [],
fixed: false,
sortable: true,
head: false,
},
{
label: '资产名称',
prop: 'assetName',
type: 2,
values: '',
width: '150',
checkarr: [],
fixed: false,
sortable: true,
head: false,
},
{
label: '资产统一编号',
prop: 'assetId',
type: 2,
values: '',
width: '150',
checkarr: [],
fixed: false,
sortable: true,
head: false,
},
{
label: '资产现有数量',
prop: 'assetNub',
type: 1,
values: '',
width: '150',
checkarr: [],
fixed: false,
sortable: true,
head: false,
},
{
label: '备注',
prop: 'remark',
type: 1,
values: '',
width: '150',
checkarr: [],
fixed: false,
sortable: true,
head: false,
},
{
prop: '',
label: '操作',
type: 6,
values: '',
width: '200',
checkarr: [],
fixed: 'right',
sortable: false,
},
];

678
src/views/basic/property/basicProperty.vue

@ -1,274 +1,480 @@
<template>
<basic-container>
<avue-crud :option="option"
v-model:search="search"
v-model:page="page"
v-model="form"
:table-loading="loading"
:data="data"
:permission="permissionList"
:before-open="beforeOpen"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad">
<template #menu-left>
<!-- <el-button type="danger"-->
<!-- icon="el-icon-delete"-->
<!-- plain-->
<!-- v-if="permission.basicProperty_delete"-->
<!-- @click="handleDelete"> -->
<!-- </el-button>-->
<el-button type="primary"
plain
icon="el-icon-plus"
@click="handleadd">
<basic-container v-loading="details.loadingObj.pageLoading">
<div class="avue-crud">
<!-- 搜索模块 -->
<div v-h5uShow="search">
<!-- 查询模块 -->
<el-form :inline="true" :model="query" class="header_search" label-width="100px">
<!-- 查询按钮 -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="searchChange"> </el-button>
<el-button icon="el-icon-delete" @click="searchReset"> </el-button>
</el-form-item>
</el-form>
</div>
<!-- 控件模块 -->
<div class="avue-crud__header flex-c-sb">
<!-- 头部左侧按钮模块 -->
<div class="avue-crud__left">
<!-- 新增 -->
<el-button
v-if="$store.state.user.permission.basicProperty_add"
type="primary"
icon="Plus"
@click="handleAdd"
>
</el-button>
<!-- 删除 -->
<el-button
v-if="$store.state.user.permission.basicProperty_delete"
type="primary"
icon="Delete"
@click="handleBatchRemove"
>
</el-button>
</div>
<!-- 头部右侧按钮模块 -->
<div class="avue-crud__right">
<el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
<el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
<el-button icon="Search" @click="searchHide" circle></el-button>
</div>
</div>
<!-- 列表模块 -->
<tablecmt
ref="tableNodeRef"
:columnList="details.columnList"
:tableData="details.data"
:loading="loadingObj.list"
@inputTxt="inputsc"
@timeCheck="timesc"
@btnCheck="btnsc"
@selectCheck="selectsc"
@selection="selectionChange"
>
<template #default="{ scope: { row, column } }">
<!-- 操作 -->
<template v-if="column.label === '操作'">
<!-- 删除 -->
<el-text
v-if="$store.state.user.permission.basicProperty_delete"
@click="() => handleDelete(row)"
>
</el-text>
<!-- 编辑 -->
<el-text
v-if="$store.state.user.permission.basicProperty_edit"
@click="() => handleEdit(row)"
>
</el-text>
<!-- 查看 -->
<el-text
v-if="$store.state.user.permission.basicProperty_view"
@click="() => handleView(row)"
>
</el-text>
</template>
<template #menu="{size,row,index}">
<el-button type="primary" text icon="el-icon-view" @click="handleEdit(row)"> </el-button>
<el-button type="primary" text icon="el-icon-view" @click="handleview(row)"> </el-button>
</template>
</avue-crud>
</tablecmt>
<!-- 分页模块 -->
<div class="avue-crud__pagination flex-c-sb" style="width: 100%">
<div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
<!-- 分页模块 -->
<el-pagination
align="right"
background
@size-change="sizeChange"
@current-change="currentChange"
:current-page="page.current"
:page-sizes="[30, 50, 80, 120, 500]"
:page-size="page.size"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
>
</el-pagination>
</div>
</div>
</basic-container>
<edittablehead
@closce="showdrawer"
:drawerShow="drawerShow"
:columnList="details.columnList"
v-model="details.columnList"
></edittablehead>
</template>
<script>
<script setup lang="ts">
import { ref, reactive, toRefs, computed } from 'vue';
import functions from '@/utils/functions.js';
import dayjs from 'dayjs';
import { mapGetters, useStore } from 'vuex';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { getList, getDetail, add, update, remove } from '@/api/basic/basicProperty';
import option from '@/option/basic/basicProperty';
import { mapGetters } from 'vuex';
import { exportBlob } from '@/api/common';
import {
setNodeHeight,
getHtmls,
deepClone,
getObjType,
handleTranslationDataSeclect,
handleClearTableQuery,
handleSelectQuery,
handleInputQuery,
downloadXls,
} from '@/utils/util';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { columnList } from '@/option/basic/basicProperty';
import { getToken } from '@/utils/auth';
import { downloadXls } from '@/utils/util';
import { dateNow } from '@/utils/date';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
export default {
data() {
return {
form: {},
//
const $router = useRouter();
const $store = useStore();
console.log('$store.state.permission :>> ', $store.state);
//
const tableNodeRef = ref();
const details = reactive<any>({
/** 是否开启搜索 */
search: true,
/** 表格搜索条件 */
query: {},
search: {},
loading: true,
page: {
pageSize: 30,
currentPage: 1,
total: 0
/** 时间快捷选择设置 */
shortcuts: [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
selectionList: [],
option: option,
data: []
};
},
computed: {
...mapGetters(['permission']),
permissionList() {
return {
addBtn: this.validData(this.permission.basicProperty_add, false),
viewBtn: this.validData(this.permission.basicProperty_view, false),
delBtn: this.validData(this.permission.basicProperty_delete, false),
editBtn: this.validData(this.permission.basicProperty_edit, false)
};
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
ids() {
let ids = [];
this.selectionList.forEach(ele => {
ids.push(ele.id);
});
return ids.join(',');
}
},
methods: {
//
handleEdit(row) {
this.$message.success('修改字段信息可能会导致原有数据不匹配');
this.$router.push({
path: '/basic/property/basicPropertyform',
query: {
data: encodeURIComponent(JSON.stringify(row)),
edt: false,
name: row.assetName + '-字段编辑'
}
});
{
text: '最近三个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
handleadd() {
this.$router.push({
path: '/basic/property/basicPropertyform',
query: {
name: '资产新增',
edt: false
}
});
},
//
handleview(row) {
this.$router.push({
path: '/basic/property/basicPropertyform',
query: {
data: row.id,
edt: true,
name: row.assetName + '-字段查看'
}
});
],
columnList: deepClone(columnList),
data: [],
/** 头部搜索配置 */
titleSearchOption: [],
/** 流转节点数据 */
flowNodeData: [],
/** 页面loading */
loadingObj: {
/** 列表加载loading */
list: false,
packageListLoading: false,
upload: false,
},
rowSave(row, done, loading) {
add(row).then(() => {
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!'
});
done();
}, error => {
loading();
window.console.log(error);
});
/** 列表复选框选中的数据 */
selectionList: [],
/** 是否显示设置表格 */
drawerShow: false,
/** 分页参数 */
page: {
current: 1,
size: 30,
total: 0,
},
rowUpdate(row, index, done, loading) {
update(row).then(() => {
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!'
});
done();
}, error => {
loading();
console.log(error);
});
/** 弹出层显示 */
popUpShow: {
add: false,
},
rowDel(row) {
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
return remove(row.id);
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!'
/** 全屏 */
fullscreenObj: {},
});
// TOKEN
const headers = computed(() => {
return { 'Blade-Auth': 'Bearer ' + getToken() };
});
},
handleDelete() {
if (this.selectionList.length === 0) {
this.$message.warning('请选择至少一条数据');
return;
const { search, query, shortcuts, loadingObj, selectionList, drawerShow, page } = toRefs(details);
/** 权限按钮 */
const permissionObj = reactive({});
/** 请求页面数据 */
const onLoad = async (params = {}) => {
try {
details.loadingObj.list = true;
const submitData = { ...details.page, ...details.query, ...params };
for (const key in submitData) {
const element = submitData[key];
if (!element && element !== 0) delete submitData[key];
}
this.$confirm('确定将选择数据删除?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
return remove(this.ids);
delete submitData.total;
const res = await getList(submitData);
const { code, data } = res.data;
if (code !== 200) return;
details.data = getObjType(data.records) === 'array' ? data.records : [];
details.page.total = data.total;
handleTranslationDataSeclect(details.data, details.columnList);
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.list = false;
}
};
//
const handleData = (key, res) => {
const { code, data } = res.data;
if (code !== 200) return;
for (let i = 0; i < details.columnList.length; i++) {
const value = details.columnList[i];
if (value.label === key)
return (value.checkarr =
getObjType(data) === 'array'
? data.map(val => {
val.label = val.dictValue;
val.value = val.dictKey;
return val;
})
.then(() => {
this.onLoad(this.page);
this.$message({
type: 'success',
message: '操作成功!'
: []);
}
};
const init = async () => {
try {
details.loadingObj.pageLoading = true;
//
await Promise.all([
//
getDictionaryBiz('basic_property_type').then(res => handleData('资产类型', res)),
onLoad(),
]);
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
};
init();
/** 搜索 */
const searchChange = () => {
onLoad();
};
/** 清空表单 */
const searchReset = () => {
details.query = {};
details.page.current = 1;
handleClearTableQuery(details.columnList);
onLoad();
};
/** 展开列表控件 */
const showdrawer = (_flag?: boolean) => {
details.drawerShow = _flag;
};
/** 是否开启搜索区 */
const searchHide = () => {
details.search = !details.search;
setNodeHeight(tableNodeRef.value.$el, '', true);
};
/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
handleInputQuery(index, row, details.query);
onLoad();
};
/** 表格表头时间选择 */
const timesc = (index, row) => {
console.log(index, row);
if (!!index) {
index = dayjs(index).format('YYYY-MM-DD');
}
details.query[row.prop] = index;
if (!index) {
delete details.query[row.prop];
}
onLoad();
};
/** 表格表头输入框搜索 */
const btnsc = () => {};
/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
handleSelectQuery(index, row, details.query);
onLoad();
};
/** 表格表头复选框选择 */
const selectionChange = (list: any) => {
details.selectionList = list;
};
/** 每页数量改变执行的回调 */
const sizeChange = (size: number) => {
details.page.size = size;
onLoad();
};
/** 页码改变执行的回调 */
const currentChange = current => {
details.page.current = current;
onLoad();
};
/** 删除提交 */
const handleDelete = row => {
ElMessageBox.confirm('确认删除', '提示', {
type: 'warning',
}).then(async () => {
try {
details.loadingObj.pageLoading = true;
const res = await remove(row.id);
const { code, msg } = res.data;
if (code !== 200) return;
ElMessage.success(msg);
onLoad();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
});
this.$refs.crud.toggleSelection();
};
/** 批量删除 */
const handleBatchRemove = () => {
if (details.selectionList.length === 0) return ElMessage.warning('请选择需要删除的数据');
ElMessageBox.confirm('确认批量删除', '提示', {
type: 'warning',
}).then(async () => {
try {
details.loadingObj.pageLoading = true;
const res = await remove(details.selectionList.map(val => val.id).join(','));
const { code, msg } = res.data;
if (code !== 200) return;
ElMessage.success(msg);
onLoad();
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.pageLoading = false;
}
});
};
/** 新增 */
const handleAdd = () => {
$router.push({
path: '/basic/property/basicPropertyform',
query: {
name: '资产新增',
edt: false,
},
handleExport() {
let downloadUrl = `/basicProperty/basicProperty/export-basicProperty?${this.website.tokenHeader}=${getToken()}`;
const {} = this.query;
let values = {};
this.$confirm('是否导出数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
NProgress.start();
exportBlob(downloadUrl, values).then(res => {
downloadXls(res.data, `资产${dateNow()}.xlsx`);
NProgress.done();
});
});
};
/** 编辑 */
const handleEdit = row => {
ElMessage.success('修改字段信息可能会导致原有数据不匹配');
$router.push({
path: '/basic/property/basicPropertyform',
query: {
data: encodeURIComponent(JSON.stringify(row)),
edt: false,
name: row.assetName + '-字段编辑',
},
beforeOpen(done, type) {
if (['edit', 'view'].includes(type)) {
getDetail(this.form.id).then(res => {
this.form = res.data.data;
});
}
done();
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.page.currentPage = 1;
this.onLoad(this.page, params);
done();
},
selectionChange(list) {
this.selectionList = list;
},
selectionClear() {
this.selectionList = [];
this.$refs.crud.toggleSelection();
},
currentChange(currentPage) {
this.page.currentPage = currentPage;
},
sizeChange(pageSize) {
this.page.pageSize = pageSize;
},
refreshChange() {
this.onLoad(this.page, this.query);
};
/** 查看 */
const handleView = row => {
$router.push({
path: '/basic/property/basicPropertyform',
query: {
data: row.id,
edt: true,
name: row.assetName + '-字段查看',
},
onLoad(page, params = {}) {
this.loading = true;
const {} = this.query;
let values = {};
getList(page.currentPage, page.pageSize, values).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
}
}
};
</script>
<style scoped lang='scss'>
:deep(.no-print ){
margin-left: auto !important;
<style scoped lang="scss">
//
:deep(.el-date-editor.el-input) {
height: 100% !important;
width: 100% !important;
}
:deep(.el-form-item__content) {
height: fit-content;
}
.el_div_input {
width: 100%;
display: flex;
align-items: center;
.el_dy_icon {
font-size: 1.5em;
}
}
.el-dialog-add {
:deep(.el-form) {
display: flex;
flex-wrap: wrap;
}
:deep(.el-form-item) {
width: 100%;
}
:deep(.el-input-number) {
width: 100% !important;
input {
text-align: left;
}
}
:deep(.el-form-item__label){
width:auto !important;
}
// :deep(.el-table__header){
// width: inherit !important;
// }
// :deep(.el-table__row){
// width: inherit !important;
// }
// :deep(.el-scrollbar__view){
// width: inherit !important;
// }
// :deep(.el-table__body){
// width: inherit !important;
// }
</style>

5
src/views/basic/property/basicPropertyDetails.vue

@ -354,7 +354,7 @@ export default {
this.loading = true;
const {} = this.query;
let values = {};
getList(1, 50, values).then(res => {
getList(values).then(res => {
const data = res.data.data;
// this.page.total = data.total;
let activeTabId = data.records[0].id;
@ -638,7 +638,7 @@ export default {
};
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
:deep(.no-print) {
// margin-left: auto !important;
}
@ -681,5 +681,4 @@ export default {
:deep(.el-tabs__content) {
padding: 0;
}
</style>

8
src/views/resource/attach.vue

@ -19,7 +19,7 @@
<div class="avue-crud__left">
<!-- 新增 -->
<el-button
v-if="$store.state.user.permission.oss_add"
v-if="$store.state.user.permission.attach_add"
type="primary"
icon="Upload"
@click="handleUpload"
@ -28,7 +28,7 @@
<!-- 删除 -->
<el-button
v-if="$store.state.user.permission.oss_delete"
v-if="$store.state.user.permission.attach_delete"
type="primary"
icon="Delete"
@click="handleBatchRemove"
@ -65,7 +65,7 @@
<template v-else-if="column.label === '操作'">
<!-- 删除 -->
<el-text
v-if="$store.state.user.permission.oss_delete"
v-if="$store.state.user.permission.attach_delete"
@click="() => handleDelete(row)"
>
@ -73,7 +73,7 @@
<!-- 编辑 -->
<el-text
v-if="$store.state.user.permission.oss_edit"
v-if="$store.state.user.permission.attach_download"
@click="() => handleDownload(row)"
>

1
src/views/resource/oss.vue

@ -250,7 +250,6 @@ import { mapGetters, useStore } from 'vuex';
/** 获取字典 */
import { getDictionary } from '@/api/system/dict';
import { getList, getDetail, add, update, remove, enable } from '@/api/resource/oss';
import { getListName } from '@/api/basicdata/basicdataVehicle';
import {
setNodeHeight,
getHtmls,

Loading…
Cancel
Save