hotline-web/src/views/snapshot/config/industry/components/Industry-edit.vue

<template>
		<el-dialog v-model="state.dialogVisible" width="50%" draggable :title="dialogTitle"  destroy-on-close append-to-body @close="close">
			<template #header>
				<el-tabs v-model="state.activeName">
					<el-tab-pane :name="item.name" v-for="item in state.tabPaneList" :key="item.name" :label="item.label"></el-tab-pane>
				</el-tabs>
			</template>
			<el-form :model="state.ruleForm" label-width="110px" ref="ruleFormRef" :disabled="loading">
				<el-row :gutter="10" v-show="state.activeName === '0'">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="行业名称" prop="name" :rules="[{ required: true, message: '请填写行业名称', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.name" placeholder="请填写行业名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="市民红包" prop="citizenReadPackAmount" :rules="[{ required: true, message: '请填写市民红包', trigger: 'blur' }]">
							<el-input-number v-model="state.ruleForm.citizenReadPackAmount" :min="0" :precision="2" class="w100" placeholder="请填写市民红包"/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="网格员红包" prop="guiderReadPackAmount" :rules="[{ required: true, message: '请填写网格员红包', trigger: 'blur' }]">
							<el-input-number v-model="state.ruleForm.guiderReadPackAmount" :min="0" :precision="2" class="w100" placeholder="请填写网格员红包"/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="阶段性回复间隔时间" prop="intervalTime" label-width="150px" :rules="[{ required: false, message: '请填写阶段性回复间隔时间', trigger: 'blur' }]">
							<el-input type="number" v-model="state.ruleForm.intervalTime" placeholder="请填写阶段性回复间隔时间">
								<template #suffix>
									小时
								</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="审批部门" prop="approveOrgId" :rules="[{ required: false, message: '请选择审批部门', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.approveOrgId" placeholder="请选择审批部门" class="w100">
								<el-option v-for="item in state.genderOptions" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="关联宣传学习" prop="bulletinTypePublicityId" :rules="[{ required: false, message: '请选择关联宣传学习', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.bulletinTypePublicityId" placeholder="请选择关联宣传学习" class="w100">
								<el-option v-for="item in state.genderOptions" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="关联操作指引" prop="bulletinTypeGuideId" :rules="[{ required: false, message: '请选择关联操作指引', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.bulletinTypeGuideId" placeholder="请选择关联操作指引" class="w100">
								<el-option v-for="item in state.genderOptions" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="关联受理类型" prop="acceptTypeCode" :rules="[{ required: false, message: '请选择关联受理类型', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.acceptTypeCode" placeholder="请选择关联受理类型" class="w100">
								<el-option v-for="item in state.genderOptions" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="标题追加信息" prop="titleSuffix" :rules="[{ required: false, message: '请填写标题追加信息', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.titleSuffix" placeholder="请填写标题追加信息" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="系统状态" prop="isEnable">
							<el-switch v-model="state.ruleForm.isEnable" inline-prompt active-text="启用" inactive-text="禁用" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="小程序状态" prop="isAffix">
							<el-switch v-model="state.ruleForm.isAffix" inline-prompt active-text="启用" inactive-text="禁用" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="排序" prop="displayOrder" :rules="[{ required: false, message: '请填写排序', trigger: 'blur' }]">
							<el-input-number v-model="state.ruleForm.displayOrder" :min="1" :precision="0" class="w100"/>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="页面Url" prop="pageUrl" :rules="[{ required: false, message: '请填写页面Url', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.pageUrl" placeholder="请填写页面Url" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="关怀页面Ur" prop="pageCareUrl" :rules="[{ false: true, message: '请填写关怀页面Ur', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.pageCareUrl" placeholder="请填写关怀页面Ur" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="帮助引导用语" prop="txtHelpRemarks" :rules="[{ required: false, message: '请填写帮助引导用语', trigger: 'blur' }]">
							<el-input
								type="textarea"
								:autosize="{ minRows: 6, maxRows: 10 }"
								v-model="state.ruleForm.txtHelpRemarks"
								placeholder="请填写帮助引导用语"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="宫格说明文本" prop="txtRemarks" :rules="[{ required: false, message: '请填写宫格说明文本', trigger: 'blur' }]">
							<el-input
								type="textarea"
								:autosize="{ minRows: 6, maxRows: 10 }"
								v-model="state.ruleForm.txtRemarks"
								placeholder="请填写宫格说明文本"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="关怀说明" prop="txtCareRemarks" :rules="[{ required: false, message: '请填写关怀说明', trigger: 'blur' }]">
							<el-input
								type="textarea"
								:autosize="{ minRows: 6, maxRows: 10 }"
								v-model="state.ruleForm.txtCareRemarks"
								placeholder="请填写关怀说明"
								clearable
							></el-input>
						</el-form-item>
					</el-col>

				</el-row>
				<el-row v-show="state.activeName === '1'">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="背景图片" prop="settingName">
							<el-upload
								class="avatar-uploader"
								:action="action"
								:show-file-list="false"
								:on-success="updateSuccess"
								ref="uploadListRef"
								name="fileData"
							>
								<img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
								<SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus"/>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="banner设置" prop="settingName">
							<el-upload
								class="avatar-uploader"
								:action="action"
								:show-file-list="false"
							>
								<img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
								<SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus"/>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="宫格图" prop="settingName">
							<el-upload
								class="avatar-uploader"
								:action="action"
								:show-file-list="false"
							>
								<img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
								<SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus"/>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="关怀宫格图" prop="settingName">
							<el-upload
								class="avatar-uploader"
								:action="action"
								:show-file-list="false"
							>
								<img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
								<SvgIcon v-else class="avatar-uploader-icon" name="ele-Plus"/>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-show="state.activeName === '2'">

				</el-row>
			</el-form>
			<template #footer v-if="!state.isDisabled">
				<span class="dialog-footer">
					<el-button @click="closeDialog" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="loading">确 定</el-button>
				</span>
			</template>
		</el-dialog>
</template>

<script setup lang="ts" name="parameterEdit">
import { computed, reactive, ref } from 'vue';
import { ElMessage, FormInstance, UploadFile, UploadFiles } from 'element-plus';
import { throttle } from '@/utils/tools';
import { modifySettings, setitngsDetail } from '@/api/system/parameter';
import { getIndustryDetail } from '@/api/snapshot/config';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {
		settingName: '', // 参数名称
		code: '', // 参数
		settingValue: '', // 参数值
		sort: 1, // 排序
		remark: '', // 参数说明
	},
	isDisabled: false, // 是否禁用
	activeName:'0',
	tabPaneList:[
		{
			label: '参数配置',
			name: '0',
		},
		{
			label: '图片配置',
			name: '1',
		},
		{
			label: '操作权限',
			name: '3',
		},
	],
});
const imageUrl = ref('')
const action = computed(() => {
	return import.meta.env.VITE_API_UPLOAD_URL + '/file/upload?source=hotline';
});
const uploadListRef = ref<RefType>(); // 上传组件ref
// 上传成功
const updateSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
	if (response.result.path) {
		console.log(response);
		imageUrl.value = import.meta.env.VITE_API_UPLOAD_URL + response.result.path;
	} else {
		uploadListRef.value.handleRemove(uploadFile);
		ElMessage.error('上传失败');
	}
};

let loading = ref<boolean>(false);  // 加载状态
const dialogTitle = computed(() => {
	return state.isDisabled ? '查看参数' : '编辑参数';
});
// 打开弹窗
const ruleFormRef = ref<RefType>();
const openDialog = async (id: string, isDisabled?: boolean) => {
	state.dialogVisible = true;
	loading.value = true;
	try {
		const res: any = await getIndustryDetail(id);
		state.ruleForm = res.result ?? <EmptyObjectType>{};
		state.isDisabled = isDisabled ?? false;
		loading.value = false;
	} catch (error) {
		console.log(error);
		loading.value = false;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value?.resetFields();
	ruleFormRef.value?.resetFields();
};
// 新增
const onSubmit = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		loading.value = true;
		state.ruleForm.settingValue = state.ruleForm?.settingValue.split('|');
		modifySettings(state.ruleForm)
			.then(() => {
				ElMessage({
					message: '操作成功',
					type: 'success',
				});
				loading.value = false;
				closeDialog();
				emit('updateList');
			})
			.catch(() => {
				// 新增失败
				loading.value = false;
				closeDialog();
			});
	});
}, 300);
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>