preiteer在保存时不格式化文件
Vscode回车到下一行的时候,不保留缩进
加上这一句即可
"editor.autoIndent": "keep",
<template><div class="strategy-edit" v-loading="loading"><el-formclass="strategy-edit":model="form":rules="rules"label-width="150px"ref="formRef":disabled="isDisable"><el-form-item prop="strategyName" label="策略名称:"><el-inputmaxlength="30"placeholder="请输入咨询策略名称"show-word-limitv-model="form.strategyName"@blur="form.strategyName = form.strategyName.trim()"/></el-form-item><el-form-item label="咨询通道:" prop="consultRoute.type"><el-radio-group:disabled="!!strategyId"v-model="form.consultRoute.type"@change="onConsultChannelChange"><el-radio:disabled="[CONSULT_CHANNEL.WECHAT_SINGLE, CONSULT_CHANNEL.WECHAT_GROUP].includes(key) ||(key === CONSULT_CHANNEL.GENERIC ? map[key] >= 5 : map[key] >= 1)"v-for="(val, key) in CONSULT_CHANNEL_TEXT":key="key":label="key">{{ val }}</el-radio></el-radio-group></el-form-item><div class="indent-form-item" v-if="form.consultRoute.type === CONSULT_CHANNEL.GENERIC"><el-form-item label="命名:" label-width="100px"><el-inputmaxlength="6"placeholder="请输入通用咨询通道命名"show-word-limitv-model="form.consultRoute.name"/></el-form-item><el-form-item label="入口说明文案:" label-width="100px"><el-inputmaxlength="10"placeholder="请输入通用咨询通道说明文案"show-word-limitv-model="form.consultRoute.notice"/></el-form-item></div><el-form-itemprop="frontMemberSetting.assignType"label="成员配置"v-if="form.consultRoute.type !== CONSULT_CHANNEL.WECHAT_GROUP"><Staffv-model="form.frontMemberSetting":hideKeys="form.consultRoute.type === CONSULT_CHANNEL.EXPERT ? [] : ['SOURCE_OWNER']"/></el-form-item><el-form-item label="咨询欢迎语配置:"><el-radio-group v-model="form.welcomeConfig.welcomeMsgType" @change="clearWelcomeMsg"><el-radio label="DEFAULT">默认欢迎语</el-radio><el-radio label="CUSTOM">自定义欢迎语(勾选后,将不再发送默认欢迎语)</el-radio></el-radio-group><el-inputtype="textarea"max="100"show-word-limit:disabled="form.welcomeConfig.welcomeMsgType === 'DEFAULT'"v-model="form.welcomeConfig.welcomeMsg"placeholder="您好,欢迎咨询。我们会为您提供免费的健康咨询、用药打卡等服务,有需要及时咨询!"></el-input></el-form-item><el-form-item label="发送图片:" label-width="75px" class="indent-form-item"><div><MultipleUploadersize="small":disabled="isDisable":maxSize="500 * 1024"accept="image/jpeg,image/png"v-model="form.welcomeConfig.welcomeImages":limit="3"/><p class="uploader-tip">支持扩展名:.png/.jpg文件,且不超过500kb/张,最多3张</p></div></el-form-item><el-form-item prop="strategyStatus" label="咨询服务设置:"><el-radio-group v-model="form.strategyStatus" :disabled="isImmutable('status')"><el-radio label="TOENABLED">默认开启咨询服务</el-radio><el-radio label="TODISABLED">按规则开启咨询服务</el-radio></el-radio-group></el-form-item><div class="ps">默认开启咨询服务,表示患者可以无条件发起咨询。按规则开启咨询服务,表示患者需要满足设置的规则后才能发起咨询。</div><div v-if="form.value.strategySetting === 'TOENABLED'"><el-form-item prop="strategyStatus" label="患者积分兑换:"><el-radio-group v-model="form.strategyStatus" :disabled="isImmutable('status')"><el-radio label="ENABLED">积分兑换成功后,患者端咨询聊天开启</el-radio></el-radio-group></el-form-item><el-form-item prop="strategyStatus" label="患者积分兑换:"><el-radio-group v-model="form.strategyStatus" :disabled="isImmutable('status')"><el-radio label="ENABLED">积分兑换成功后,患者端咨询聊天开启</el-radio></el-radio-group></el-form-item></div><el-form-item prop="strategyStatus" label="咨询通道状态:"><el-radio-group v-model="form.strategyStatus" :disabled="isImmutable('status')"><el-radio label="ENABLED">启用</el-radio><el-radio label="DISABLED">禁用</el-radio></el-radio-group></el-form-item><div class="ps">咨询通道的状态用以控制患者端咨询通道的展示和隐藏。开启则患者端可见该咨询通道的入口,禁用则患者端不可见该咨询通道的入口。</div><el-form-item prop="comments" label="备注:"><el-inputmaxlength="100"show-word-limittype="textarea"v-model="form.comments"@blur="form.comments = form.comments.trim()"placeholder="请输入对该策略的描述,比如运营逻辑、注意事项等"></el-input></el-form-item><el-form-item v-if="!isDisable"><div style="text-align: right"><el-button @click="router.back">取消</el-button><el-button type="primary" @click="onConfirm">确认</el-button></div></el-form-item></el-form></div>
</template>
<script lang="ts" setup>
import { ref, watch, reactive, computed, onMounted, provide } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { debounce } from 'lodash-es';
import MultipleUploader from '@/components/Uploader/multiple.vue';
import { CONSULT_CHANNEL, CONSULT_CHANNEL_TEXT, STRATEGY_STATUS } from '@/consts/configuration';
import { ElForm, ElButton, ElMessage, ElFormItem, ElRadioGroup, ElRadio, ElInput } from 'element-plus';
import {fetchConsultStrategyDetail,updateConsultStrategy,createConsultStrategy,fetchRobotList,fetchRobotFriends,fetchConsultStrategyList
} from '@/api/configuration/strategy';
import { remarkReg } from '@/utils/validate';
import { fetchAccount, fetchConsultantList } from '@/api/source';
import Staff from './components/Staff.vue';
import { fetchGroup } from '@/api/system/account';const route = useRoute();
const router = useRouter();
const strategyId = route.params.id;
// 查看模式下均不允许修改
const isDisable = strategyId && route.path.indexOf('edit') < 0;
const hasBindSource = computed(() => isDisable || (form.value.bindSourceIds && !!form.value.bindSourceIds.length));
// 编辑已绑定来源的策略时,一些配置不可更改
const isImmutable = (key) => {const obj = {[CONSULT_CHANNEL.WECHAT_GROUP]: ['serviceProvider', 'status'],[CONSULT_CHANNEL.WECHAT_SINGLE]: ['status'],[CONSULT_CHANNEL.EXPERT]: ['status'],[CONSULT_CHANNEL.GENERIC]: ['status']};return hasBindSource.value && (obj[form.value.consultRoute.type] || []).includes(key);
};const initForm = (): Record<string, any> => ({strategyName: '',consultRoute: {type: '',name: '',notice: ''},frontMemberSetting: {groupType: 'DEFAULT',assignType: '',strategyAssignConfigs: []},welcomeConfig: {welcomeMsgType: 'DEFAULT',welcomeMsg: '',welcomeImages: [],miniProgramsCardLink: ''},strategyStatus: 'ENABLED',strategySetting: 'TOENABLED',comments: '',strategyConditionConfigs: []
});const formRef = ref<typeof ElForm>();
const form = ref<Record<string, any>>(initForm());
const loading = ref(false);
const enums = reactive({groupList: [],staff: []
});
const map = reactive({[CONSULT_CHANNEL.GENERIC]: 0,[CONSULT_CHANNEL.EXPERT]: 0,[CONSULT_CHANNEL.WECHAT_SINGLE]: 0,[CONSULT_CHANNEL.WECHAT_GROUP]: 0
});const validateName = (rule, value, cb) => {if (!value || remarkReg().test(value)) {cb();} else {cb(new Error('支持中英文、标点符号、数字输入,不支持特殊字符'));}
};const rules = ref({strategyName: [{ max: 30, message: '长度不超过30字符', trigger: 'blur' },{required: true,message: '请输入策略名称',trigger: 'blur'},{validator: validateName,trigger: 'blur'}],'consultRoute.type': [{required: true,message: '请选择咨询通道',trigger: 'blur'}],tempGroupMembers: [{required: true,message: '请选择企微成员',trigger: 'change'}],'frontMemberSetting.assignType': [{required: true,message: '成员配置不可为空',trigger: 'blur'},{validator: (_, value, cb) => {const { strategyAssignConfigs = [] } = form.value.frontMemberSetting || {};if (value !== 'SOURCE_OWNER' && !strategyAssignConfigs.length) {cb(new Error('成员配置不可为空'));return;}cb();},trigger: 'blur'}],strategyConditionConfigs: [{required: true,message: '成员配置不可为空',trigger: 'blur'},{validator: (rule, value, cb) => {const guidedArr: number[] = [];for (let i = 0; i < value.length; i++) {const item = value[i];if (item.strategyGroupConfigs.some((c) => {if (c.assignType && c.assignType !== 'SOURCE_OWNER' && !c.strategyAssignConfigs.length) {return true;}})) {cb(new Error('至少选择一个分组或者用户'));return;}if (item.strategyGroupConfigs.every((c) => !c.assignType)) {cb(new Error('1个服务方必须配置分诊组和协作组中的其一'));return;}if (item.guided) {guidedArr.push(item.serviceProviderId);}}if (guidedArr.length) return cb();cb(new Error('至少有1个服务方打开导诊开关'));},trigger: 'blur'}],comments: [{ max: 100, message: '长度不超过100字符', trigger: 'blur' },{validator: validateName,trigger: 'blur'}],strategyStatus: [{required: true,message: '请选择策略状态',trigger: 'blur'}]
});const clearWelcomeMsg = () => {form.value.welcomeConfig.welcomeMsg = '';
};const onConsultChannelChange = (v) => {form.value.consultRoute.name = v === CONSULT_CHANNEL.GENERIC ? '' : CONSULT_CHANNEL_TEXT[v];form.value.consultRoute.notice = '';form.value.frontMemberSetting = initForm().frontMemberSetting;
};const formatData = () => {// 生成后端需要的数据const data = JSON.parse(JSON.stringify(form.value));data.strategyId = strategyId;if ([CONSULT_CHANNEL.GENERIC, CONSULT_CHANNEL.EXPERT].includes(form.value.consultRoute.type)) {// 通用+专家data.strategyConditionConfigs = [{strategyGroupConfigs: [data.frontMemberSetting]}];}data.strategyConditionConfigs[0].strategyGroupConfigs[0].groupType = 'DEFAULT';delete data.frontMemberSetting;if (!data.welcomeConfig) {data.welcomeConfig = {welcomeMsgType: 'DEFAULT',welcomeMsg: '',welcomeImages: [],miniProgramsCardLink: ''};}return data;
};const onConfirm = () => {formRef.value &&formRef.value.validate((isValid) => {if (isValid) {loading.value = true;const fn = strategyId ? updateConsultStrategy : createConsultStrategy;fn(formatData()).then(({ data }) => {ElMessage({type: 'success',duration: 500,message: '操作成功!',onClose: () => {router.push({name: 'strategy-management-list'});}});}).finally(() => {loading.value = false;});}});
};const generateData = (originData = {}) => {// 生成前端需要的字段const data = initForm();for (let k in data) {data[k] = originData[k];}data.frontMemberSetting = {assignType: '',strategyAssignConfigs: []};if ([CONSULT_CHANNEL.GENERIC, CONSULT_CHANNEL.EXPERT].includes(data.consultRoute.type)) {// 通用/专家咨询const [{ strategyGroupConfigs } = { strategyGroupConfigs: [] }] = data.strategyConditionConfigs || [];data.frontMemberSetting = {...data.frontMemberSetting,...strategyGroupConfigs[0],strategyAssignConfigs: strategyGroupConfigs[0]?.strategyAssignConfigs || []};}return data;
};const fetchStrategy = async () => {if (!strategyId) return;try {loading.value = true;let res = await fetchConsultStrategyDetail(+strategyId);form.value = generateData(res.data);if (!form.value.welcomeConfig) {form.value.welcomeConfig = {welcomeMsgType: 'DEFAULT',welcomeMsg: '',welcomeImages: [],miniProgramsCardLink: ''};}console.log(form.value);loading.value = false;} catch (err) {loading.value = false;console.log(err);}
};const getEnums = () => {// 临时设置sizefetchConsultantList({ page: 0, size: 1000 }).then((res) => {enums.staff = res.data.content;});fetchGroup().then((res) => {enums.groupList = res.data.filter((v) => v.subGroups && v.subGroups.length);});fetchStrategyCount();
};
const fetchStrategyCount = () => {fetchConsultStrategyList({strategyStatusIn: [STRATEGY_STATUS.ENABLED]},{ page: 0, size: 100 }).then((res) => {for (let k in map) {map[k] = 0;}for (let val of res.data?.content || []) {const { type } = val.consultRoute || {};if (map[type] !== undefined) {map[type]++;}}});
};getEnums();
onMounted(() => {const { type } = route.query;if (!strategyId && type && !CONSULT_CHANNEL_TEXT[<string>type]) {form.value.consultRoute.type = CONSULT_CHANNEL.GENERIC;ElMessage({type: 'error',duration: 2 * 1000,message: '无效的策略类型'});return;}fetchStrategy();
});
provide('enums', enums);
</script><style lang="scss" scoped>
.strategy-edit {width: 900px;margin: 0 auto;.indent-form-item {margin-left: 150px;}
}.group-number {display: flex;> div:first-child {margin-right: 30px;}
}.uploader-wrapper {margin: 24px 0;> div {display: flex;::v-deep .el-upload {width: 80px;height: 80px;margin-right: 16px;border-radius: 0;.el-upload-dragger {background: #f7f8fa;border: none;border-radius: 0;}}}
}.uploader-tip {font-size: 12px;color: #969799;line-height: 1.2;margin-top: 10px;
}.normal-text {color: var(--el-text-color-regular);
}
.ps {color: #999;padding-left: 50px;
}
</style>
.ps {color: #999;padding-left: 50pxpx;
}
1、代码规范2、注释3、优雅的代码(冗余度,命名)4、开发文档非常重要1、及时沟通,反馈,不要让上级找你