<template>
|
<div class="custom-drawer">
|
<el-drawer v-model="drawerIsShow" direction="rtl" size="40%">
|
<template #header>
|
<div>
|
<i class="ywifont ywicon-lizi !text-[15px] text-blue-400 cursor-pointer font-bold"></i>
|
<!-- <SvgIcon name="ele-User" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" /> -->
|
<span> {{ `【${user?.user_name}】提问示例` }} </span>
|
</div>
|
</template>
|
<div class="flex-column h-full">
|
<div class="flex-0 flex-col flex">
|
<el-form :inline="true" :model="queryParams">
|
<el-form-item label="标题" prop="title">
|
<el-input v-model="queryParams.title" style="width: 226.4px" placeholder="标题" clearable @input="debounceQueryTable" />
|
</el-form-item>
|
<el-form-item label="分组" prop="group_id">
|
<el-tree-select
|
style="width: 226.4px"
|
filterable
|
v-model="queryParams.group_id"
|
:props="{
|
id: 'group_id',
|
label: 'group_name',
|
children: 'children',
|
}"
|
:data="groupTree ?? []"
|
@change="groupChange"
|
node-key="group_id"
|
:clearable="true"
|
:accordion="false"
|
:expandNode="false"
|
:check-strictly="true"
|
placeholder="分组"
|
>
|
</el-tree-select>
|
</el-form-item>
|
</el-form>
|
<span class="mt-[-12px] mb-[12px]">共有 {{ displayTableData.length }} 条数据</span>
|
</div>
|
<el-table
|
class="flex-auto"
|
size="small"
|
v-loading="accountTableLoading"
|
border
|
row-key="ID"
|
:data="displayTableData"
|
style="width: 100%"
|
>
|
<el-table-column label="序号" fixed="left" width="55" show-overflow-tooltip>
|
<template #default="scope">
|
{{ scope.$index + 1 }}
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="title" label="标题" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="question" label="问题" show-overflow-tooltip />
|
</el-table>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, watch } from 'vue';
|
import { getUserSampleListByPost } from '/@/api/sampleAdmin/index';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { convertListToTree, debounce, travelTree } from '/@/utils/util';
|
import { onMounted } from 'vue';
|
import { getSceneGroupTreeByPost } from '/@/api/scene';
|
const props = defineProps(['user']);
|
//#region ====================== 用户账户 ======================
|
|
const drawerIsShow = defineModel('isShow', {
|
type: Boolean,
|
default: false,
|
});
|
const accountTableData = ref([]);
|
const accountTableLoading = ref(false);
|
|
const getSystemAccountByUserID = async () => {
|
const res = await getUserSampleListByPost(
|
{ user_id: props.user.user_id },
|
{
|
loading: false,
|
}
|
);
|
accountTableData.value = res?.values ?? [];
|
};
|
|
//#region ====================== 查询 ======================
|
const getEmptyParams = () => {
|
return {
|
title: '',
|
group_id: '',
|
};
|
};
|
const queryParams = ref(getEmptyParams());
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(
|
accountTableData,
|
queryParams,
|
() => {
|
displayTableData.value = accountTableData.value;
|
},
|
undefined,
|
undefined,
|
(key, item, queryStr) => {
|
if (key === 'group_id') {
|
let groupItem;
|
travelTree(groupTree.value, (value) => {
|
if (value.group_id === queryStr) {
|
groupItem = value;
|
return true;
|
}
|
});
|
if (!groupItem) {
|
return false;
|
}
|
|
return groupItem.children?.some((treeItem) => treeItem.group_id === item.group_id);
|
}
|
}
|
);
|
const debounceQueryTable = debounce(handleQueryTable, 400);
|
const groupChange = (val) => {
|
handleQueryTable();
|
};
|
|
//#endregion
|
|
const groupTree = ref(null);
|
|
watch(
|
() => drawerIsShow.value,
|
async (val) => {
|
if (!val) {
|
accountTableData.value = [];
|
queryParams.value = getEmptyParams();
|
return;
|
}
|
|
try {
|
await getSystemAccountByUserID();
|
|
if (!groupTree.value) {
|
const res = await getSceneGroupTreeByPost({
|
loading: false,
|
});
|
groupTree.value = convertListToTree(res?.groups ?? [], {
|
ID: 'group_id',
|
Children: 'children',
|
ParentID: 'p_group_id',
|
});
|
}
|
} finally {
|
accountTableLoading.value = false;
|
}
|
}
|
);
|
|
//#endregion
|
|
</script>
|
<style scoped lang="scss"></style>
|
