siteOptions

This commit is contained in:
quantulr
2022-08-30 12:14:35 +08:00
parent 5983e1e31b
commit bff17dd1b1
8 changed files with 91 additions and 253 deletions

View File

@ -12,7 +12,8 @@ const useDataStore = defineStore("data", {
},
},
actions: {
async setSiteList(list) {
async setSiteList() {
console.log(this.siteList);
if (this.siteList.length !== 0) {
return;
}

View File

@ -3,13 +3,13 @@
:model-value="modelValue"
placeholder="请选择,支持搜索"
size="default"
:loading="dataStore.siteList.length === 0"
:loading="siteList.length == 0"
@change="valueChanged"
filterable
clearable
>
<el-option
v-for="item in dataStore.siteList"
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
@ -17,32 +17,22 @@
</el-select>
</template>
<script setup name="SiteOptions">
import useDataStore from "@/store/modules/data";
import { ref, toRefs } from "vue";
import { toRefs } from "vue";
const props = defineProps({
modelValue: {
type: [Number, String],
},
siteList: {
type: Array,
required: true,
},
});
const { modelValue } = toRefs(props);
const dataStore = useDataStore();
dataStore.setSiteList();
// const siteList = ref([]);
const { modelValue, siteList } = toRefs(props);
const emit = defineEmits(["update:modelValue"]);
// // 获取站点列表
// const getSiteList = async () => {
// const { rows } = await tenantSelect();
// siteList.value = rows;
// dataStore.setSiteList(rows);
// };
const valueChanged = (val) => {
console.log("changed");
emit("update:modelValue", val);
};
// getSiteList();
dataStore.setSiteList();
</script>

View File

@ -8,7 +8,7 @@
@submit.native.prevent
>
<el-form-item label="所属站点" prop="tenantId">
<SiteOptions v-model="queryParams.tenantId" />
<SiteOptions v-model="queryParams.tenantId" :site-list="siteList" />
<!-- <el-select
v-model="queryParams.tenantId"
placeholder="请选择,支持搜索"
@ -62,7 +62,7 @@
<el-table-column prop="title" label="导航名称"></el-table-column>
<el-table-column prop="area" label="站点" align="center">
<template #default="{ row }">
{{ dataStore.getSiteName(row.tenantId) }}
{{ siteList.find((el) => el.id === row.tenantId)?.name ?? "无" }}
</template>
</el-table-column>
<el-table-column label="更新时间" align="center">
@ -112,20 +112,7 @@
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属站点:" prop="tenantId">
<SiteOptions v-model="form.tenantId" />
<!-- <el-select
v-model="form.tenantId"
placeholder="请选择,支持搜索"
size="default"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> -->
<SiteOptions v-model="form.tenantId" :site-list="siteList" />
</el-form-item>
<el-form-item label="上级导航" prop="parentId">
<TreeSelect
@ -167,9 +154,7 @@ import { tenantSelect } from "@/api/subPlatform/tenant";
import { ElMessage, ElMessageBox } from "element-plus";
import WangEditor from "@/components/WangEditor/index.vue";
import SiteOptions from "@/views/components/SiteOptions";
import useDataStore from "@/store/modules/data";
const dataStore = useDataStore();
dataStore.setSiteList();
const queryFormRef = ref(null);
const dataList = ref([]);
const loading = ref(true);
@ -181,6 +166,7 @@ const title = ref("");
const menuOptions = ref([]);
const isExpandAll = ref(false);
const refreshTable = ref(true);
const data = reactive({
// 查询参数
queryParams: {
@ -221,8 +207,8 @@ const getList = async () => {
// 获取站点列表
const getSiteList = async () => {
const resp = await tenantSelect();
siteList.value = resp.rows;
const { rows } = await tenantSelect();
siteList.value = rows;
};
/** 转换导航数据结构 */
@ -236,6 +222,7 @@ const normalizer = (node) => {
children: node.children,
};
};
/** 查询导航下拉树结构 */
const getTreeselect = (options) => {
const arr = cloneDeep(options);
@ -248,11 +235,13 @@ const getTreeselect = (options) => {
menu.children = arr;
menuOptions.value.push(menu);
};
// 取消按钮
const cancel = () => {
showEditDialog.value = false;
reset();
};
// 表单重置
const reset = () => {
form.value = {
@ -265,10 +254,12 @@ const reset = () => {
formRef.value.resetFields();
}
};
/** 搜索按钮操作 */
const handleQuery = () => {
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
if (queryFormRef.value) {
@ -276,6 +267,7 @@ const resetQuery = () => {
}
handleQuery();
};
/** 新增按钮操作 */
const handleAdd = (row) => {
reset();
@ -287,6 +279,7 @@ const handleAdd = (row) => {
showEditDialog.value = true;
title.value = "添加导航";
};
/** 修改按钮操作 */
const handleUpdate = async (row) => {
reset();
@ -295,6 +288,7 @@ const handleUpdate = async (row) => {
showEditDialog.value = true;
title.value = "修改导航";
};
/** 提交按钮 */
const submitForm = async () => {
await formRef.value.validate();

View File

@ -17,20 +17,7 @@
/>
</el-form-item>
<el-form-item label="所属站点" prop="tenantId">
<el-select
v-model="queryParams.tenantId"
placeholder="请选择,支持搜索"
size="default"
filterable
clearable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
<SiteOptions v-model="form.tenantId" :site-list="siteList" />
</el-form-item>
<el-form-item label="联系人" prop="contact">
<el-input
@ -140,7 +127,7 @@
</el-table-column>
<el-table-column label="站点" align="center">
<template #default="{ row }">
{{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
{{ siteList.find((el) => el.id === row.tenantId)?.name ?? "无" }}
</template>
</el-table-column>
<el-table-column label="联系人" prop="contact" align="center" />
@ -185,20 +172,7 @@
<el-dialog :title="title" v-model="showEditDialog" width="35%">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="所属站点" prop="tenantId">
<el-select
v-model="form.tenantId"
placeholder="请选择,支持搜索"
size="default"
filterable
clearable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
<SiteOptions v-model="form.tenantId" :site-list="siteList" />
</el-form-item>
<el-form-item label="活动名称:" prop="title">
<el-input v-model="form.title" placeholder="请输入活动名称" />
@ -392,7 +366,6 @@
</el-form-item>
<el-form-item label="活动介绍:" prop="content">
<WangEditor v-model="form.content" minHeight="150px" />
<!-- <Editor v-model="form.content" :minHeight="150" /> -->
</el-form-item>
<el-form-item label="报名费用:" prop="amount">
<el-input v-model.number="form.amount">
@ -430,7 +403,8 @@ import { reactive, toRefs } from "vue";
// import { constants } from "buffer";
import { ElMessage, ElMessageBox } from "element-plus";
import WangEditor from "@/components/WangEditor/index.vue";
// import FieldOptions from "@/views/components/FieldOptions";
import SiteOptions from "@/views/components/SiteOptions";
const dataList = ref([]);
const loading = ref(true);
const total = ref(0);
@ -607,40 +581,6 @@ const cityChange = () => {
districtSelectList.value = [];
form.value.city && getAreaListByCityId(form.value.city);
};
// const getProvinceByParent = (id) => {
// return new Promise((resolve, reject) => {
// areaList({ code: id })
// .then(({ code, msg, data }) => {
// if (code == 200) {
// resolve(data);
// } else {
// ElMessage.error(msg);
// reject({ msg, code });
// }
// })
// .catch((error) => {
// reject(error);
// });
// });
// };
// const provinceCodeChange = async (id) => {
// delete form.value.city;
// delete form.value.district;
// if (!id) {
// citySelectList.value = [];
// districtSelectList.value = [];
// return false;
// }
// citySelectList.value = await getProvinceByParent(id);
// };
// const cityCodeChange = async (id) => {
// delete form.value.district;
// if (!id) {
// districtSelectList.value = [];
// return false;
// }
// districtSelectList.value = await getProvinceByParent(id);
// };
const getFieldByParent = (id) => {
return new Promise((resolve, reject) => {
@ -680,29 +620,7 @@ const field2Change = async (id) => {
const handleUpdate = async (row) => {
reset();
const resp = await activityDetail(row.id);
// resp.data.beginTime = resp.data.beginTime;
// resp.data.finishTime = resp.data.finishTime;
// resp.data.joinDeadline = resp.data.joinDeadline;
const formData = resp.data;
// provinceCodeChange(resp.data.province);
// cityCodeChange(resp.data.city);
// let arr = [];
// for (const key in identityList.value) {
// if (Object.hasOwnProperty.call(identityList.value, key)) {
// if (((key - 0) & formData.notifyCrowd) > 0) {
// arr.push(key);
// }
// }
// }
// formData.industrys = formData.industrys[0].split("-");
// if (formData.industrys.length == 2) {
// field1Change(formData.industrys[0]);
// } else if (formData.industrys.length == 3) {
// field1Change(formData.industrys[0]);
// field2Change(formData.industrys[1]);
// }
// formData.notifyCrowd = arr;
form.value = formData;
showEditDialog.value = true;
title.value = "修改";

View File

@ -8,7 +8,7 @@
@submit.native.prevent
>
<el-form-item label="所属站点" prop="tenantId">
<SiteOptions v-model="queryParams.tenantId" />
<SiteOptions v-model="queryParams.tenantId" :site-list="siteList" />
</el-form-item>
<el-form-item>
@ -47,8 +47,7 @@
<el-table-column label="导航名称" prop="title" width="120" />
<el-table-column label="所属站点" align="center">
<template #default="{ row }">
{{ dataStore.getSiteName(row.tenantId) }}
<!-- {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }} -->
{{ siteList.find((el) => el.id === row.tenantId)?.name ?? "无" }}
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
@ -92,7 +91,7 @@
<el-dialog :title="title" v-model="showEditDialog" width="500px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属站点" prop="tenantId">
<SiteOptions v-model="form.tenantId" />
<SiteOptions v-model="form.tenantId" :site-list="siteList" />
<!-- <el-select
v-model="form.tenantId"
placeholder="请选择,支持搜索"
@ -130,16 +129,14 @@ import { cloneDeep } from "lodash";
import { ElMessage, ElMessageBox } from "element-plus";
import { tenantSelect } from "@/api/subPlatform/tenant";
import SiteOptions from "@/views/components/SiteOptions";
import useDataStore from "@/store/modules/data";
const dataStore = useDataStore();
dataStore.setSiteList();
const queryFormRef = ref(null);
const dataList = ref([]);
const loading = ref(true);
const total = ref(0);
const showEditDialog = ref(false);
const formRef = ref(null);
// const siteList = ref([]); // 站点列表
const siteList = ref([]); // 站点列表
const showSearch = ref(true);
const title = ref("");
@ -176,6 +173,8 @@ const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
// 获取数据列表
const getList = async () => {
loading.value = true;
const resp = await navigationList(queryParams.value);
@ -185,17 +184,11 @@ const getList = async () => {
};
// 获取站点列表
// const getSiteList = async () => {
// const resp = await tenantSelect();
// siteList.value = resp.rows;
// };
const getSiteList = async () => {
const { rows } = await tenantSelect();
siteList.value = rows;
};
// const getSiteName = (tenantId) => {
// const item = siteList.value.find((el) => {
// return el.id === tenantId;
// });
// return item ? item.name : "无";
// };
// 取消按钮
const cancel = () => {
showEditDialog.value = false;
@ -213,17 +206,23 @@ const reset = () => {
formRef.value.resetFields();
}
};
// 处理添加
const handleAdd = () => {
reset();
showEditDialog.value = true;
title.value = "新增";
};
// 处理更新
const handleUpdate = (row) => {
reset();
form.value = cloneDeep(row);
showEditDialog.value = true;
title.value = "修改";
};
// 提交表单
const submitForm = async () => {
await formRef.value.validate();
if (form.value.id != undefined) {
@ -238,6 +237,7 @@ const submitForm = async () => {
getList();
}
};
/** 删除按钮操作 */
const handleDelete = (row) => {
ElMessageBox.confirm(`是否确认删除名为${row.title}的数据项?`)
@ -248,6 +248,7 @@ const handleDelete = (row) => {
})
.catch(() => {});
};
getList();
// getSiteList();
getSiteList();
</script>

View File

@ -8,22 +8,7 @@
@submit.native.prevent
>
<el-form-item label="导航名称:" prop="categoryId">
<SiteOptions v-model="queryParams.tenantId" />
<!-- <el-select
v-model="queryParams.categoryId"
placeholder="请选择"
size="default"
style="width: 240px"
clearable
>
<el-option
v-for="item in categoryList"
:key="item.id"
:label="item.title"
:value="item.id"
>
</el-option>
</el-select> -->
<SiteOptions v-model="queryParams.tenantId" :site-list="siteList" />
</el-form-item>
<el-form-item>
<el-button
@ -66,8 +51,7 @@
</el-table-column>
<el-table-column label="所属站点" align="center">
<template #default="{ row }">
<!-- {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }} -->
{{ dataStore.getSiteName(row.tenantId) }}
{{ siteList.find((el) => el.id === row.tenantId)?.name ?? "无" }}
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
@ -114,20 +98,7 @@
>
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属站点" prop="tenantId">
<SiteOptions v-model="form.tenantId" />
<!-- <el-select
v-model="form.tenantId"
placeholder="请选择,支持搜索"
size="default"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> -->
<SiteOptions v-model="form.tenantId" :site-list="siteList" />
</el-form-item>
<el-form-item label="归属导航:" prop="categoryId">
<el-select v-model="form.categoryId" placeholder="请选择">
@ -171,14 +142,12 @@ import {
serviceDelete,
navigationList,
} from "@/api/website/innovate";
import { tenantSelect } from "@/api/subPlatform/tenant";
import WangEditor from "@/components/WangEditor/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import SiteOptions from "@/views/components/SiteOptions";
import useDataStore from "@/store/modules/data";
const dataStore = useDataStore();
dataStore.setSiteList();
const loading = ref(true); // 是否正在加载
const showSearch = ref(true); // 是否显示搜索栏
const categoryList = ref([]); //导航列表
@ -186,6 +155,7 @@ const queryFormRef = ref(null);
const formRef = ref(null);
const total = ref(0);
const dataList = ref([]);
const siteList = ref([]);
// 弹出层标题
const title = ref("");
@ -198,6 +168,7 @@ const data = reactive({
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {},
rules: {
@ -218,6 +189,7 @@ const data = reactive({
],
},
});
const { queryParams, form, rules } = toRefs(data);
const resetQuery = () => {
@ -254,6 +226,11 @@ const getcategoryList = async () => {
categoryList.value = resp.rows;
};
// 获取站点列表
const getSiteList = async () => {
const { rows } = await tenantSelect();
siteList.value = rows;
};
// 取消按钮
const cancel = () => {
showEditDialog.value = false;
@ -318,5 +295,6 @@ const handleDelete = (row) => {
};
getList();
getSiteList();
getcategoryList();
</script>

View File

@ -36,20 +36,7 @@
</el-select>
</el-form-item>
<el-form-item label="所属站点" prop="tenantId">
<!-- <el-select
v-model="queryParams.tenantId"
placeholder="请选择,支持搜索"
size="default"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> -->
<SiteOptions v-model="queryParams.tenantId" />
<SiteOptions v-model="queryParams.tenantId" :site-list="siteList" />
</el-form-item>
<el-form-item>
<el-button
@ -98,7 +85,7 @@
</el-table-column>
<el-table-column label="所属站点" align="center">
<template #default="{ row }">
{{ dataStore.getSiteName(row.tenantId) }}
{{ siteList.find((el) => el.id === row.tenantId)?.name ?? "无" }}
</template>
</el-table-column>
@ -151,7 +138,7 @@
<el-input v-model="form.title" placeholder="请输入数据名称" />
</el-form-item>
<el-form-item label="所属站点:" prop="tenantId">
<SiteOptions v-model="form.tenantId" />
<SiteOptions v-model="form.tenantId" :site-list="siteList" />
</el-form-item>
<el-form-item label="归属导航:" prop="mode">
<el-select v-model="form.mode" placeholder="请选择">
@ -202,18 +189,16 @@ import {
serviceEdit,
serviceDelete,
} from "@/api/website/solution";
// import { tenantSelect } from "@/api/subPlatform/tenant";
import { tenantSelect } from "@/api/subPlatform/tenant";
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import SiteOptions from "@/views/components/SiteOptions";
import useDataStore from "@/store/modules/data";
const dataStore = useDataStore();
dataStore.setSiteList();
const dataList = ref([]);
// TODO:isSuper
// const is_super = this.$store.getters.is_super;
const loading = ref(true);
// const siteList = ref([]); // 站点列表
const siteList = ref([]); // 站点列表
const showSearch = ref(true);
const showEditDialog = ref(false); // 是否显示新增、修改弹窗
const title = ref(""); // 弹窗标题
@ -284,10 +269,12 @@ const resetQuery = () => {
}
handleQuery();
};
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
// 获取服务列表
const getList = async () => {
loading.value = true;
@ -297,11 +284,11 @@ const getList = async () => {
loading.value = false;
};
// const getSiteList = async () => {
// const resp = await tenantSelect();
// siteList.value = resp.rows;
// };
// 获取站点列表
const getSiteList = async () => {
const { rows } = await tenantSelect();
siteList.value = rows;
};
// 取消按钮
const cancel = () => {
showEditDialog.value = false;
@ -327,13 +314,14 @@ const handleAdd = () => {
showEditDialog.value = true;
title.value = "新增";
};
const handleUpdate = async (row) => {
// await getSiteList();
reset();
form.value = cloneDeep(row);
showEditDialog.value = true;
title.value = "修改";
};
const submitForm = async () => {
await formRef.value.validate();
if (form.value.id != undefined) {
@ -350,6 +338,7 @@ const submitForm = async () => {
});
}
};
/** 删除按钮操作 */
const handleDelete = (row) => {
ElMessageBox.confirm(`是否确认删除名为${row.title}的数据项?`)
@ -360,6 +349,7 @@ const handleDelete = (row) => {
})
.catch(() => {});
};
getList();
// getSiteList();
getSiteList();
</script>

View File

@ -19,20 +19,7 @@
</el-form-item>
<el-form-item label="所属站点" prop="tenantId">
<SiteOptions v-model="queryParams.tenantId" />
<!-- <el-select
v-model="queryParams.tenantId"
placeholder="请选择,支持搜索"
size="small"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> -->
<SiteOptions v-model="queryParams.tenantId" :siteList="siteList" />
</el-form-item>
<el-form-item>
<el-button
@ -81,10 +68,7 @@
</el-table-column>
<el-table-column label="所属站点" align="center">
<template #default="{ row }">
<!-- {{
siteList.find((el) => el.id === row.tenantId)?.name || "无"
}} -->
{{ dataStore.getSiteName(row.tenantId) }}
{{ siteList.find((el) => el.id === row.tenantId)?.name ?? "无" }}
</template>
</el-table-column>
<el-table-column
@ -147,20 +131,7 @@
<ImageUpload v-model="form.image" :isShowTip="false" :limit="1" />
</el-form-item>
<el-form-item label="所属站点:" prop="tenantId">
<SiteOptions v-model="form.tenantId" />
<!-- <el-select
v-model="form.tenantId"
placeholder="请选择,支持搜索"
size="small"
filterable
>
<el-option
v-for="item in siteList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select> -->
<SiteOptions v-model="form.tenantId" :siteList="siteList" />
</el-form-item>
<el-form-item label="所属服务:" prop="kindId">
<el-cascader
@ -179,7 +150,6 @@
destroy-on-close
minHeight="150px"
></WangEditor>
<!-- <Editor v-model="form.content" :minHeight="150" /> -->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@ -202,12 +172,8 @@ import {
serviceCaseKindSelect,
} from "@/api/website/solution";
import WangEditor from "@/components/WangEditor/index.vue";
import useDataStore from "@/store/modules/data";
import SiteOptions from "@/views/components/SiteOptions";
// import SiteOptions from "../../../components/SiteOptions/index.vue";
const dataStore = useDataStore();
dataStore.setSiteList();
// import SiteOptions from "@/components/SiteOptions";
const dataList = ref([]);
const loading = ref(true);
const total = ref(0);
@ -280,10 +246,10 @@ const getList = async () => {
loading.value = false;
};
// const getSiteList = async () => {
// const resp = await tenantSelect();
// siteList.value = resp.rows;
// };
const getSiteList = async () => {
const { rows } = await tenantSelect();
siteList.value = rows;
};
const getCaseKindList = async () => {
const resp = await serviceCaseKindSelect();
@ -360,6 +326,6 @@ const handleDelete = (row) => {
};
getList();
// getSiteList();
getSiteList();
getCaseKindList();
</script>