131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import { reactive, computed, ref } from 'vue'
|
|||
|
|
import { NModal, NForm, NFormItem, NInput, NRadioGroup, NSpace, NRadio } from 'naive-ui'
|
|||
|
|
import { Delete } from '@icon-park/vue-next'
|
|||
|
|
const emit = defineEmits(['close', 'submit'])
|
|||
|
|
|
|||
|
|
const isShow = ref(true)
|
|||
|
|
const model = reactive({
|
|||
|
|
mode: 0,
|
|||
|
|
anonymous: 0,
|
|||
|
|
title: '',
|
|||
|
|
options: [{ value: '' }, { value: '' }, { value: '' }]
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const onMaskClick = () => {
|
|||
|
|
emit('close')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const onSubmit = () => {
|
|||
|
|
let data = {
|
|||
|
|
title: model.title,
|
|||
|
|
mode: model.mode,
|
|||
|
|
anonymous: model.anonymous,
|
|||
|
|
options: model.options.map((item) => item.value)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
emit('submit', data)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const addOption = () => {
|
|||
|
|
model.options.push({ value: '' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const delOption = (index: number) => {
|
|||
|
|
model.options.length > 2 && model.options.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 是否可提交
|
|||
|
|
const isCanSubmit = computed(() => {
|
|||
|
|
return (
|
|||
|
|
model.title.trim().length == 0 || model.options.some((item) => item.value.trim().length === 0)
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<n-modal
|
|||
|
|
v-model:show="isShow"
|
|||
|
|
preset="card"
|
|||
|
|
title="发起投票"
|
|||
|
|
class="modal-radius"
|
|||
|
|
:style="{ maxWidth: '450px' }"
|
|||
|
|
:on-after-leave="onMaskClick"
|
|||
|
|
>
|
|||
|
|
<n-form>
|
|||
|
|
<n-form-item label="投票方式" :required="true">
|
|||
|
|
<n-radio-group v-model:value="model.anonymous">
|
|||
|
|
<n-space>
|
|||
|
|
<n-radio :value="0"> 公开投票 </n-radio>
|
|||
|
|
<n-radio :value="1"> 匿名投票 </n-radio>
|
|||
|
|
</n-space>
|
|||
|
|
</n-radio-group>
|
|||
|
|
</n-form-item>
|
|||
|
|
|
|||
|
|
<n-form-item label="选择方式" :required="true">
|
|||
|
|
<n-radio-group v-model:value="model.mode">
|
|||
|
|
<n-space>
|
|||
|
|
<n-radio :value="0"> 单选 </n-radio>
|
|||
|
|
<n-radio :value="1"> 多选 </n-radio>
|
|||
|
|
</n-space>
|
|||
|
|
</n-radio-group>
|
|||
|
|
</n-form-item>
|
|||
|
|
|
|||
|
|
<n-form-item label="投票主题" :required="true">
|
|||
|
|
<n-input placeholder="请输入投票主题，最多50字" v-model:value="model.title" />
|
|||
|
|
</n-form-item>
|
|||
|
|
|
|||
|
|
<n-form-item label="投票选项" :required="true">
|
|||
|
|
<div class="options">
|
|||
|
|
<div v-for="(option, i) in model.options" :key="i" class="option">
|
|||
|
|
<n-input placeholder=" 请输入选项内容" v-model:value="option.value">
|
|||
|
|
<template #prefix>
|
|||
|
|
<span style="color: #ccc"> {{ String.fromCharCode(65 + i) }}. </span>
|
|||
|
|
</template>
|
|||
|
|
</n-input>
|
|||
|
|
|
|||
|
|
<div class="btn flex-center pointer" @click="delOption(i)">
|
|||
|
|
<n-icon size="16" :component="Delete" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<n-button text type="primary" @click="addOption" v-if="model.options.length < 6">
|
|||
|
|
添加选项
|
|||
|
|
</n-button>
|
|||
|
|
</div>
|
|||
|
|
</n-form-item>
|
|||
|
|
</n-form>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<div style="width: 100%; text-align: right">
|
|||
|
|
<n-button type="tertiary" @click="isShow = false"> 取消 </n-button>
|
|||
|
|
<n-button type="primary" @click="onSubmit" class="mt-l15" :disabled="isCanSubmit">
|
|||
|
|
发起投票
|
|||
|
|
</n-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</n-modal>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.options {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.option {
|
|||
|
|
margin: 8px 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
margin-left: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|