Commit 3b307206 authored by “yiyousong”'s avatar “yiyousong”

feat: 添加区县接入系统弹窗

parent 5fd365dd
export let iconList = [
[
"el-icon-platform-eleme",
"el-icon-eleme",
"el-icon-delete-solid",
......@@ -278,5 +278,5 @@ export let iconList = [
"el-icon-potato-strips",
"el-icon-lollipop",
"el-icon-ice-cream-square",
"el-icon-ice-cream-round",
];
"el-icon-ice-cream-round"
]
<template>
<div>
<el-switch
:value="value"
class="y-switch"
:active-value="activeValue"
:inactive-value="inactiveValue"
v-bind="$attrs"
v-on="$listeners"
@change="handlechange"
>
</el-switch>
</div>
</template>
<script>
export default {
name: "YSwitch",
model: {
prop: "value",
event: "change",
},
props: {
value: {
default: 0,
},
activeValue: {
default: 1,
},
inactiveValue: {
default: 0,
},
},
methods: {
handlechange(val) {
this.$emit("change", val);
},
},
};
</script>
<style lang="less" scoped>
:deep(.el-switch) {
.el-switch__label {
position: absolute;
display: none;
color: #fff;
}
.el-switch__label--right {
z-index: 1;
left: 0px; /*不同场景下可能不同,自行调整*/
}
.el-switch__label--left {
z-index: 1;
right: 0px; /*不同场景下可能不同,自行调整*/
}
.el-switch__label.is-active {
display: block;
}
.el-switch__core,
.el-switch .el-switch__label {
width: 60px !important; /*开关按钮的宽度大小*/
}
}
</style>
......@@ -59,17 +59,25 @@
:title="title"
@addSuccess="getAccessList"
></AddAccess>
<AccessSystem
ref="AccessSystem"
:show.sync="accessShow"
:systemList="systemList"
@success="getAccessList"
></AccessSystem>
</div>
</template>
<script>
import TableHeader from "@/components/TableHeader.vue";
import AddAccess from "./components/AddAccess.vue";
import { getAccessList, delAccess } from "@/api/system";
import AccessSystem from "./components/AccessSystem.vue";
import { getAccessList, delAccess, getSystemList } from "@/api/system";
export default {
components: {
TableHeader,
AddAccess,
AccessSystem,
},
data() {
return {
......@@ -116,7 +124,22 @@ export default {
},
},
{
label: "区域接入系统",
label: "接入系统",
align: "center",
formatter: (row) => {
if (row.accessSystemList && row.accessSystemList.length) {
return row.accessSystemList.map((v) => {
return (
<el-tag type="info" size="small" class="mr-2">
{v.systemName}
</el-tag>
);
});
}
},
},
{
label: "系统标签",
align: "center",
formatter: (row) => {
if (row.tag) {
......@@ -161,10 +184,16 @@ export default {
{
label: "操作",
align: "center",
width: "120",
width: "180",
formatter: (row) => {
return (
<div class="flex justify-center gap-4">
<span
class="primary cursor-pointer"
onClick={() => this.accessSystem(row)}
>
接入系统
</span>
<span
class="primary cursor-pointer"
onClick={() => this.handleEdit(row)}
......@@ -194,13 +223,28 @@ export default {
show: false,
title: "新增",
dict: {}, // 字典
systemList: [],
accessShow: false,
areaInfo: {},
};
},
created() {
this.getSystemList();
this.getAccessList();
},
computed: {},
methods: {
// 获取区域系统列表
async getSystemList() {
let res = await getSystemList({
page: 1,
size: -1,
});
if (res.data.code == 1) {
let { data } = res.data.data;
this.systemList = data;
}
},
// 获取接入区域列表
async getAccessList() {
this.loading = true;
......@@ -282,6 +326,10 @@ export default {
console.log("取消成功!");
});
},
accessSystem(row) {
this.$refs.AccessSystem.onAdd(row);
this.accessShow = true;
},
},
};
</script>
......
<template>
<el-drawer
:title="`区县接入系统-${areaInfo.areaName}`"
:visible.sync="drawer"
size="40%"
@close="handleClose"
>
<div class="main w-full">
<el-button size="small" type="primary" @click="addSystem">添加</el-button>
<el-table :data="accessSystemList" style="width: 100%">
<el-table-column type="index" :index="1" label="序号" align="center">
</el-table-column>
<el-table-column prop="systemName" align="center" label="系统名称">
<template slot-scope="scope">
<el-input
size="small"
placeholder="请输入"
v-model="scope.row.systemName"
></el-input>
</template>
</el-table-column>
<el-table-column prop="systemCode" align="center" label="系统编码">
<template slot-scope="scope">
<el-input
size="small"
placeholder="请输入"
v-model="scope.row.systemCode"
></el-input>
</template>
</el-table-column>
<el-table-column
prop="accessTime"
align="center"
label="接入日期"
width="220"
>
<template slot-scope="scope">
<el-date-picker
style="width: 150px"
size="small"
v-model="scope.row.accessTime"
type="date"
placeholder="选择日期"
value-format="timestamp"
>
</el-date-picker>
</template>
</el-table-column>
<el-table-column
width="80"
align="center"
prop="enabled"
label="启\停用"
>
<template slot-scope="scope">
<YSwitch
active-text="启用"
inactive-text="停用"
v-model="scope.row.enabled"
></YSwitch>
</template>
</el-table-column>
<el-table-column align="center" width="60" prop="enabled" label="删除">
<template slot-scope="scope">
<i
class="el-icon-remove delete cursor-pointer text-[24px]"
@click="delSystem(scope)"
></i>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-button size="small" @click="handleClose">取 消</el-button>
<el-button size="small" @click="handleReset">重 置</el-button>
<el-button
size="small"
type="primary"
:loading="loading"
@click="handleOk"
>确 定</el-button
>
</div>
</el-drawer>
</template>
<script>
import { saveAccess, deleteSystem } from "@/api/system";
export default {
props: {
show: {
type: Boolean,
default: false,
},
systemList: {
required: true,
type: Array,
default: () => [],
},
},
data() {
return {
loading: false,
form: {
systemName: "",
systemCode: "",
accessTime: "",
enabled: 1,
},
accessSystemList: [],
areaInfo: {},
};
},
computed: {
drawer: {
get() {
return this.show;
},
set(val) {
this.$emit("update:show", val);
},
},
},
methods: {
addSystem() {
let row = this.$cloneDeep(this.form);
this.accessSystemList.push(row);
},
handleClose() {
this.$resetForm("form");
this.drawer = false;
},
handleReset() {
this.$resetForm("form");
this.drawer = false;
},
onAdd(row) {
this.areaInfo = row;
this.accessSystemList = this.areaInfo.accessSystemList || [];
},
async handleOk() {
this.loading = true;
// this.accessSystemList.forEach((v) => {
// v.accessId = this.areaInfo.id;
// });
this.areaInfo.accessSystemList = this.accessSystemList;
let res = await saveAccess(this.areaInfo);
this.loading = false;
let { code, msg } = res.data;
if (code === 1) {
this.$message.success(msg);
this.$emit("success");
this.handleClose();
}
},
async delSystem({ row, $index }) {
if (row.id) {
let res = await deleteSystem({ id: row.id });
if (res.data.code == 1) {
this.$message.success(res.data.msg);
}
}
this.accessSystemList.splice($index, 1);
},
},
};
</script>
<style lang="less" scoped>
:deep(.el-drawer__body) {
padding: 0px !important;
display: flex;
flex-direction: column;
}
.main {
padding: 20px;
flex: 1;
overflow-y: auto;
}
.footer {
width: 100%;
padding: 20px;
border-top: 1px solid #ececec;
background-color: #fff;
text-align: right;
}
</style>
......@@ -90,20 +90,20 @@ export default {
// align: "center",
// reserveSelection: true,
// },
{
label: "序号",
type: "index",
width: "55",
align: "center",
index: (index) => {
return (this.current - 1) * this.size + index + 1;
},
},
// {
// label: "树形展开",
// width: "80",
// label: "序号",
// type: "index",
// width: "55",
// align: "center",
// index: (index) => {
// return (this.current - 1) * this.size + index + 1;
// },
// },
{
label: "树形展开",
width: "80",
align: "center",
},
{
label: "菜单名称",
prop: "name",
......
......@@ -94,7 +94,7 @@
'cursor-pointer',
{ active: form.imgPath == v },
]"
v-for="(v, i) in iconList"
v-for="(v, i) in iconJson"
:key="i"
@click="form.imgPath = v"
>
......@@ -116,7 +116,7 @@
<script>
import { saveMenu } from "@/api/system";
import { iconList } from "@/assets/icon";
import iconJson from "@/assets/icon.json";
export default {
components: {},
props: {
......@@ -143,7 +143,7 @@ export default {
},
data() {
return {
iconList,
iconJson,
form: {
name: "",
parentId: 0,
......
......@@ -149,15 +149,15 @@ const routes = [
icon: "el-icon-set-up",
},
},
{
path: "/system/areasystem",
component: () => import("@/pages/system/areaSystem/AreaSystem.vue"),
meta: {
activeMenu: "/system",
title: "区县系统",
icon: "el-icon-monitor",
},
},
// {
// path: "/system/areasystem",
// component: () => import("@/pages/system/areaSystem/AreaSystem.vue"),
// meta: {
// activeMenu: "/system",
// title: "区县系统",
// icon: "el-icon-monitor",
// },
// },
{
path: "/system/user",
component: () => import("@/pages/system/user/User.vue"),
......@@ -192,7 +192,7 @@ const routes = [
// meta: {
// activeMenu: "/system",
// title: "菜单管理",
// icon: "el-icon-box",
// icon: "el-icon-guide",
// },
// },
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment