yanfeiyong
项洋 4 weeks ago
parent ac9c3070a5
commit b6e1778e99

@ -1,3 +0,0 @@
<template>
<div>123</div>
</template>

@ -0,0 +1,604 @@
<!--assetsManage/assets-->
<template>
<el-row
:gutter="20"
style="height: 100%; background-color: #f2f4f6; display: flex"
>
<!--部门数据-->
<el-col
:span="3"
:xs="24"
style="
margin-right: 10px;
height: 100%;
background-color: #fff;
padding-top: 20px;
"
>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
<el-col :span="20" :xs="24" style="height: 100%; flex: 1">
<div class="L-main" id="L-size-main">
<div class="content-search" id="L-header">
<div class="search-title">查询条件</div>
<el-form
:inline="true"
ref="queryForm"
:model="formInline"
size="small"
class="demo-form-inline"
>
<el-row>
<el-col :span="7">
<el-form-item label="系统名称:" prop="xtmc">
<el-input
v-model="formInline.xtmc"
placeholder="请输入系统名称"
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="系统类型:" prop="xtlx">
<el-select
v-model="formInline.xtlx"
placeholder="请选择系统类型"
>
<el-option
v-for="dict in zc_xtlx"
:key="dict.value"
:label="dict.label"
:value="dict.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="新增时间:" prop="time">
<el-date-picker
v-model="formInline.time"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="请选择"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="单位名称:" prop="dwmc">
<el-input
v-model="formInline.dwmc"
placeholder="请输入单位名称"
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="系统状态:" prop="xtzt">
<el-select
v-model="formInline.xtzt"
placeholder="请选择系统状态"
>
<el-option
v-for="dict in zc_xtzt"
:key="dict.value"
:label="dict.label"
:value="dict.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="9" style="text-align: right; padding-right: 35px">
<el-form-item>
<el-button size="mini" @click="resetQuery"></el-button>
<el-button size="mini" type="primary" @click="handleQuery"
>查询</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<main>
<div class="search-title">
<span class="search-title-span">资产列表</span>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="info"
plain
icon="Upload"
size="mini"
@click="handleImport"
>导入</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
size="mini"
@click="handleExport"
>导出</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
size="mini"
@click="handleAdd"
>新增资产</el-button
>
</el-col>
</el-row>
</div>
<section>
<el-table
v-loading="loading"
:data="tableData"
:height="tabHeader"
:row-class-name="tableRowClassName"
:max-height="tabHeader"
>
<el-table-column
type="index"
width="60"
label="序号"
align="center"
/>
<el-table-column
label="系统名称"
key="xtmc"
width="200px"
prop="xtmc"
align="center"
/>
<el-table-column
label="系统类型"
key="xtlx"
prop="xtlx"
align="center"
>
<template #default="scope">
<dict-tag :options="zc_xtlx" :value="scope.row.xtlx" />
</template>
</el-table-column>
<el-table-column
label="单位名称"
key="dwmc"
prop="dwmc"
align="center"
/>
<el-table-column
label="新增时间"
key="createTime"
prop="createTime"
align="center"
/>
<el-table-column
label="系统状态"
key="status"
prop="status"
class-name="table-status"
align="center"
>
<template #default="scope">
<span v-if="scope.row.xtzt == 1" style="color: #16b771"
>已安装</span
>
<span v-if="scope.row.xtzt == 2" style="color: #f58a0c"
>测试中</span
>
<span v-if="scope.row.xtzt == 3" style="color: #1485ef"
>使用中</span
>
<span v-if="scope.row.xtzt == 4" style="color: #29a07a"
>维护中</span
>
<span v-if="scope.row.xtzt == 5" style="color: #f50c0c"
>关停</span
>
<span v-if="scope.row.xtzt == 6" style="color: #f50c0c"
>备用</span
>
</template>
</el-table-column>
<el-table-column
label="操作"
prop="userId"
class-name="table-operation"
align="center"
>
<template #default="scope">
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<div
style="
display: flex;
align-items: center;
cursor: pointer;
"
@click="goInfo(scope.row, 1)"
>
<el-icon><View /></el-icon>
<span
class="look-info"
style="color: #1485ef; margin-right: 15px"
>查看</span
>
</div>
<div
style="
display: flex;
align-items: center;
cursor: pointer;
"
@click="goInfo(scope.row, 2)"
>
<el-icon><Edit /></el-icon>
<span
class="look-info"
style="color: #1485ef; margin-right: 15px"
>编辑</span
>
</div>
<div
style="
display: flex;
align-items: center;
cursor: pointer;
"
@click="goInfo(scope.row, 3)"
>
<el-icon><Delete /></el-icon>
<span
class="look-info"
style="color: #f50c0c; margin-right: 15px"
>删除</span
>
</div>
</div>
</template>
</el-table-column>
</el-table>
</section>
<my-pagination
id="L-pagination"
:total="total"
:page="formInline.current"
:limit="formInline.size"
@pagination="getPagination"
v-model:current-page="formInline.current"
/>
</main>
<!-- 资产导入对话框 -->
<el-dialog
v-model="upload.open"
:title="upload.title"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将文件拖到此处<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">
<span>仅允许导入xlsxlsx格式文件</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm"
> </el-button
>
<el-button @click="upload.open = false"> </el-button>
</div>
</template>
</el-dialog>
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import myPagination from "@/views/components/Pagination/index.vue";
import { getToken } from "@/utils/auth";
import { assetUnit, deleteAssetInfo, schema } from "@/api/auditPagesApi/index";
import { useDict } from "@/utils/dict";
import { ElMessage, ElMessageBox } from "element-plus";
import {
View,
Edit,
Delete,
Upload,
Download,
Plus,
UploadFilled,
} from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
//
const { zc_xtzt, zc_xtlx } = useDict("zc_xtzt", "zc_xtlx");
//
const deptOptions = ref();
const tree = ref(null);
const defaultProps = {
children: "children",
label: "label",
};
const formInline = reactive({
xtmc: "",
xtlx: "",
time: [],
startTime: "",
endTime: "",
dwmc: "",
xtzt: "",
current: 1,
size: 20,
});
const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const tabHeader = ref();
//
const upload = reactive({
//
open: false,
//
title: "web资产导入",
//
isUploading: false,
//
updateSupport: 0,
//
headers: { Authorization: "Bearer " + getToken() },
//
url: location.origin + "/api/tc/assetCurrent/importData",
});
/** 查询部门下拉树结构 */
const getDeptTree = () => {
schema({ type: 0 }).then((response) => {
deptOptions.value = response.data;
});
};
//
const filterNode = (value, data) => {
if (!value) return true;
return data.label.indexOf(value) !== -1;
};
//
const handleNodeClick = (data) => {
formInline.deptId = data.id;
handleQuery();
};
//
const getList = () => {
loading.value = true;
assetUnit("get", formInline).then((res) => {
loading.value = false;
total.value = res.data.total;
tableData.value = res.data.records;
});
};
//
const resetQuery = () => {
proxy.$refs["queryForm"].resetFields();
formInline.deptId = undefined;
tree.value.setCurrentKey(null);
handleQuery();
};
//
const handleQuery = () => {
formInline.current = 1;
formInline.size = 20;
if (formInline.time) {
formInline.startTime = formInline.time[0];
formInline.endTime = formInline.time[1];
}
formInline.time = [];
getList();
};
//
const getPagination = (pages) => {
formInline.current = pages.page;
formInline.size = pages.limit;
getList();
};
//
const handleImport = () => {
upload.open = true;
};
//
const handleExport = () => {
proxy.download(
"/tc/assetCurrent/export",
{
...formInline,
},
`web资产${new Date().getTime()}.xlsx`
);
};
/** 下载模板操作 */
const importTemplate = () => {
proxy.download(
"/tc/assetCurrent/importTemplate",
{},
`web资产导入模板${new Date().getTime()}.xlsx`
);
};
//
const handleFileUploadProgress = () => {
upload.isUploading = true;
};
//
const handleFileSuccess = (response, file, fileList) => {
upload.open = false;
upload.isUploading = false;
proxy.$refs.upload.clearFiles();
ElMessageBox.alert(
`<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>${response.msg}</div>`,
"导入结果",
{ dangerouslyUseHTMLString: true }
);
getList();
};
//
const submitFileForm = () => {
proxy.$refs.upload.submit();
};
//
const handleAdd = () => {
router.push({
name: "AssetsAuth",
query: {
pageType: "add",
type: 0,
},
});
};
//
const goInfo = (row, id) => {
if (id === 1) {
router.push({
name: "AssetsAuth",
query: {
pageType: "look",
type: 0,
id: row.id,
queryData: formInline,
},
meta: {
title: "新增资产",
icon: "user",
activeMenu: "/assetsManage/program",
},
});
} else if (id === 2) {
router.push({
name: "AssetsAuth",
query: {
pageType: "change",
type: 0,
id: row.id,
queryData: formInline,
},
});
} else if (id === 3) {
const userIds = row.id;
ElMessageBox.confirm(`是否确认删除用户编号为"${userIds}"的数据项?`)
.then(() => {
return deleteAssetInfo(userIds);
})
.then(() => {
getList();
ElMessage.success("删除成功");
})
.catch(() => {});
}
};
// table
const tableRowClassName = ({ rowIndex }) => {
if (rowIndex % 2 !== 0) {
return "evenNumber-row";
}
return "";
};
const cancalDebounce = () => {
const element = document.getElementById("L-size-main");
const header = document.getElementById("L-header");
const pagination = document.getElementById("L-pagination");
const elementHeight = element.offsetHeight;
const headerHeight = header.offsetHeight;
const paginationtHeight = pagination.offsetHeight;
tabHeader.value = elementHeight - headerHeight - paginationtHeight - 110;
};
onMounted(() => {
if (Object.keys(router.currentRoute.value.params).length !== 0) {
Object.assign(formInline, router.currentRoute.value.params);
} else {
formInline.current = 1;
formInline.size = 20;
}
getList();
getDeptTree();
cancalDebounce();
window.addEventListener("resize", cancalDebounce);
});
onUnmounted(() => {
window.removeEventListener("resize", cancalDebounce);
});
</script>
Loading…
Cancel
Save