199 lines
6.8 KiB
Vue
199 lines
6.8 KiB
Vue
<template>
|
||
<div class="flex">
|
||
<el-card shadow="always" :body-style="{ padding: '10px' }">
|
||
<div
|
||
class="flex text-14px cursor-pointer"
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
style="height: 48px; line-height: 48px; width: 240px"
|
||
@click="handleChoose(item.value)"
|
||
:class="{ actived: item.value == msgType }"
|
||
>
|
||
<div class="font-bold pl-20px">{{ item.name }}</div>
|
||
</div>
|
||
</el-card>
|
||
<el-card shadow="always" :body-style="{ padding: '10px' }" class="ml-20px flex-1">
|
||
<el-form :model="form" ref="msgForm" :rules="rules" label-width="100px" :inline="false">
|
||
<el-form-item prop="isEnable">
|
||
<template #label>
|
||
<div class="flex justify-center" style="align-items: center">
|
||
<Tooltip message="是否发送对应消息通知" />
|
||
<span>是否启用</span>
|
||
</div>
|
||
</template>
|
||
<el-radio-group v-model="form.isEnable">
|
||
<el-radio :label="1"> 启用 </el-radio>
|
||
<el-radio :label="0"> 禁用 </el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<div v-if="form.isEnable">
|
||
<el-form-item label="微信通知" prop="wxMsg">
|
||
<el-radio-group v-model="form.wxMsg">
|
||
<el-radio :label="1"> 启用 </el-radio>
|
||
<el-radio :label="0"> 禁用 </el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="发送对象" prop="msgTo">
|
||
<div>
|
||
<el-checkbox-group v-model="form.msgTo">
|
||
<el-checkbox :label="1"> 创建人 </el-checkbox>
|
||
<el-checkbox :label="2"> 跟进人 </el-checkbox>
|
||
<el-checkbox :label="3"> 指定用户 </el-checkbox>
|
||
<el-checkbox v-if="form.wxMsg" :label="4"> 微信群 </el-checkbox>
|
||
</el-checkbox-group>
|
||
<div class="flex">
|
||
<div v-if="form.msgTo.includes(3)" class="flex mr-20px" style="align-items: center">
|
||
<div class="mr-15px" style="width: 80px">指定用户：</div>
|
||
<el-select
|
||
v-model="form.msgToUsers"
|
||
placeholder="选择用户，可多选"
|
||
filterable
|
||
multiple
|
||
style="width: 300px"
|
||
>
|
||
<el-option
|
||
v-for="item in userOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div v-if="form.msgTo.includes(4)" class="flex mr-20px" style="align-items: center">
|
||
<div
|
||
class="mr-15px flex"
|
||
style="align-items: center; width: 180px; text-align: right"
|
||
>
|
||
<Tooltip message="已添加微信机器人的群" />
|
||
<span>微信群名称：</span>
|
||
</div>
|
||
<el-input v-model="form.wxGroup" placeholder="请输入群名称" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="发送时间" prop="sendTime">
|
||
<div>
|
||
<el-radio-group v-model="form.sendTime">
|
||
<el-radio :label="1"> 立即发送 </el-radio>
|
||
<el-radio :label="2"> 指定时间 </el-radio>
|
||
</el-radio-group>
|
||
<div v-if="form.sendTime == 2">
|
||
<span class="mr-15px">指定时间：</span>
|
||
<el-radio-group v-model="form.msgTimeType" @change="form.days = []">
|
||
<el-radio :label="1"> 每日 </el-radio>
|
||
<el-radio :label="2"> 次日 </el-radio>
|
||
<el-radio :label="3"> 每周 </el-radio>
|
||
<el-radio :label="4"> 每月 </el-radio>
|
||
</el-radio-group>
|
||
<div v-if="[3, 4].includes(form.msgTimeType)" class="mt-15px">
|
||
<span class="mr-15px">日期：</span>
|
||
<el-select v-model="form.days" placeholder="选择日期，可多选" multiple filterable>
|
||
<el-option
|
||
v-for="item in dayOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="mt-15px">
|
||
<span class="mr-15px">具体时间：</span>
|
||
<el-time-picker
|
||
v-model="form.msgTime"
|
||
placeholder="具体时间"
|
||
:clearable="false"
|
||
format="HH:mm"
|
||
value-format="HH:mm"
|
||
class="ml-20px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="消息模板" prop="msgTemplate">
|
||
<el-input
|
||
v-model="form.msgTemplate"
|
||
type="textarea"
|
||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||
placeholder="请输入模板内容"
|
||
/>
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">保存</el-button>
|
||
<el-button>重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const list = [
|
||
{ name: '成交通知', value: 'CJTZ' },
|
||
{ name: '释放预警通知', value: 'SFYJTZ' },
|
||
{ name: '待跟进通知', value: 'DGJTZ' },
|
||
{ name: '撞单通知', value: 'ZDTZ' },
|
||
{ name: '待审核通知', value: 'DSHTZ' },
|
||
{ name: '审核结果通知', value: 'SHJGTZ' }
|
||
]
|
||
|
||
const msgType = ref('CJTZ')
|
||
|
||
const form = ref({
|
||
isEnable: true,
|
||
wxMsg: false,
|
||
msgTo: [],
|
||
msgToUsers: [],
|
||
wxGroup: '',
|
||
sendTime: 1,
|
||
msgTimeType: 1,
|
||
msgTime: '00:00',
|
||
|
||
days: []
|
||
})
|
||
const rules = ref({})
|
||
const userOptions = ref([
|
||
{ label: '张张', value: '1' },
|
||
{ label: '李李', value: '2' },
|
||
{ label: '王王', value: '3' },
|
||
{ label: '赵赵', value: '4' }
|
||
])
|
||
|
||
const dayOptions = computed(() => {
|
||
const weekList = [
|
||
{ label: '周一', value: 1 },
|
||
{ label: '周二', value: 2 },
|
||
{ label: '周三', value: 3 },
|
||
{ label: '周四', value: 4 },
|
||
{ label: '周五', value: 5 },
|
||
{ label: '周六', value: 6 },
|
||
{ label: '周日', value: 7 }
|
||
]
|
||
let monthList = []
|
||
for (let i = 0; i < 28; i++) {
|
||
monthList.push({ label: `${i + 1}日`, value: i + 1 })
|
||
}
|
||
let obj = {
|
||
3: weekList,
|
||
4: monthList
|
||
}
|
||
return obj[form.value.msgTimeType] || []
|
||
})
|
||
|
||
function handleChoose(type) {
|
||
msgType.value = type
|
||
}
|
||
|
||
function onSubmit() {
|
||
console.log('保存成功')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.actived {
|
||
background-color: #f0f7ff;
|
||
}
|
||
</style>
|