完成调查问卷
This commit is contained in:
Zy
@@ -41,31 +41,50 @@
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="标题" align="center" prop="titile" />
|
||||
<el-table-column label="作者" align="center" prop="author" />
|
||||
<el-table-column label="发布状态 0未发布 1已发布" align="center" prop="status" />
|
||||
<el-table-column label="发布状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<DictTag :value="scope.row.status" :options="com_publish_status"></DictTag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="浏览量" align="center" prop="pageViews" />
|
||||
<el-table-column label="发布人" align="center" prop="createName" />
|
||||
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<el-table-column label="操作" align="center" width="300px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['activity:activity:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['activity:activity:remove']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-button v-if="scope.row.status === '0'" link type="primary" @click="handleSend(scope.row)">发布</el-button>
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['activity:activity:edit']">修改</el-button>
|
||||
<el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['activity:activity:remove']">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="activityFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="发布人姓名" prop="createName">
|
||||
<el-input v-model="form.createName" placeholder="请输入发布人姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发布后状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio v-for="item in com_publish_status" :key="item.value" :label="item.label" :value="item.value"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Activity" lang="ts">
|
||||
import { listActivity, getActivity, delActivity, addActivity, updateActivity } from '@/api/system/Activity/index';
|
||||
import { listActivity, delActivity, updateActivity } from '@/api/system/Activity/index';
|
||||
import { ActivityVO, ActivityQuery, ActivityForm } from '@/api/system/Activity/type';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_publish_status } = toRefs<any>(proxy?.useDict('com_publish_status'));
|
||||
|
||||
const activityList = ref<ActivityVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
@@ -81,7 +100,7 @@ const activityFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
title: '发布活动'
|
||||
});
|
||||
|
||||
const initFormData: ActivityForm = {
|
||||
@@ -107,7 +126,7 @@ const data = reactive<PageData<ActivityForm, ActivityQuery>>({
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '活动管理表id不能为空', trigger: 'blur' }]
|
||||
createName: [{ required: true, message: '发布人姓名不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
@@ -121,7 +140,15 @@ const getList = async () => {
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 发布按钮 */
|
||||
const handleSend = (row: ActivityVO) => {
|
||||
form.value = {
|
||||
...form.value,
|
||||
...row
|
||||
};
|
||||
console.log(form.value);
|
||||
dialog.visible = true;
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
@@ -173,13 +200,10 @@ const handleUpdate = async (row?: ActivityVO) => {
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
activityFormRef.value?.validate(async (valid: boolean) => {
|
||||
console.log(valid);
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateActivity(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addActivity(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
await updateActivity(form.value).finally(() => (buttonLoading.value = false));
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
|
||||
@@ -11,33 +11,33 @@
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="房屋" prop="urgencyLevel">
|
||||
<el-form-item label="房屋" prop="houseId">
|
||||
<el-cascader @change="handleChange" v-model="userHousepath" :options="treedata" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="申请人" prop="urgencyLevel">
|
||||
<el-input v-model.trim="form.author" placeholder="请输入申请人" />
|
||||
<el-form-item label="申请人" prop="applyName">
|
||||
<el-input v-model.trim="form.applyName" placeholder="请输入申请人" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="装修公司" prop="noticeTitle">
|
||||
<el-input v-model.trim="form.noticeTitle" placeholder="请输入装修公司" />
|
||||
<el-form-item label="装修公司" prop="decorationCompany">
|
||||
<el-input v-model.trim="form.decorationCompany" placeholder="请输入装修公司" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="装修内容" prop="author">
|
||||
<el-input v-model.trim="form.author" placeholder="请输入装修内容" />
|
||||
<el-form-item label="装修内容" prop="decorationContent">
|
||||
<el-input v-model.trim="form.decorationContent" placeholder="请输入装修内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="装修押金(元)" prop="urgencyLevel">
|
||||
<el-input v-model.trim="form.author" placeholder="请输入装修押金" />
|
||||
<el-form-item label="装修押金(元)" prop="decorationDeposit">
|
||||
<el-input v-model.trim="form.decorationDeposit" placeholder="请输入装修押金" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -69,16 +69,16 @@ const formRef = ref();
|
||||
const form = ref({
|
||||
'id': null,
|
||||
'houseId': null,
|
||||
'author': '',
|
||||
'noticeTitle': '',
|
||||
'urgencyLevel': '0',
|
||||
'publishStatus': ''
|
||||
'applyName': '',
|
||||
'decorationCompany': '',
|
||||
'decorationContent': '',
|
||||
'decorationDeposit': null
|
||||
});
|
||||
const rules = {
|
||||
noticeTitle: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
|
||||
urgencyLevel: [{ required: true, message: '请选择紧急程度', trigger: 'blur' }],
|
||||
author: [{ required: true, message: '请输入作者名称', trigger: 'blur' }],
|
||||
noticeContent: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
|
||||
houseId: [{ required: true, message: '请选择房屋', trigger: 'blur' }],
|
||||
applyName: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
|
||||
decorationDeposit: [{ required: true, message: '请输入装修押金', trigger: 'blur' }],
|
||||
decorationContent: [{ required: true, message: '请输入装修内容', trigger: 'blur' }]
|
||||
};
|
||||
const userid = ref();
|
||||
|
||||
@@ -129,7 +129,7 @@ const submitForm = () => {
|
||||
// 返回
|
||||
function handleBack() {
|
||||
router.push({
|
||||
path: '/repair/noticepc'
|
||||
path: '/repair/decoration'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -51,16 +51,16 @@
|
||||
<el-table-column label="装修公司" align="center" prop="decorationCompany" />
|
||||
<el-table-column label="装修内容" align="center" prop="decorationContent" />
|
||||
<el-table-column label="装修押金" align="center" prop="decorationDeposit" />
|
||||
<el-table-column label="装修验收结果" align="center" prop="inspectionResult">
|
||||
<el-table-column label="验收结果" align="center" prop="inspectionResult">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_decoration_status" :value="scope.row.inspectionResult"></dict-tag>
|
||||
<dict-tag :options="com_decoration_status" :value="Number(scope.row.inspectionResult)"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="申请时间" align="center" prop="inspectionName" />
|
||||
<el-table-column label="验收人" align="center" prop="inspectionName" />
|
||||
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['decoration:decoration:edit']">验收</el-button>
|
||||
<el-button link type="primary" @click="handleInspection(scope.row)" v-hasPermi="['decoration:decoration:edit']">验收</el-button>
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['decoration:decoration:edit']">详情</el-button>
|
||||
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['decoration:decoration:edit']">修改</el-button>
|
||||
<el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['decoration:decoration:remove']">删除</el-button>
|
||||
@@ -70,11 +70,33 @@
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
|
||||
<el-form ref="decorationFormRef" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="持卡人姓名" prop="inspectionName">
|
||||
<el-input v-model="form.inspectionName" placeholder="请输入持卡人姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验收结果" prop="inspectionResult">
|
||||
<el-select v-model="form.inspectionResult" placeholder="请选择装修验收结果">
|
||||
<el-option v-for="item in com_decoration_status" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入" :rows="5"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Decoration" lang="ts">
|
||||
import { listDecoration, delDecoration } from '@/api/system/Decoration/index';
|
||||
import { listDecoration, delDecoration, updateDecoration } from '@/api/system/Decoration/index';
|
||||
import { DecorationVO, DecorationQuery, DecorationForm } from '@/api/system/Decoration/type';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
@@ -91,6 +113,10 @@ const total = ref(0);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const decorationFormRef = ref<ElFormInstance>();
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: DecorationForm = {
|
||||
id: undefined,
|
||||
@@ -120,7 +146,8 @@ const data = reactive<PageData<DecorationForm, DecorationQuery>>({
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '装修管理表id不能为空', trigger: 'blur' }]
|
||||
inspectionName: [{ required: true, message: '验收人姓名不能为空', trigger: 'blur' }],
|
||||
inspectionResult: [{ required: true, message: '验收结果不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
@@ -135,6 +162,17 @@ const getList = async () => {
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
decorationFormRef.value?.resetFields();
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
@@ -172,6 +210,32 @@ const handleUpdate = async (row?: DecorationVO) => {
|
||||
});
|
||||
};
|
||||
|
||||
/** 验收 */
|
||||
const handleInspection = (row: DecorationVO) => {
|
||||
form.value = {
|
||||
...form.value,
|
||||
...row
|
||||
};
|
||||
console.log(form.value);
|
||||
dialog.visible = true;
|
||||
dialog.title = '验收';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
decorationFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateDecoration(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: DecorationVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
|
||||
324
src/views/system/Questionnaire/addQuestionnaire.vue
Normal file
324
src/views/system/Questionnaire/addQuestionnaire.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<div class="AddBuildingBox">
|
||||
<PageHeader :title="userid ? '编辑问卷' : '添加问卷'"></PageHeader>
|
||||
<div class="AddBuildingBody">
|
||||
<el-form class="formBody" label-position="right" label-width="130px">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>基本信息</span>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="参与范围" prop="cardName">
|
||||
<el-radio-group v-model="form.scope">
|
||||
<el-radio v-for="item in com_questionnaire_scope" :value="item.value" :label="item.label" :key="item.value"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.scope === '1'">
|
||||
<el-col :span="12">
|
||||
<ul class="checkoutSideUsesbox">
|
||||
<li v-for="(item, index) in checkoutUses" :key="index">
|
||||
<div>
|
||||
<span>姓名：</span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<el-icon @click="delteUse(item.id)">
|
||||
<Delete></Delete>
|
||||
</el-icon>
|
||||
</li>
|
||||
<Holder returnvalue="*" ref="HolderRef" :isMultiple="true" :userid="checkoutUses" @change="handleSelect">
|
||||
<template #default>
|
||||
<li @click="OpenUseTablesfun" class="add justify-center">
|
||||
<el-icon>
|
||||
<DocumentAdd></DocumentAdd>
|
||||
</el-icon>
|
||||
<span>添加业主</span>
|
||||
</li>
|
||||
</template>
|
||||
</Holder>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="时间范围" prop="timedata">
|
||||
<el-date-picker
|
||||
v-model="timedata"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
type="datetimerange"
|
||||
range-separator="到"
|
||||
start-placeholder="开始日期时间"
|
||||
end-placeholder="结束日期时间"
|
||||
placeholder="请选择问卷时间范围"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input :rows="5" type="textarea" placeholder="请输入" v-model="form.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card class="mt-20px">
|
||||
<template #header>
|
||||
<span>问卷题目</span>
|
||||
</template>
|
||||
<QuestionnaireEdit ref="questionnaireEditRef" :initial-data="editData" @cancel="handleCancel" @save="handleSave" @publish="handlePublish" />
|
||||
</el-card>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Holder from '@/components/Holder/index.vue';
|
||||
import QuestionnaireEdit from './components/QuestionnaireEdit.vue';
|
||||
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
import { Delete, DocumentAdd } from '@element-plus/icons-vue';
|
||||
import { getQuestionnaire } from '../test/api';
|
||||
import { QuestionnaireForm, QuestionnaireVO } from '@/api/system/Questionnaire/type';
|
||||
import { addQuestionnaire, updateQuestionnaire } from '@/api/system/Questionnaire';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
import { listResident } from '@/api/system/resident';
|
||||
const houseStore = useHouseStore();
|
||||
|
||||
const form = ref({
|
||||
scope: '0',
|
||||
residents: '',
|
||||
remark: ''
|
||||
});
|
||||
const timedata = ref([]);
|
||||
// ! 路由参数 --------------------------------------------------------------------------------
|
||||
// 打开
|
||||
const HolderRef = ref<InstanceType<typeof Holder>>();
|
||||
function OpenUseTablesfun() {
|
||||
HolderRef.value.open();
|
||||
}
|
||||
// 多选
|
||||
const checkoutUses = ref([]);
|
||||
function handleSelect(val) {
|
||||
checkoutUses.value = val;
|
||||
form.value.residents = val.map((item) => item.id).join(',');
|
||||
}
|
||||
// 删除
|
||||
function delteUse(id: string | number) {
|
||||
checkoutUses.value = checkoutUses.value.filter((item) => item.id !== id);
|
||||
}
|
||||
// ! 编辑问卷 ------------------------------------------------------------------------
|
||||
const questionnaireEditRef = ref<InstanceType<typeof QuestionnaireEdit>>();
|
||||
const editData = ref<QuestionnaireVO | null>(null);
|
||||
|
||||
// ! 路由参数 --------------------------------------------------------------------------------
|
||||
const userid = ref(null);
|
||||
|
||||
if (route.query.id) {
|
||||
userid.value = route.query.id;
|
||||
|
||||
handleEdit(userid.value);
|
||||
} else {
|
||||
handleAdd();
|
||||
}
|
||||
|
||||
//
|
||||
const tableData = ref([]);
|
||||
|
||||
// 新增问卷
|
||||
function handleAdd() {
|
||||
editData.value = null;
|
||||
questionnaireEditRef.value?.reset();
|
||||
}
|
||||
// 编辑问卷
|
||||
async function handleEdit(id: string | number) {
|
||||
const res = await listResident();
|
||||
tableData.value = res.rows;
|
||||
// 父组件自己调用接口获取数据
|
||||
getQuestionnaire(id).then((res) => {
|
||||
editData.value = res.data;
|
||||
editData.value.content = JSON.parse(res.data.content);
|
||||
questionnaireEditRef.value?.init(res.data);
|
||||
form.value = {
|
||||
scope: res.data.scope,
|
||||
residents: res.data.residents,
|
||||
remark: res.data.remark
|
||||
};
|
||||
checkoutUses.value = res.data.residents
|
||||
.split(',')
|
||||
.filter((item) => item)
|
||||
.map((item) => {
|
||||
const find = tableData.value.find((useritem) => useritem.id == item);
|
||||
if (find) {
|
||||
return {
|
||||
name: find.name,
|
||||
id: item
|
||||
};
|
||||
}
|
||||
});
|
||||
timedata.value = [res.data.startTime, res.data.endTime];
|
||||
});
|
||||
}
|
||||
|
||||
// 保存草稿
|
||||
async function handleSave(data: QuestionnaireForm) {
|
||||
try {
|
||||
// 父组件自己调用接口提交
|
||||
console.log(data);
|
||||
if (userid.value) {
|
||||
await updateQuestionnaire({
|
||||
...data,
|
||||
content: JSON.stringify(data.content),
|
||||
status: '0', // 草稿状态
|
||||
startTime: timedata.value[0],
|
||||
endTime: timedata.value[1],
|
||||
...form.value
|
||||
});
|
||||
} else {
|
||||
await addQuestionnaire({
|
||||
...data,
|
||||
content: JSON.stringify(data.content),
|
||||
status: '0', // 草稿状态
|
||||
startTime: timedata.value[0],
|
||||
endTime: timedata.value[1],
|
||||
...form.value
|
||||
});
|
||||
}
|
||||
ElMessage.success('保存成功');
|
||||
handleCancel();
|
||||
} catch (e) {
|
||||
// 错误处理
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
// 发布问卷
|
||||
async function handlePublish(data: QuestionnaireForm) {
|
||||
try {
|
||||
if (userid.value) {
|
||||
await updateQuestionnaire({
|
||||
...data,
|
||||
content: JSON.stringify(data.content),
|
||||
status: '1', // 发布状态
|
||||
startTime: timedata.value[0],
|
||||
villageId: houseStore.currentVilageInfo.villageId,
|
||||
endTime: timedata.value[1]
|
||||
});
|
||||
} else {
|
||||
await addQuestionnaire({
|
||||
...data,
|
||||
content: JSON.stringify(data.content),
|
||||
status: '1', // 发布状态
|
||||
startTime: timedata.value[0],
|
||||
villageId: houseStore.currentVilageInfo.villageId,
|
||||
endTime: timedata.value[1]
|
||||
});
|
||||
}
|
||||
ElMessage.success('发布成功');
|
||||
handleCancel();
|
||||
} catch (e) {
|
||||
// 错误处理
|
||||
}
|
||||
}
|
||||
// 取消
|
||||
function handleCancel() {
|
||||
// 跳转到列表页或关闭弹窗
|
||||
router.push('/repair/Questionnaire');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AddBuildingBox {
|
||||
padding: 15px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.AddBuildingBody {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
.formBody {
|
||||
.checkoutSideUsesbox {
|
||||
margin-left: 130px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 10px;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
font-size: 14px;
|
||||
padding: 0 10px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f3f9ff;
|
||||
border: 1px solid #8fc0f1;
|
||||
|
||||
@media (max-width: 2000px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 1650px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
@media (max-width: 1650px) {
|
||||
font-size: 8px;
|
||||
}
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
&.add {
|
||||
cursor: pointer;
|
||||
justify-content: center;
|
||||
color: #409eff;
|
||||
border: 1px dashed #409eff;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: #40a0ff10;
|
||||
}
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:deep(.el-form-item__content, .el-select, .el-input) {
|
||||
width: 350px !important;
|
||||
margin-right: 10px;
|
||||
.el-cascader {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
330
src/views/system/Questionnaire/components/QuestionnaireEdit.vue
Normal file
330
src/views/system/Questionnaire/components/QuestionnaireEdit.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="edit-container">
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧：组件库 -->
|
||||
<el-col :span="4">
|
||||
<el-card shadow="hover" class="component-panel sticky-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>组件库</span>
|
||||
</div>
|
||||
</template>
|
||||
<draggable
|
||||
:list="componentList"
|
||||
:group="{ name: 'components', pull: 'clone', put: false }"
|
||||
:clone="cloneComponent"
|
||||
item-key="type"
|
||||
class="component-list"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div class="component-item">
|
||||
<el-icon><component :is="element.icon" /></el-icon>
|
||||
<span>{{ element.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 中间：设计画布 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="canvas-panel">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>设计画布</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="question-title-area">
|
||||
<el-input v-model="form.title" placeholder="请输入问卷标题" class="title-input" />
|
||||
<el-input v-model="form.description" type="textarea" placeholder="请输入问卷描述（选填）" />
|
||||
</div>
|
||||
|
||||
<draggable v-model="form.content" group="components" item-key="cid" class="question-list" @add="handleAddQuestion">
|
||||
<template #item="{ element, index }">
|
||||
<div class="question-item" :class="{ 'is-active': activeIndex === index }" @click="selectQuestion(index)">
|
||||
<div class="question-handle">
|
||||
<el-icon><Rank /></el-icon>
|
||||
</div>
|
||||
<div class="question-content">
|
||||
<el-tag size="small" type="success" class="question-type-tag">
|
||||
{{ getComponentLabel(element.type) }}
|
||||
</el-tag>
|
||||
<span>Q{{ index + 1 }}. {{ element.title || '未命名题目' }}</span>
|
||||
</div>
|
||||
<div class="question-actions">
|
||||
<el-button link type="danger" :icon="Delete" @click.stop="deleteQuestion(index)"> 删除 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<el-empty v-if="form.content.length === 0" description="请从左侧拖拽组件到此处" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧：属性配置 -->
|
||||
<el-col style="position: sticky; top: 60px" :span="8">
|
||||
<el-card shadow="hover" class="property-panel sticky-card" v-if="activeQuestion">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>属性配置</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form style="position: sticky; top: 60px" label-width="80px">
|
||||
<el-form-item label="题目标题">
|
||||
<el-input v-model="activeQuestion.title" placeholder="请输入题目标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否必填">
|
||||
<el-switch v-model="activeQuestion.required" />
|
||||
</el-form-item>
|
||||
<!-- 单选/多选特有属性 -->
|
||||
<template v-if="activeQuestion.type === 'radio' || activeQuestion.type === 'checkbox'">
|
||||
<el-divider content-position="left">选项设置</el-divider>
|
||||
<div v-for="(opt, idx) in activeQuestion.options" :key="idx" class="option-item">
|
||||
<el-input v-model="opt.label" placeholder="选项内容" style="width: 200px; margin-right: 10px; margin-bottom: 10px" />
|
||||
<el-button link type="danger" :icon="Delete" @click="activeQuestion.options.splice(idx, 1)"> 删除 </el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="activeQuestion.options.push({ label: '新选项' })"> 添加选项 </el-button>
|
||||
</template>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-empty v-else description="请点击选中一道题目" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="footer-actions">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSave">保存草稿</el-button>
|
||||
<el-button type="success" @click="handlePublish">保存并发布</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="QuestionnaireEdit">
|
||||
import draggable from 'vuedraggable';
|
||||
import { Plus, Delete, Rank, Tickets, Document, Edit } from '@element-plus/icons-vue';
|
||||
import { ComponentItem, QuestionComponentItem, QuestionComponentnaireForm } from '@/api/system/Questionnaire/type';
|
||||
import { ElMessage } from 'element-plus'; // 👈 补充引入
|
||||
// ==================== Props & Emit ====================
|
||||
const props = defineProps<{
|
||||
/** 初始问卷数据（编辑时传入） */
|
||||
initialData?: Partial<QuestionComponentnaireForm>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** 取消编辑 */
|
||||
cancel: [];
|
||||
/** 保存草稿 */
|
||||
save: [data: QuestionComponentnaireForm];
|
||||
/** 发布问卷 */
|
||||
publish: [data: QuestionComponentnaireForm];
|
||||
}>();
|
||||
import { markRaw } from 'vue'; // 👈 引入 markRaw
|
||||
// ==================== 响应式数据 ====================
|
||||
const componentList = ref<ComponentItem[]>([
|
||||
{ type: 'radio', label: '单选题', icon: markRaw(Tickets) },
|
||||
{ type: 'checkbox', label: '多选题', icon: markRaw(Tickets) },
|
||||
{ type: 'input', label: '填空题', icon: markRaw(Edit) },
|
||||
{ type: 'textarea', label: '多行文本', icon: markRaw(Document) }
|
||||
]);
|
||||
|
||||
const form = ref<QuestionComponentnaireForm>({
|
||||
id: null,
|
||||
title: '',
|
||||
description: '',
|
||||
content: []
|
||||
});
|
||||
|
||||
const activeIndex = ref<number>(-1);
|
||||
|
||||
// ==================== 计算属性 ====================
|
||||
const activeQuestion = computed<QuestionComponentItem | null>(() => {
|
||||
if (activeIndex.value === -1) return null;
|
||||
return form.value.content[activeIndex.value];
|
||||
});
|
||||
|
||||
// ==================== 辅助方法 ====================
|
||||
function getComponentLabel(type: string): string {
|
||||
const item = componentList.value.find((c) => c.type === type);
|
||||
return item ? item.label : '';
|
||||
}
|
||||
|
||||
// 克隆组件（用于从左侧拖入中间）
|
||||
function cloneComponent(component: ComponentItem): QuestionComponentItem {
|
||||
return {
|
||||
cid: Date.now(), // 生成唯一ID
|
||||
type: component.type,
|
||||
title: 'ces',
|
||||
required: true,
|
||||
options: component.type === 'radio' || component.type === 'checkbox' ? [{ label: '选项1' }, { label: '选项2' }] : []
|
||||
};
|
||||
}
|
||||
|
||||
// 选中题目
|
||||
function selectQuestion(index: number): void {
|
||||
activeIndex.value = index;
|
||||
}
|
||||
|
||||
// 添加题目后的处理
|
||||
function handleAddQuestion(evt: any): void {
|
||||
// 自动选中新添加的题目
|
||||
activeIndex.value = evt.newIndex;
|
||||
}
|
||||
|
||||
// 删除题目
|
||||
function deleteQuestion(index: number): void {
|
||||
form.value.content.splice(index, 1);
|
||||
if (activeIndex.value === index) {
|
||||
activeIndex.value = -1;
|
||||
} else if (activeIndex.value > index) {
|
||||
activeIndex.value--;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 业务方法 ====================
|
||||
/** 表单验证 */
|
||||
function validateForm(): boolean {
|
||||
if (!form.value.title.trim()) {
|
||||
ElMessage.error('请输入问卷标题');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 取消 */
|
||||
function handleCancel(): void {
|
||||
emit('cancel');
|
||||
}
|
||||
|
||||
/** 保存草稿 */
|
||||
function handleSave(): void {
|
||||
console.log(form.value, !validateForm());
|
||||
if (!validateForm()) return;
|
||||
emit('save', { ...form.value });
|
||||
}
|
||||
|
||||
/** 发布问卷 */
|
||||
function handlePublish(): void {
|
||||
if (!validateForm()) return;
|
||||
emit('publish', { ...form.value });
|
||||
}
|
||||
|
||||
/** 初始化数据（编辑时调用） */
|
||||
function init(data: Partial<QuestionComponentnaireForm>): void {
|
||||
form.value = {
|
||||
id: null,
|
||||
title: '',
|
||||
description: '',
|
||||
content: [],
|
||||
...data
|
||||
};
|
||||
|
||||
// 处理content字符串转对象（如果是从数据库取的）
|
||||
if (typeof form.value.content === 'string') {
|
||||
try {
|
||||
form.value.content = JSON.parse(form.value.content);
|
||||
} catch (e) {
|
||||
form.value.content = [];
|
||||
}
|
||||
}
|
||||
|
||||
activeIndex.value = -1;
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
function reset(): void {
|
||||
form.value = {
|
||||
id: null,
|
||||
title: '',
|
||||
description: '',
|
||||
content: []
|
||||
};
|
||||
activeIndex.value = -1;
|
||||
}
|
||||
|
||||
// ==================== 生命周期 ====================
|
||||
onMounted(() => {
|
||||
// 如果传入了初始数据，自动初始化
|
||||
if (props.initialData) {
|
||||
init(props.initialData);
|
||||
}
|
||||
});
|
||||
|
||||
// ==================== 暴露方法 ====================
|
||||
defineExpose({ init, reset });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edit-container {
|
||||
position: relative;
|
||||
|
||||
.component-list {
|
||||
.component-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: #f4f4f5;
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
.el-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-title-area {
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
.title-input {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.question-list {
|
||||
min-height: 200px;
|
||||
.question-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
&.is-active {
|
||||
border-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
}
|
||||
|
||||
.question-handle {
|
||||
cursor: move;
|
||||
padding: 0 10px;
|
||||
color: #909399;
|
||||
}
|
||||
.question-content {
|
||||
flex: 1;
|
||||
.question-type-tag {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvas-panel {
|
||||
}
|
||||
.footer-actions {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 10px 20px;
|
||||
margin-top: 60px;
|
||||
text-align: right;
|
||||
border-top: 1px solid #dcdfe6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
251
src/views/system/Questionnaire/index.vue
Normal file
251
src/views/system/Questionnaire/index.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="问卷标题" prop="title">
|
||||
<el-input v-model="queryParams.title" placeholder="请输入问卷标题" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="参与范围" prop="scope">
|
||||
<el-input v-model="queryParams.scope" placeholder="请输入参与范围 0全体业主 1部分业主" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['questionnaire:questionnaire:add']">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['questionnaire:questionnaire:edit']"
|
||||
>修改</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete()"
|
||||
v-hasPermi="['questionnaire:questionnaire:remove']"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" border :data="questionnaireList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="问卷标题" align="center" prop="title" />
|
||||
<el-table-column label="问卷描述" align="center" prop="description" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_questionnaire_status" :value="scope.row.status"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="参与范围" align="center" prop="scope">
|
||||
<template #default="scope">
|
||||
<dict-tag :options="com_questionnaire_scope" :value="scope.row.scope"></dict-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" fixed="right" width="200">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['questionnaire:questionnaire:edit']"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
icon="Delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['questionnaire:questionnaire:remove']"
|
||||
></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Questionnaire" lang="ts">
|
||||
import { listQuestionnaire, getQuestionnaire, delQuestionnaire, addQuestionnaire, updateQuestionnaire } from '@/api/system/Questionnaire/index';
|
||||
import { QuestionnaireVO, QuestionnaireQuery, QuestionnaireForm } from '@/api/system/Questionnaire/type';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const { com_questionnaire_scope } = toRefs<any>(proxy?.useDict('com_questionnaire_scope'));
|
||||
const { com_questionnaire_status } = toRefs<any>(proxy?.useDict('com_questionnaire_status'));
|
||||
console.log(com_questionnaire_scope);
|
||||
|
||||
const questionnaireList = ref<QuestionnaireVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const questionnaireFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: QuestionnaireForm = {
|
||||
id: undefined,
|
||||
villageId: undefined,
|
||||
title: undefined,
|
||||
description: undefined,
|
||||
content: undefined,
|
||||
status: undefined,
|
||||
scope: undefined,
|
||||
residents: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<QuestionnaireForm, QuestionnaireQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
villageId: undefined,
|
||||
title: undefined,
|
||||
description: undefined,
|
||||
content: undefined,
|
||||
status: undefined,
|
||||
scope: undefined,
|
||||
residents: undefined,
|
||||
params: {}
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '问卷ID不能为空', trigger: 'blur' }],
|
||||
title: [{ required: true, message: '问卷标题不能为空', trigger: 'blur' }],
|
||||
content: [{ required: true, message: '问卷题目结构不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询问卷调查列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listQuestionnaire(queryParams.value);
|
||||
questionnaireList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
questionnaireFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: QuestionnaireVO[]) => {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
router.push({
|
||||
path: '/repair/addQuestionnaire'
|
||||
});
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: QuestionnaireVO) => {
|
||||
router.push({
|
||||
path: '/repair/addQuestionnaire',
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
questionnaireFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateQuestionnaire(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addQuestionnaire(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: QuestionnaireVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除问卷调查编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delQuestionnaire(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'questionnaire/questionnaire/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`questionnaire_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
@@ -97,6 +97,7 @@ import { UploadProps, UploadUserFile } from 'element-plus';
|
||||
import { addRepair, getRepair, updateRepair, uploadRepairImages } from '@/api/system/Repair';
|
||||
import { gettreelistRepairProject } from '@/api/system/RepairProject';
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
import { validator } from '@/utils/Reg';
|
||||
|
||||
const houseStore = useHouseStore();
|
||||
const { treedata } = storeToRefs(houseStore);
|
||||
@@ -125,6 +126,14 @@ const form = ref({
|
||||
const rules = ref({
|
||||
houseId: [{ required: true, message: '请选择关联房屋', trigger: 'blur' }],
|
||||
maintenanceItemId: [{ required: true, message: '请选择维修项目', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||||
{
|
||||
validator: (_, val) => validator(val, 'phone'),
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
problem: [{ required: true, message: '请输入问题描述', trigger: 'blur' }]
|
||||
});
|
||||
const userid = ref(null);
|
||||
|
||||
@@ -94,11 +94,11 @@
|
||||
<div class="title">维修师傅</div>
|
||||
<div class="preivewBodybox flex-1 ml-5">
|
||||
<div class="">
|
||||
<repairUser :userid="userid"></repairUser>
|
||||
<repairUser :userid="form.repairId" @change="handleChange"></repairUser>
|
||||
</div>
|
||||
<div class="actions mt-5">
|
||||
<el-button type="primary">确定派单</el-button>
|
||||
<el-button>返回</el-button>
|
||||
<el-button @click="handleSend" type="primary">确定派单</el-button>
|
||||
<el-button @click="backRouter">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,25 +120,24 @@
|
||||
<template #title>
|
||||
<span>已提交维护信息</span>
|
||||
</template>
|
||||
<template #description> 提交成功 2024/10/29 10:28:28 </template>
|
||||
<template #description> {{ reviewInfo.submitTime ?? '' }} </template>
|
||||
</el-step>
|
||||
<el-step>
|
||||
<template #title>
|
||||
<span>待分配 </span>
|
||||
<span>{{ reviewInfo.allocateStatus === '0' ? '待分配' : '已分配' }} </span>
|
||||
</template>
|
||||
<template #description>等待物业派单中 </template>
|
||||
<template #description>{{ reviewInfo.allocateTime ?? '等待物业派单中' }} </template>
|
||||
</el-step>
|
||||
<el-step>
|
||||
<template #title>
|
||||
<span>维修 </span>
|
||||
<span>{{ reviewInfo.completeStatus === '0' ? '待维修' : '已维修' }} </span>
|
||||
</template>
|
||||
<template #description>维修人员进行维修 </template>
|
||||
<template #description> {{ reviewInfo.completeTime ?? '维修人员进行维修' }}</template>
|
||||
</el-step>
|
||||
<el-step>
|
||||
<template #title>
|
||||
<span>完成维修 </span>
|
||||
</template>
|
||||
<template #description>填写维修记录 </template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
@@ -152,22 +151,22 @@
|
||||
import { ref } from 'vue';
|
||||
import repairUser from '@/components/Holder/repairUser.vue';
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
import { getRepair } from '@/api/system/Repair';
|
||||
import { getCommunitylistAPI } from '@/api/system/community';
|
||||
import { getVillageTree } from '@/api/system/house';
|
||||
import { getRepair, updateRepair } from '@/api/system/Repair';
|
||||
import { convertBuildingToTree, getHousePathById } from '@/utils/house';
|
||||
import { listRepairProject } from '@/api/system/RepairProject';
|
||||
import { listResident } from '@/api/system/resident';
|
||||
import { RepairVO } from '@/api/system/Repair/type';
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
import { listRepairProcess, updateRepairProcess } from '@/api/system/repairProcess';
|
||||
|
||||
const houseStore = useHouseStore();
|
||||
const { treedata } = storeToRefs(houseStore);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const active = ref(6);
|
||||
const activeStop = ref(4);
|
||||
|
||||
const active = ref(0);
|
||||
const activeStop = ref(0);
|
||||
|
||||
interface formType extends RepairVO {
|
||||
maintenanceItem?: string;
|
||||
@@ -196,6 +195,17 @@ const userid = ref();
|
||||
const projectlist = ref([]);
|
||||
// 住户
|
||||
const residentList = ref([]);
|
||||
// 审核流程
|
||||
const reviewInfo = ref({
|
||||
'id': '',
|
||||
'repairId': '',
|
||||
'submitTime': '',
|
||||
'submitStatus': '0',
|
||||
'allocateTime': null,
|
||||
'allocateStatus': '0',
|
||||
'completeTime': null,
|
||||
'completeStatus': '0'
|
||||
});
|
||||
// ! 房屋 ====================================================================================================
|
||||
async function init() {
|
||||
// 项目
|
||||
@@ -217,15 +227,41 @@ async function init() {
|
||||
}
|
||||
}
|
||||
|
||||
const houseinfo = getHousePathById(treedata.value, Number(form.value.houseId), 'label');
|
||||
console.log(treedata.value);
|
||||
|
||||
const houseinfo = getHousePathById(treedata.value, form.value.houseId, 'label');
|
||||
console.log(treedata.value, form.value.houseId, houseinfo);
|
||||
form.value.house = houseinfo.join(' - ');
|
||||
|
||||
const residentinfo = residentList.value.find((item) => item.id === form.value.residentId);
|
||||
form.value.residentName = residentinfo.name;
|
||||
|
||||
form.value.problemImageUrlList = form.value.problemImageUrl.split(',').filter((item) => item);
|
||||
|
||||
// 获取保修审核状态
|
||||
const info = await listRepairProcess({ repairId: form.value.id, pageNum: 1, pageSize: 999999 });
|
||||
if (info && info.rows.length > 0) {
|
||||
reviewInfo.value = info.rows.pop();
|
||||
handleReview();
|
||||
}
|
||||
}
|
||||
|
||||
// 处理审核
|
||||
function handleReview() {
|
||||
if (reviewInfo.value.submitStatus === '1') {
|
||||
// 提交完成
|
||||
active.value = 1;
|
||||
activeStop.value = 1;
|
||||
|
||||
if (reviewInfo.value.allocateStatus === '1') {
|
||||
// 分配完成
|
||||
active.value = 2;
|
||||
activeStop.value = 2;
|
||||
// 维修完成
|
||||
if (reviewInfo.value.completeStatus === '1') {
|
||||
active.value = 4;
|
||||
activeStop.value = 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (route.query.id) {
|
||||
@@ -233,6 +269,34 @@ if (route.query.id) {
|
||||
init();
|
||||
}
|
||||
|
||||
/** 派单 */
|
||||
function handleSend() {
|
||||
form.value.problemStatus = '1';
|
||||
updateRepair(form.value).then(() => {
|
||||
reviewInfo.value.allocateTime = new Date().toLocaleString().replaceAll('/', '-');
|
||||
if (form.value.repairId) {
|
||||
reviewInfo.value.allocateStatus = '1';
|
||||
} else {
|
||||
reviewInfo.value.allocateStatus = '0';
|
||||
}
|
||||
updateRepairProcess(reviewInfo.value).then(() => {
|
||||
backRouter();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** 选择维修人员 */
|
||||
function handleChange(row) {
|
||||
form.value.repairId = row;
|
||||
}
|
||||
|
||||
/** 返回 */
|
||||
function backRouter() {
|
||||
router.push({
|
||||
path: '/repair/repairlist'
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit() {
|
||||
router.push({
|
||||
path: '/repair/addRepair',
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
<el-col :span="24">
|
||||
<el-form-item label="持有人" prop="residentId">
|
||||
<!-- 公共组件 持有人 -->
|
||||
<Holder :userid="form.resident_id" @change="handleChange"></Holder>
|
||||
<Holder :userid="form.residentId" @change="handleChange"></Holder>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
233
src/views/system/test/Questionnaire.vue
Normal file
233
src/views/system/test/Questionnaire.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="问卷标题" prop="title">
|
||||
<el-input v-model="queryParams.title" placeholder="请输入问卷标题" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" plain :icon="Plus" @click="handleAdd">新增问卷</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
|
||||
</el-row>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table v-loading="loading" :data="questionnaireList">
|
||||
<el-table-column label="问卷ID" align="center" prop="id" />
|
||||
<el-table-column label="问卷标题" align="center" prop="title" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
|
||||
{{ scope.row.status === 0 ? '草稿' : scope.row.status === 1 ? '已发布' : '已停用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
|
||||
<el-button link type="primary" :icon="Edit" @click="handleUpdate(scope.row)">设计</el-button>
|
||||
<el-button link type="primary" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 新增/修改对话框 -->
|
||||
<el-dialog :title="title" v-model="open" width="80%" top="5vh" append-to-body destroy-on-close>
|
||||
<questionnaire-edit ref="editRef" @success="getList" />
|
||||
</el-dialog>
|
||||
|
||||
<!-- 详情对话框 -->
|
||||
<el-dialog title="问卷详情" v-model="viewOpen" width="60%" top="5vh" append-to-body>
|
||||
<div v-loading="viewLoading">
|
||||
<div class="detail-header">
|
||||
<h2>{{ viewData.title }}</h2>
|
||||
<p style="color: #666">{{ viewData.description }}</p>
|
||||
</div>
|
||||
<el-divider />
|
||||
<div class="detail-content">
|
||||
<div v-for="(q, index) in viewContent" :key="q.cid" class="question-item">
|
||||
<div class="title">
|
||||
<span style="font-weight: bold">{{ index + 1 }}. {{ q.title }}</span>
|
||||
<span style="color: #f56c6c; margin-left: 5px" v-if="q.required">*</span>
|
||||
</div>
|
||||
<div class="type-tag">
|
||||
<el-tag size="small">{{ getComponentLabel(q.type) }}</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- 单选题/多选题选项展示 -->
|
||||
<div v-if="q.type === 'radio' || q.type === 'checkbox'" class="options">
|
||||
<div v-for="(opt, idx) in q.options" :key="idx" class="option-item">
|
||||
<span>{{ opt.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 填空题/多行文本展示 -->
|
||||
<div v-else class="input-placeholder">
|
||||
<el-input type="textarea" v-model="q.placeholder" placeholder="用户输入区域" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Questionnaire">
|
||||
import { listQuestionnaire, delQuestionnaire, getQuestionnaire } from './api';
|
||||
import QuestionnaireEdit from './QuestionnaireEdit.vue';
|
||||
const { proxy } = getCurrentInstance();
|
||||
const questionnaireList = ref([]);
|
||||
const open = ref(false);
|
||||
const viewOpen = ref(false);
|
||||
const loading = ref(true);
|
||||
const viewLoading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const title = ref('');
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
title: null
|
||||
});
|
||||
const viewData = ref({ title: '', description: '', content: [] });
|
||||
const viewContent = ref([]);
|
||||
|
||||
// 组件库定义（用于获取类型名称）
|
||||
const componentList = [
|
||||
{ type: 'radio', label: '单选题' },
|
||||
{ type: 'checkbox', label: '多选题' },
|
||||
{ type: 'input', label: '填空题' },
|
||||
{ type: 'textarea', label: '多行文本' }
|
||||
];
|
||||
|
||||
// 辅助方法：获取组件名称
|
||||
function getComponentLabel(type) {
|
||||
const item = componentList.find((c) => c.type === type);
|
||||
return item ? item.label : '';
|
||||
}
|
||||
|
||||
/** 查询问卷列表 */
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
const res = await listQuestionnaire(queryParams.value);
|
||||
questionnaireList.value = res.rows;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm('queryFormRef');
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
open.value = true;
|
||||
title.value = '设计问卷';
|
||||
nextTick(() => {
|
||||
proxy.$refs.editRef.reset();
|
||||
});
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
open.value = true;
|
||||
title.value = '修改问卷';
|
||||
nextTick(() => {
|
||||
proxy.$refs.editRef.init(row.id);
|
||||
});
|
||||
}
|
||||
|
||||
/** 查看按钮操作 */
|
||||
async function handleView(row) {
|
||||
viewOpen.value = true;
|
||||
viewLoading.value = true;
|
||||
try {
|
||||
const res = await getQuestionnaire(row.id);
|
||||
viewData.value = res.data;
|
||||
// 解析JSON内容
|
||||
if (typeof viewData.value.content === 'string') {
|
||||
viewContent.value = JSON.parse(viewData.value.content);
|
||||
} else {
|
||||
viewContent.value = viewData.value.content;
|
||||
}
|
||||
} finally {
|
||||
viewLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
async function handleDelete(row) {
|
||||
proxy.$modal
|
||||
.confirm('是否确认删除问卷编号为"' + row.id + '"的项目？')
|
||||
.then(async function () {
|
||||
await delQuestionnaire(row.id);
|
||||
proxy.$modal.msgSuccess('删除成功');
|
||||
getList();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.question-item {
|
||||
margin-bottom: 25px;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
|
||||
.title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.options {
|
||||
.option-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
color: #666;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 8px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
311
src/views/system/test/QuestionnaireEdit.vue
Normal file
311
src/views/system/test/QuestionnaireEdit.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div class="edit-container">
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧：组件库 -->
|
||||
<el-col :span="4">
|
||||
<el-card shadow="hover" class="component-panel">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>组件库</span>
|
||||
</div>
|
||||
</template>
|
||||
<draggable
|
||||
:list="componentList"
|
||||
:group="{ name: 'components', pull: 'clone', put: false }"
|
||||
:clone="cloneComponent"
|
||||
item-key="type"
|
||||
class="component-list"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div class="component-item">
|
||||
<el-icon><component :is="element.icon" /></el-icon>
|
||||
<span>{{ element.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 中间：设计画布 -->
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="canvas-panel">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>设计画布</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="question-title-area">
|
||||
<el-input v-model="form.title" placeholder="请输入问卷标题" class="title-input" />
|
||||
<el-input v-model="form.description" type="textarea" placeholder="请输入问卷描述（选填）" />
|
||||
</div>
|
||||
|
||||
<draggable v-model="form.content" group="components" item-key="cid" class="question-list" @add="handleAddQuestion">
|
||||
<template #item="{ element, index }">
|
||||
<div class="question-item" :class="{ 'is-active': activeIndex === index }" @click="selectQuestion(index)">
|
||||
<div class="question-handle">
|
||||
<el-icon><Rank /></el-icon>
|
||||
</div>
|
||||
<div class="question-content">
|
||||
<span class="question-type-tag">{{ getComponentLabel(element.type) }}</span>
|
||||
<span>Q{{ index + 1 }}. {{ element.title || '未命名题目' }}</span>
|
||||
</div>
|
||||
<div class="question-actions">
|
||||
<el-button link type="danger" :icon="Delete" @click.stop="deleteQuestion(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<el-empty v-if="form.content.length === 0" description="请从左侧拖拽组件到此处" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧：属性配置 -->
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover" class="property-panel" v-if="activeQuestion">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>属性配置</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="题目标题">
|
||||
<el-input v-model="activeQuestion.title" placeholder="请输入题目标题" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否必填">
|
||||
<el-switch v-model="activeQuestion.required" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 单选/多选特有属性 -->
|
||||
<template v-if="activeQuestion.type === 'radio' || activeQuestion.type === 'checkbox'">
|
||||
<el-divider content-position="left">选项设置</el-divider>
|
||||
<div v-for="(opt, idx) in activeQuestion.options" :key="idx" class="option-item">
|
||||
<el-input v-model="opt.label" placeholder="选项内容" style="width: 200px; margin-right: 10px" />
|
||||
<el-button link type="danger" :icon="Delete" @click="activeQuestion.options.splice(idx, 1)">删除</el-button>
|
||||
</div>
|
||||
<el-button type="primary" plain :icon="Plus" @click="activeQuestion.options.push({ label: '新选项' })">添加选项</el-button>
|
||||
</template>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-empty v-else description="请点击选中一道题目" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="footer-actions">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">保存草稿</el-button>
|
||||
<el-button type="success" @click="submitForm(1)">保存并发布</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="QuestionnaireEdit">
|
||||
import draggable from 'vuedraggable';
|
||||
import { Plus, Delete, Rank, Tickets, Document, Edit } from '@element-plus/icons-vue';
|
||||
import { getQuestionnaire, addQuestionnaire, updateQuestionnaire } from './api';
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
// 组件库定义
|
||||
const componentList = ref([
|
||||
{ type: 'radio', label: '单选题', icon: Tickets },
|
||||
{ type: 'checkbox', label: '多选题', icon: Tickets },
|
||||
{ type: 'input', label: '填空题', icon: Edit },
|
||||
{ type: 'textarea', label: '多行文本', icon: Document }
|
||||
]);
|
||||
|
||||
// 表单数据
|
||||
const form = ref({
|
||||
id: null,
|
||||
title: '',
|
||||
description: '',
|
||||
content: [],
|
||||
status: 0
|
||||
});
|
||||
|
||||
const activeIndex = ref(-1);
|
||||
|
||||
// 计算属性：当前选中的题目
|
||||
const activeQuestion = computed(() => {
|
||||
if (activeIndex.value === -1) return null;
|
||||
return form.value.content[activeIndex.value];
|
||||
});
|
||||
|
||||
// 辅助方法：获取组件名称
|
||||
function getComponentLabel(type) {
|
||||
const item = componentList.value.find((c) => c.type === type);
|
||||
return item ? item.label : '';
|
||||
}
|
||||
|
||||
// 克隆组件（用于从左侧拖入中间）
|
||||
function cloneComponent(component) {
|
||||
return {
|
||||
cid: Date.now(), // 生成唯一ID
|
||||
type: component.type,
|
||||
title: '',
|
||||
required: true,
|
||||
options: component.type === 'radio' || component.type === 'checkbox' ? [{ label: '选项1' }, { label: '选项2' }] : []
|
||||
};
|
||||
}
|
||||
|
||||
// 选中题目
|
||||
function selectQuestion(index) {
|
||||
activeIndex.value = index;
|
||||
}
|
||||
|
||||
// 添加题目后的处理
|
||||
function handleAddQuestion(evt) {
|
||||
// 自动选中新添加的题目
|
||||
activeIndex.value = evt.newIndex;
|
||||
}
|
||||
|
||||
// 删除题目
|
||||
function deleteQuestion(index) {
|
||||
form.value.content.splice(index, 1);
|
||||
if (activeIndex.value === index) {
|
||||
activeIndex.value = -1;
|
||||
} else if (activeIndex.value > index) {
|
||||
activeIndex.value--;
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function submitForm(status = 0) {
|
||||
form.value.status = String(status);
|
||||
if (!form.value.title) {
|
||||
proxy.$modal.msgError('请输入问卷标题');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
form.value.content = JSON.stringify(form.value.content);
|
||||
console.log(form.value.content);
|
||||
if (form.value.id) {
|
||||
await updateQuestionnaire(form.value);
|
||||
proxy.$modal.msgSuccess('修改成功');
|
||||
} else {
|
||||
await addQuestionnaire(form.value);
|
||||
proxy.$modal.msgSuccess('新增成功');
|
||||
}
|
||||
emit('success');
|
||||
} catch (e) {
|
||||
// 错误已由拦截器处理
|
||||
}
|
||||
}
|
||||
|
||||
// 取消
|
||||
function cancel() {
|
||||
emit('success');
|
||||
}
|
||||
|
||||
// 初始化（用于修改）
|
||||
function init(id) {
|
||||
getQuestionnaire(id).then((res) => {
|
||||
form.value = res.data;
|
||||
// 注意：数据库取出的JSON字符串需转回对象
|
||||
if (typeof form.value.content === 'string') {
|
||||
form.value.content = JSON.parse(form.value.content);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
id: null,
|
||||
title: '',
|
||||
description: '',
|
||||
content: [],
|
||||
status: 0
|
||||
};
|
||||
activeIndex.value = -1;
|
||||
}
|
||||
|
||||
defineExpose({ init, reset });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.edit-container {
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
padding-bottom: 60px;
|
||||
position: relative;
|
||||
|
||||
.component-list {
|
||||
.component-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: #f4f4f5;
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
.el-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-title-area {
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
.title-input {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.question-list {
|
||||
min-height: 200px;
|
||||
.question-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
&.is-active {
|
||||
border-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
}
|
||||
|
||||
.question-handle {
|
||||
cursor: move;
|
||||
padding: 0 10px;
|
||||
color: #909399;
|
||||
}
|
||||
.question-content {
|
||||
flex: 1;
|
||||
.question-type-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
margin-right: 8px;
|
||||
background: #f0f9eb;
|
||||
color: #67c23a;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 10px 20px;
|
||||
text-align: right;
|
||||
border-top: 1px solid #dcdfe6;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
src/views/system/test/api.ts
Normal file
44
src/views/system/test/api.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 查询问卷列表
|
||||
export function listQuestionnaire(query) {
|
||||
return request({
|
||||
url: '/questionnaire/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
}
|
||||
|
||||
// 查询问卷详细
|
||||
export function getQuestionnaire(id) {
|
||||
return request({
|
||||
url: '/questionnaire/' + id,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
// 新增问卷
|
||||
export function addQuestionnaire(data) {
|
||||
return request({
|
||||
url: '/questionnaire',
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
// 修改问卷
|
||||
export function updateQuestionnaire(data) {
|
||||
return request({
|
||||
url: '/questionnaire',
|
||||
method: 'put',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
// 删除问卷
|
||||
export function delQuestionnaire(id) {
|
||||
return request({
|
||||
url: '/questionnaire/' + id,
|
||||
method: 'delete'
|
||||
});
|
||||
}
|
||||
@@ -1,55 +1,25 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<el-row :gutter="20">
|
||||
<!-- 部门树 -->
|
||||
<el-col :lg="4" :xs="24" style="">
|
||||
<el-card shadow="hover">
|
||||
<el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
|
||||
<el-tree
|
||||
ref="deptTreeRef"
|
||||
class="mt-2"
|
||||
node-key="id"
|
||||
:data="deptOptions"
|
||||
:props="{ label: 'label', children: 'children' } as any"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="20" :xs="24">
|
||||
<div class="w-full p-2">
|
||||
<el-row :gutter="24">
|
||||
<el-col :lg="24" :xs="24">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
|
||||
<el-form-item label="员工账号" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入员工账号" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
<el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable @keyup.enter="handleQuery" />
|
||||
<el-form-item label="员工姓名" prop="nickName">
|
||||
<el-input v-model="queryParams.nickName" placeholder="请输入员工姓名" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phonenumber">
|
||||
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="用户状态" clearable>
|
||||
<el-select v-model="queryParams.status" placeholder="员工状态" clearable>
|
||||
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" style="width: 308px">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
@@ -97,14 +67,20 @@
|
||||
|
||||
<el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
|
||||
<el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
|
||||
<el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
|
||||
<el-table-column v-if="columns[0].visible" key="userId" label="员工编号" align="center" prop="userId" />
|
||||
<el-table-column v-if="columns[1].visible" key="userName" label="员工账号" align="center" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column v-if="columns[2].visible" key="nickName" label="员工姓名" align="center" prop="nickName" :show-overflow-tooltip="true" />
|
||||
<el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" />
|
||||
<el-table-column v-if="columns[5].visible" key="status" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
active-text="启用"
|
||||
active-value="0"
|
||||
inactive-value="1"
|
||||
inactive-text="停用"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -114,7 +90,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
|
||||
<el-table-column align="center" label="操作" fixed="right" width="400">
|
||||
<template #default="scope">
|
||||
<el-tooltip v-if="scope.row.userId !== 1" content="修改" placement="top">
|
||||
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
@@ -145,26 +121,20 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改用户配置对话框 -->
|
||||
<!-- 添加或修改员工配置对话框 -->
|
||||
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="closeDialog">
|
||||
<el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
|
||||
<el-form-item label="员工姓名" prop="nickName">
|
||||
<el-input v-model="form.nickName" placeholder="请输入员工姓名" maxlength="30" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.userId == null || form.userId != useUserStore().userId">
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<el-tree-select
|
||||
v-model="form.deptId"
|
||||
:data="enabledDeptOptions"
|
||||
:props="{ value: 'id', label: 'label', children: 'children' } as any"
|
||||
value-key="id"
|
||||
placeholder="请选择归属部门"
|
||||
check-strictly
|
||||
@change="handleDeptChange"
|
||||
/>
|
||||
<el-form-item label="管理小区" prop="villageIds">
|
||||
<el-select @change="handleChangeVillage" v-model="villags" multiple placeholder="请选择管理小区">
|
||||
<el-option v-for="item in vilageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -182,19 +152,19 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
|
||||
<el-form-item v-if="form.userId == undefined" label="员工账号" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入员工账号" maxlength="30" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
|
||||
<el-form-item v-if="form.userId == undefined" label="员工密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入员工密码" type="password" maxlength="20" show-password />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户性别">
|
||||
<el-form-item label="员工性别">
|
||||
<el-select v-model="form.sex" placeholder="请选择">
|
||||
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
||||
</el-select>
|
||||
@@ -209,19 +179,6 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" v-if="form.userId == null || form.userId != useUserStore().userId">
|
||||
<el-form-item label="岗位">
|
||||
<el-select v-model="form.postIds" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in postOptions"
|
||||
:key="item.postId"
|
||||
:label="item.postName"
|
||||
:value="item.postId"
|
||||
:disabled="item.status == '1'"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="form.userId == null || form.userId != useUserStore().userId">
|
||||
<el-form-item label="角色" prop="roleIds">
|
||||
<el-select v-model="form.roleIds" filterable multiple placeholder="请选择">
|
||||
@@ -252,7 +209,7 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<!-- 员工导入对话框 -->
|
||||
<el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
@@ -272,7 +229,7 @@
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="text-center el-upload__tip">
|
||||
<div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div>
|
||||
<div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的员工数据</div>
|
||||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
|
||||
</div>
|
||||
@@ -291,14 +248,14 @@
|
||||
<script setup name="User" lang="ts">
|
||||
import api from '@/api/system/user';
|
||||
import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
|
||||
import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
|
||||
import { RoleVO } from '@/api/system/role/types';
|
||||
import { PostVO } from '@/api/system/post/types';
|
||||
import { globalHeaders } from '@/utils/request';
|
||||
import { to } from 'await-to-js';
|
||||
import { optionselect } from '@/api/system/post';
|
||||
import { checkPermi } from '@/utils/permission';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getCommunitylistAPI } from '@/api/system/community';
|
||||
import { communitylist_rows_type } from '@/api/system/community/type';
|
||||
|
||||
const router = useRouter();
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
@@ -311,32 +268,32 @@ const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
|
||||
const deptName = ref('');
|
||||
const deptOptions = ref<DeptTreeVO[]>([]);
|
||||
const enabledDeptOptions = ref<DeptTreeVO[]>([]);
|
||||
const vilageList = ref<communitylist_rows_type[]>([]);
|
||||
const initPassword = ref<string>('');
|
||||
const postOptions = ref<PostVO[]>([]);
|
||||
const roleOptions = ref<RoleVO[]>([]);
|
||||
/*** 用户导入参数 */
|
||||
|
||||
/*** 员工导入参数 */
|
||||
const upload = reactive<ImportOption>({
|
||||
// 是否显示弹出层（用户导入）
|
||||
// 是否显示弹出层（员工导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
// 弹出层标题（员工导入）
|
||||
title: '',
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
// 是否更新已经存在的员工数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: globalHeaders(),
|
||||
// 上传的地址
|
||||
url: import.meta.env.VITE_APP_BASE_API + '/system/user/importData'
|
||||
});
|
||||
|
||||
// 列显隐信息
|
||||
const columns = ref<FieldOption[]>([
|
||||
{ key: 0, label: `用户编号`, visible: false, children: [] },
|
||||
{ key: 1, label: `用户名称`, visible: true, children: [] },
|
||||
{ key: 2, label: `用户昵称`, visible: true, children: [] },
|
||||
{ key: 0, label: `员工编号`, visible: false, children: [] },
|
||||
{ key: 1, label: `员工账号`, visible: true, children: [] },
|
||||
{ key: 2, label: `员工姓名`, visible: true, children: [] },
|
||||
{ key: 3, label: `部门`, visible: true, children: [] },
|
||||
{ key: 4, label: `手机号码`, visible: true, children: [] },
|
||||
{ key: 5, label: `状态`, visible: true, children: [] },
|
||||
@@ -382,21 +339,21 @@ const initData: PageData<UserForm, UserQuery> = {
|
||||
},
|
||||
rules: {
|
||||
userName: [
|
||||
{ required: true, message: '用户名称不能为空', trigger: 'blur' },
|
||||
{ required: true, message: '员工账号不能为空', trigger: 'blur' },
|
||||
{
|
||||
min: 2,
|
||||
max: 20,
|
||||
message: '用户名称长度必须介于 2 和 20 之间',
|
||||
message: '员工账号长度必须介于 2 和 20 之间',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
|
||||
nickName: [{ required: true, message: '员工姓名不能为空', trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, message: '用户密码不能为空', trigger: 'blur' },
|
||||
{ required: true, message: '员工密码不能为空', trigger: 'blur' },
|
||||
{
|
||||
min: 5,
|
||||
max: 20,
|
||||
message: '用户密码长度必须介于 5 和 20 之间',
|
||||
message: '员工密码长度必须介于 5 和 20 之间',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{ pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\ |', trigger: 'blur' }
|
||||
@@ -415,29 +372,15 @@ const initData: PageData<UserForm, UserQuery> = {
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
|
||||
roleIds: [{ required: true, message: '员工角色不能为空', trigger: 'blur' }]
|
||||
}
|
||||
};
|
||||
const villags = ref([]);
|
||||
const data = reactive<PageData<UserForm, UserQuery>>(initData);
|
||||
|
||||
const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
|
||||
|
||||
/** 通过条件过滤节点 */
|
||||
const filterNode = (value: string, data: any) => {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
};
|
||||
/** 根据名称筛选部门树 */
|
||||
watchEffect(
|
||||
() => {
|
||||
deptTreeRef.value?.filter(deptName.value);
|
||||
},
|
||||
{
|
||||
flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
|
||||
}
|
||||
);
|
||||
|
||||
/** 查询用户列表 */
|
||||
/** 查询员工列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await api.listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
|
||||
@@ -446,32 +389,14 @@ const getList = async () => {
|
||||
total.value = res.total;
|
||||
};
|
||||
|
||||
/** 查询部门下拉树结构 */
|
||||
const getDeptTree = async () => {
|
||||
const res = await api.deptTreeSelect();
|
||||
deptOptions.value = res.data;
|
||||
enabledDeptOptions.value = filterDisabledDept(res.data);
|
||||
/** 查询小区列表 */
|
||||
const getViliageList = async () => {
|
||||
const res = await getCommunitylistAPI();
|
||||
vilageList.value = res.rows;
|
||||
};
|
||||
|
||||
/** 过滤禁用的部门 */
|
||||
const filterDisabledDept = (deptList: DeptTreeVO[]) => {
|
||||
return deptList.filter((dept) => {
|
||||
if (dept.disabled) {
|
||||
return false;
|
||||
}
|
||||
if (dept.children && dept.children.length) {
|
||||
dept.children = filterDisabledDept(dept.children);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
/** 节点单击事件 */
|
||||
const handleNodeClick = (data: DeptVO) => {
|
||||
queryParams.value.deptId = data.id;
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
function handleChangeVillage(val: string[] | number[]) {
|
||||
form.value.villageIds = val.join(',');
|
||||
}
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
@@ -490,7 +415,7 @@ const resetQuery = () => {
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: UserVO) => {
|
||||
const userIds = row?.userId || ids.value;
|
||||
const [err] = await to(proxy?.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？') as any);
|
||||
const [err] = await to(proxy?.$modal.confirm('是否确认删除员工编号为"' + userIds + '"的数据项？') as any);
|
||||
if (!err) {
|
||||
await api.delUser(userIds);
|
||||
await getList();
|
||||
@@ -498,11 +423,11 @@ const handleDelete = async (row?: UserVO) => {
|
||||
}
|
||||
};
|
||||
|
||||
/** 用户状态修改 */
|
||||
/** 员工状态修改 */
|
||||
const handleStatusChange = async (row: UserVO) => {
|
||||
const text = row.status === '0' ? '启用' : '停用';
|
||||
try {
|
||||
await proxy?.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?');
|
||||
await proxy?.$modal.confirm('确认要"' + text + '""' + row.userName + '"员工吗?');
|
||||
await api.changeUserStatus(row.userId, row.status);
|
||||
proxy?.$modal.msgSuccess(text + '成功');
|
||||
} catch (err) {
|
||||
@@ -523,7 +448,7 @@ const handleResetPwd = async (row: UserVO) => {
|
||||
cancelButtonText: '取消',
|
||||
closeOnClickModal: false,
|
||||
inputPattern: /^.{5,20}$/,
|
||||
inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
|
||||
inputErrorMessage: '员工密码长度必须介于 5 和 20 之间',
|
||||
inputValidator: (value) => {
|
||||
if (/<|>|"|'|\||\\/.test(value)) {
|
||||
return '不能包含非法字符：< > " \' \\ |';
|
||||
@@ -546,7 +471,7 @@ const handleSelectionChange = (selection: UserVO[]) => {
|
||||
|
||||
/** 导入按钮操作 */
|
||||
const handleImport = () => {
|
||||
upload.title = '用户导入';
|
||||
upload.title = '员工导入';
|
||||
upload.open = true;
|
||||
};
|
||||
/** 导出按钮操作 */
|
||||
@@ -600,7 +525,7 @@ const handleAdd = async () => {
|
||||
reset();
|
||||
const { data } = await api.getUser();
|
||||
dialog.visible = true;
|
||||
dialog.title = '新增用户';
|
||||
dialog.title = '新增员工';
|
||||
postOptions.value = data.posts;
|
||||
roleOptions.value = data.roles;
|
||||
form.value.password = initPassword.value.toString();
|
||||
@@ -612,12 +537,10 @@ const handleUpdate = async (row?: UserForm) => {
|
||||
const userId = row?.userId || ids.value[0];
|
||||
const { data } = await api.getUser(userId);
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改用户';
|
||||
dialog.title = '修改员工';
|
||||
Object.assign(form.value, data.user);
|
||||
postOptions.value = data.posts;
|
||||
roleOptions.value = Array.from(
|
||||
new Map([...data.roles, ...data.user.roles].map(role => [role.roleId, role])).values()
|
||||
);
|
||||
roleOptions.value = Array.from(new Map([...data.roles, ...data.user.roles].map((role) => [role.roleId, role])).values());
|
||||
form.value.postIds = data.postIds;
|
||||
form.value.roleIds = data.roleIds;
|
||||
form.value.password = '';
|
||||
@@ -646,7 +569,7 @@ const submitForm = () => {
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭用户弹窗
|
||||
* 关闭员工弹窗
|
||||
*/
|
||||
const closeDialog = () => {
|
||||
dialog.visible = false;
|
||||
@@ -664,7 +587,7 @@ const resetForm = () => {
|
||||
form.value.status = '1';
|
||||
};
|
||||
onMounted(() => {
|
||||
getDeptTree(); // 初始化部门数据
|
||||
getViliageList(); // 初始化部门数据
|
||||
getList(); // 初始化列表数据
|
||||
proxy?.getConfigKey('sys.user.initPassword').then((response) => {
|
||||
initPassword.value = response.data;
|
||||
@@ -672,8 +595,6 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
async function handleDeptChange(value: number | string) {
|
||||
const response = await optionselect(value);
|
||||
postOptions.value = response.data;
|
||||
form.value.postIds = [];
|
||||
console.log(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -250,6 +250,9 @@ const echartTypeChange = (type: number) => {
|
||||
currentEchartType.value = type;
|
||||
};
|
||||
// ! 切换echarts
|
||||
|
||||
// 获取小区
|
||||
function getViliage() {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Reference in New Issue
Block a user