123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320 |
- <template>
-
- <ContentWrap>
- <el-form
- class="-mb-15px"
- :model="queryParams"
- ref="queryFormRef"
- :inline="true"
- label-width="100px"
- >
- <el-form-item label="工作间名称" prop="name">
- <el-input
- v-model="queryParams.name"
- placeholder="请输入工作间名称"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
- </el-form-item>
- <el-form-item label="负责人" prop="leaderUserId">
- <el-select
- v-model="queryParams.leaderUserId"
- @change="handleSupervisorChange"
- placeholder="请选择负责人"
- clearable
- filterable
- class="!w-240px"
- >
- <el-option
- v-for="user in users"
- :key="user.id"
- :label="user.nickname"
- :value="user.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="联系电话" prop="phone">
- <el-input
- v-model="queryParams.phone"
- placeholder="请输入联系电话"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
- </el-form-item>
- <el-form-item label="邮箱" prop="email">
- <el-input
- v-model="queryParams.email"
- placeholder="请输入邮箱"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
- </el-form-item>
- <el-form-item label="工作间地址" prop="address">
- <el-input
- v-model="queryParams.address"
- placeholder="请输入工作间地址"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
- </el-form-item>
-
-
-
- <el-form-item>
- <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
- <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
- <el-button
- type="primary"
- plain
- @click="openForm('create')"
- v-hasPermi="['system:dept:create']"
- >
- <Icon icon="ep:plus" /> 新增
- </el-button>
-
- </el-form-item>
- </el-form>
- </ContentWrap>
-
- <ContentWrap>
- <el-table
- v-loading="loading"
- :data="list"
- row-key="id"
- :default-expand-all="isExpandAll"
- v-if="refreshTable"
- >
-
- {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
- <el-table-column type="index" width="50" />
- <el-table-column prop="name" label="工作间名称" align="center" />
- <el-table-column prop="leader" label="负责人" align="center">
- <template #default="scope">
- {{ userList.filter((user) => scope.row.leaderUserId.includes(user.id)).map(user => user.nickname).join(', ') }}
- </template>
- </el-table-column>
- <el-table-column prop="phone" label="联系电话" align="center" />
- <el-table-column prop="email" label="邮箱" align="center" />
- <el-table-column prop="address" label="工作间地址" align="center" />
- <el-table-column prop="description" label="简介" align="center">
- <template #default="scope">
- <span>
- {{ stripHtml(scope.row.description).substring(0, 10) + (stripHtml(scope.row.description).length > 10 ? '...' : '') }}
- </span>
- </template>
- </el-table-column>
-
-
- <el-table-column
- label="创建时间"
- align="center"
- prop="createTime"
- width="180"
- :formatter="dateFormatter"
- />
- <el-table-column label="操作" align="center">
- <template #default="scope">
- <el-button
- link
- type="primary"
- @click="openForm('update', scope.row.id)"
- v-hasPermi="['system:dept:update']"
- >
- 修改
- </el-button>
- <el-button type="text" @click="openUserAchievement(scope.row.id)">
- 详情
- </el-button>
- <el-button
- link
- type="danger"
- @click="handleDelete(scope.row.id)"
- v-hasPermi="['system:dept:delete']"
- >
- 删除
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- </ContentWrap>
-
- <DeptForm ref="formRef" @success="handleFormSuccess" />
- </template>
- <script lang="ts" setup>
- import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
- import { dateFormatter } from '@/utils/formatTime'
- import { handleTree } from '@/utils/tree'
- import * as DeptApi from '@/api/system/dept'
- import DeptForm from './DeptForm.vue'
- import * as UserApi from '@/api/system/user'
- import { useRouter } from 'vue-router'
- defineOptions({ name: 'SystemDept' })
- const message = useMessage()
- const { t } = useI18n()
- const loading = ref(true)
- const list = ref()
- const queryParams = reactive({
- pageNo: 1,
- pageSize: 100,
- name: undefined,
- leaderUserId: [],
- phone: undefined,
- email: undefined,
- address: undefined,
- status: undefined
- })
- const queryFormRef = ref()
- const isExpandAll = ref(true)
- const refreshTable = ref(true)
- const userList = ref<UserApi.UserVO[]>([])
- const getList = async () => {
- loading.value = true
- try {
- const data = await DeptApi.getDeptPage(queryParams)
- console.log(data,'111');
- list.value = handleTree(data)
- } finally {
- loading.value = false
- }
- }
- const users = ref()
- const getSupervisor= async () => {
- try {
- const response = await UserApi.getSupervisor()
- users.value = response
- } catch (error) {
- console.error('Error fetching user data:', error)
- }
- }
- const handleSupervisorChange = (value: number) => {
- const selectedUser = users.value.find(user => user.id === value);
- if (selectedUser) {
- queryParams.leaderUserId = selectedUser.id;
- handleQuery();
-
- }
- }
- const extractedImageUrls = ref<string[]>([]);
- const handleFormSuccess = (urls) => {
- getList();
- extractedImageUrls.value = urls;
- console.log('接收到的图片 URL:', extractedImageUrls.value);
- }
- const router = useRouter()
- const openUserAchievement = (id) => {
- router.push({
- name: 'DeptInfo',
- query: { id: id },
- });
- }
- const stripHtml = (html) => {
- if (!html) return '';
- return html.replace(/<[^>]*>/g, '');
- };
- const toggleExpandAll = () => {
- refreshTable.value = false
- isExpandAll.value = !isExpandAll.value
- nextTick(() => {
- refreshTable.value = true
- })
- }
- const handleQuery = () => {
- console.log("当前查询参数:", queryParams);
- getList();
- }
- const resetQuery = () => {
- queryParams.pageNo = 1
- queryFormRef.value.resetFields()
- handleQuery()
- }
- const handleDelete = async (id: number) => {
- try {
-
- await message.delConfirm()
-
- await DeptApi.deleteDept(id)
- message.success(t('common.delSuccess'))
-
- await getList()
- } catch {}
- }
- const formRef = ref()
- const openForm = (type: string, id?: number) => {
- formRef.value.open(type, id)
- }
- onMounted(async () => {
- await getList()
-
- userList.value = await UserApi.getSimpleUserList()
- console.log(userList.value,'000');
- getSupervisor()
- })
- </script>
|