<template>
<!-- 月度考核 -->
<div class="publicContainer">
<div class="searchBoxs">
<n-space class="nspace ">
<div class="name">问卷主题：</div>
<n-input v-model:value="realName" style="width: 200px" clearable> </n-input>
<div class="name">调查状态：</div>
<n-select v-model:value="searchVal1" style="width: 200px" :options="clzOptions" clearable> </n-select>
<n-button type="success" @click="getPersonList(1, 12, startTime, endTime)">
<template #icon>
<n-icon>
<Search />
</n-icon>
</template>
搜索
</n-button>
<n-button type="primary" @click="handleClick('add')">
<template #icon>
<n-icon><Add /> </n-icon>
</template>
新增
</n-button>
</n-space>
</div>
<!-- 表格 -->
<div class="tableBox">
<n-data-table
:bordered="false"
:max-height="700"
striped
:columns="columns"
:data="tableData"
:loading="tableLoading"
:remote="true"
:pagination="pagination"
>
</n-data-table>
</div>
<!-- 问卷调查弹窗 -->
<n-modal
title="问卷调查弹窗"
:mask-closable="false"
preset="dialog"
:show-icon="false"
:style="{ width: '900px' }"
v-model:show="showModal"
>
<div class="kaopingTable">
<n-form
:label-width="95"
:model="addFormValue"
:rules="addFormRules"
size="medium"
label-placement="left"
ref="addFormRef"
>
<n-form-item label="问卷主题：" path="topicName">
<n-input
v-model:value="addFormValue.topicName"
clearable
placeholder="请输入问卷主题"
/>
</n-form-item>
<n-form-item label="年份选择：" path="year">
<n-date-picker
style="width: 100%"
placeholder="请选择年份"
v-model:value="beginDate"
type="year"
clearable
/>
</n-form-item>
<n-form-item label="问卷状态：" path="ifStart">
<n-radio-group
v-model:value="addFormValue.ifStart"
name="radiobuttongroup2"
size="medium"
>
<n-radio
v-for="song in TabsList"
:key="song.value"
:value="song.value"
>
{{ song.label }}
</n-radio>
</n-radio-group>
</n-form-item>
<n-form-item label="问卷介绍：" path="introduce">
<n-input
v-model:value="addFormValue.introduce"
clearable
placeholder="请输入问卷介绍"
/>
</n-form-item>
</n-form>
<n-divider />
<n-button type="primary" @click="handleClick('add1')">
<template #icon>
<n-icon><Add /> </n-icon>
</template>
新增标题内容
</n-button>
<n-data-table
:bordered="false"
:max-height="700"
striped
:columns="columnsdc"
:data="tableDatadc"
:loading="tableLoading"
:remote="true"
:pagination="pagination1"
>
</n-data-table>
</div>
<template #action>
<n-space style="margin-right: 350px">
<n-button type="primary" @click="updataMonthInfo()">保存</n-button>
<n-button @click="() => (JXShow = false)">取消</n-button>
</n-space>
</template>
</n-modal>
<!-- 新增问题答案 -->
<n-modal
:title="title2"
:mask-closable="false"
preset="dialog"
:show-icon="false"
:style="{ width: '700px' }"
v-model:show="showModal2"
>
<div class="kaopingTable">
<n-form
:label-width="95"
:model="addFormValue2"
:rules="addFormRules2"
size="medium"
label-placement="left"
ref="addFormRef"
>
<n-form-item label="试题名称：" path="problemName">
<n-input
v-model:value="addFormValue2.problemName"
clearable
placeholder="请输入试题名称"
/>
</n-form-item>
<n-form-item label="满分：" path="fullScore">
<n-input
v-model:value="addFormValue2.fullScore"
clearable
placeholder="请输入满分"
/>
</n-form-item>
<n-form-item label="题型:" path="problemType">
<n-select
v-model:value="addFormValue2.problemType"
:options="typeList"
placeholder="请选择题型"
/>
</n-form-item>
</n-form>
<n-divider />
<n-button type="primary" @click="handleClick('datatablesbtn')">
<template #icon>
<n-icon><Add /> </n-icon>
</template>
新增问题答案
</n-button>
<div class="details">
<n-data-table
:style="{ maxheight: '300px', overflow: 'auto' }"
class="datatables"
:columns="columns2"
:data="data2list"
/>
</div>
<div class="detailsbutton">
<n-button type="info" @click="sureAnswer">
确定
</n-button>
</div>
</div>
</n-modal>
</div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted, ref, h } from 'vue';
import yearcalendar from './components/yearcalendar.vue';
import { getnormlogpersonal, getMonthResaultInfo, getMonthResaultUpdata, getAllStationList, getnormlogScore } from '@/services';
import peopleDetailInfo from './components/peopleDetailInfo.vue';
import { Search, Add, Book } from '@vicons/ionicons5';
import { NInputNumber, NInput,NButton } from 'naive-ui';
import bus from '@/utils/util';
import { formatDate } from '@/utils/util';
export default {
name: 'monthjxPage',
components: {
Search,
Add,
yearcalendar,
Book,
peopleDetailInfo,
},
setup() {
const data2 = reactive({
data2list: [
{
optionName: "",
score: "",
problemId: "",
},
],
});
const statusList = ref([
{ value: 'not_start', label: '未开始' },
{ value: 'executing', label: '执行中' },
{ value: 'ended', label: '已结束' },
]);
const allData = reactive({
title2:'新增问题答案',
actionColumn2: [
{ btnType: 'primary', type: 'edit2', default: '修改' },
{ btnType: 'error', type: 'delete2', default: '删除' },
],
columnsdc:[
{ title: '问题名称', align: 'center', key: 'problemName' },
{
title: '问题类型',
key: 'problemType',
align: "center",
render(row) {
return row.problemType == 'radio' ? '单选' : row.problemType == 'checkbox' ? '多选' : '简答题';
},
},
{
title: "操作",
key: "",
width: "150",
align: "center",
render(row,index2) {
const btn = allData.actionColumn2.map((item, index) => {
return h(
NButton,
{
text: true,
size: item.size,
style: {
margin: '10px',
},
type: item.btnType,
onClick: () => handleClick(item.type, row,index2),
},
{ default: () => item.default }
);
});
return btn;
},
},
],
tableDatadc:[],
columns2: [
{
title: "选项名称",
key: "optionName",
align: 'center',
render(row, index) {
return h(NInput, {
value: row.optionName,
onUpdateValue(v) {
data2.data2list[index].optionName = v;
},
});
},
},
{
title: "分数",
key: "score",
align: 'center',
render(row, index) {
return h(NInput, {
value: row.score,
onUpdateValue(v) {
data2.data2list[index].score = v;
},
});
},
},
{
title: "操作",
key: "",
width: "100",
align: "center",
render(row, index) {
return h(
NButton,
{
text: true,
style: {
margin: "10px",
},
onClick: () => handleClick("del3", row, index),
},
{ default: () => "删除" }
);
},
},
],
beginDate: Date.now(),
TabsValue:1,
typeList :ref([
{ value: 'radio', label: '单选' },
{ value: 'checkbox', label: '多选' },
{ value: 'answers', label: '简答题' },
]),
TabsList: [
{
value: 1,
label: "启用",
},
{
value:0,
label: "未启用",
},
],
addFormValue: {
topicName: null,
year: null,
TabsValue:1,
ifStart:1,
introduce: null,
},
addFormValue2: {
problemName: null,
fullScore: '100',
problemType: null,
},
addFormRules2: {
problemName: [
{
required: true,
trigger: ["blur"],
message: "请输入试题名称",
},
],
fullScore: [
{
required: true,
trigger: ["blur"],
message: "请输入满分",
},
],
problemType: [
{
required: true,
trigger: ["blur",'change'],
message: "请选择题型",
},
],
},
addFormRules: {
topicName: [
{
required: true,
trigger: ["blur"],
message: "请输入问卷主题",
},
],
year: [
{
required: true,
trigger: ["blur","change"],
message: "请选择年份",
},
],
ifStart: [
{
required: true,
trigger: ["blur","change"],
message: "请问卷状态",
},
],
},
organ: [
{ label: '启用', value: 1 },
{ label: '未启用', value: 0 },
],
showModal: false,
showModal2: false,
year: new Date().getFullYear(),
month: new Date().getMonth(),
actionColumn: [
{ btnType: 'primary', type: 'edit', default: '修改' },
{ btnType: 'error', type: 'delete', default: '满意度统计' },
],
columns: [
{ title: '调查问卷主题', align: 'center', key: 'performType' },
{
title: '调查状态',
key: 'adjustmentStatus',
render(row) {
return row.adjustmentStatus == 'not_start' ? '未开始' : row.adjustmentStatus == 'executing' ? '执行中' : '已结束';
},
},
{
title: '问卷状态',
key: 'ifStart',
render(row) {
return row.ifStart == 1 ? '启用' : '未启用';
},
},
{ title: '调查年份', align: 'center', key: 'year'},
{ title: '创建人', align: 'center', key: 'createBy' },
{ title: '创建时间', align: 'center', key: 'createTime' },
{
title: '操作',
key: 'actions',
width: '240',
align: 'center',
render(row) {
const btn = allData.actionColumn.map((item, index) => {
return h(
NButton,
{
text: true,
size: item.size,
style: {
margin: '10px',
},
type: item.btnType,
onClick: () => handleClick(item.type, row),
},
{ default: () => item.default }
);
});
return btn;
},
},
],
searchVal1: null,
searchVal2: null,
realName: null,
tableLoading: false,
tableLoadingJX: true, //表格数据加载状态，接入后端后修改为true
tableData: [
{
id: "1789850743905370113",
delFlag: "0",
createBy: "",
createTime: "2024-08-19 15:50:13",
updateBy: "",
updateTime: "2024-08-19 16:40:16",
remark: "",
status: "",
topicName: "海绵城市建设满意度问卷调查2023",
adjustmentStatus: "ended",
startTime: "",
endTime: "",
introduce: "尊敬的女士/先生:\\n您好!感谢您抽出宝贵时间参与我们的问卷调查，本次问卷调查采用不记名方式，问卷数据仅用于满意度统计分析，请根据您的真实感受填写，感谢您的支持与配合!",
fillTimes: "163",
problemConfigList: [],
year: "2023",
ifStart: 1
}
],
tableListData: [],
total: null,
page: 1,
});
// if (dialogTitleAns.value == '新增问题答案') {
// formData.value.problemConfigList.push(formDataAns.value);
// } else {
// }
const getTableData = async () => {
// allData.tableLoading = true;
// let pramas = `?name=${allData.searchValue1}¤t=${paginationReactive.page}&size=${paginationReactive.pageSize}`;
// let res = await dutymanagemainList(pramas);
// if (res && res.code == 200) {
// allData.data = res.data.records;
// paginationReactive.pageCount = res.data.pages;
// paginationReactive.itemCount = res.data.total;
// }
// allData.tableLoading = false;
};
//分页
const paginationReactive = reactive({
page: 1,
pageSize: 10,
showSizePicker: true,
pageSizes: [10, 15, 20, 50],
showQuickJumper: true,
pageCount: 0,
itemCount: 0,
prefix: () => {
return "共 " + paginationReactive.itemCount + " 项";
},
onChange: (page) => {
paginationReactive.page = page;
getTableData();
},
onPageSizeChange: (pageSize) => {
paginationReactive.pageSize = pageSize;
paginationReactive.page = 1;
getTableData();
},
});
onMounted(() => {
});
// 问题答案编辑完成
const sureAnswer= async (type, row,index) => {
console.log(allData.addFormValue2,'addFormValue2')
allData.addFormValue2.problemOptionList = data2.data2list
if(allData.title2== '新增问题答案'){
allData.tableDatadc.push(allData.addFormValue2)
}
allData.showModal2 = false;
}
// 点击事件
const handleClick = async (type, row,index) => {
console.log(type, row,'type, rowtype, row');
switch (type) {
case 'shu':
gettotalScore()
break;
case "datatablesbtn":
let a = {
optionName: "",
score: "",
problemId: "",
};
data2.data2list.push(a);
break;
case 'search':
paginationReactive.page = 1;
getTableData();
break;
break;
case 'add':
allData.addFormValue = {
topicName: null,
year: null,
TabsValue:1,
ifStart:1,
introduce: null,
}
allData.tableDatadc = [];
allData.showModal = true;
break;
case 'add1':
allData.title2 = '新增问题答案'
allData.showModal2 = true;
allData.addFormValue2 = {
problemName: null,
fullScore: '100',
problemType: null,
};
data2.data2list =[
{
optionName: "",
score: "",
problemId: "",
}
]
break;
//删除标题内容
case "delete2":
allData.tableDatadc.splice(index, 1);
break;
// 新增标题内容修改
case 'edit2':
allData.title2 = '修改问题答案'
allData.showModal2 = true;
allData.addFormRules2={
problemName:row.problemName,
fullScore:row.fullScore,
problemType:row.problemType,
}
if (row.problemOptionList.length > 0) {
data2.data2list = [];
row.problemOptionList.map((item, index) => {
let obj = {};
obj.optionName = item.optionName;
obj.score = item.score;
obj.problemId = item.problemId;
data2.data2list.push(obj);
});
}
break;
case "del3":
data2.data2list.splice(index, 1);
break;
case 'edit':
allData.kaopingShow = true;
getKaopingData();
break;
case 'delete':
$dialog.info({
title: '提示',
content: `确定删除该数据吗？`,
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
let ids = [row.id];
dataDel(ids);
},
});
break;
}
};
onBeforeMount(() => {
bus.off('getCurrentData');
});
return {
...toRefs(allData),
...toRefs(data2),
handleClick,
pagination: paginationReactive,
sureAnswer,
};
},
};
</script>
<style lang="less" scoped>
.publicContainer {
position: relative;
height: 100%;
padding: 10px;
.searchBoxs {
height: 50px;
margin: 10px;
.name {
height: 34px;
line-height: 34px;
}
.nspace{
align-items: center;
}
}
}
.detailsbutton{
margin-top: 30px;
display: flex;
justify-content: flex-end;
}
</style>
