| | |
| | | <template> |
| | | <el-form |
| | | :inline="false" |
| | | :model="formObj" |
| | | ref="formRef" |
| | | <FYForm |
| | | :form-info="formInfo" |
| | | :rules="rules" |
| | | label-position="right" |
| | | label-width="150px" |
| | | :doClear="active" |
| | | :useCancel="create" |
| | | :useReset="!create" |
| | | @update:isEdit="(v) => $emit('updateEdit', v)" |
| | | @submit="submit" |
| | | @cancel="$emit('onCancel')" |
| | | > |
| | | <!-- <el-form-item label="id" prop="GUID"> |
| | | <el-input clearable v-model="formObj.GUID" placeholder="id" /> |
| | | </el-form-item> --> |
| | | <!-- <el-form-item label="头像url" prop="HeadIconUrl"> |
| | | <el-input clearable v-model="formObj.HeadIconUrl" placeholder="头像url" /> |
| | | </el-form-item> --> |
| | | <el-form-item label="账户名" prop="acountname"> |
| | | <el-input clearable v-model="formObj.acountname" placeholder="账户名" /> |
| | | </el-form-item> |
| | | <el-form-item label="用户昵称" prop="realname"> |
| | | <el-input clearable v-model="formObj.realname" placeholder="用户昵称" /> |
| | | </el-form-item> |
| | | <el-form-item label="密码" prop="password"> |
| | | <el-input |
| | | clearable |
| | | type="password" |
| | | v-model="formObj.password" |
| | | placeholder="默认密码123456" |
| | | /> |
| | | </el-form-item> |
| | | <!-- <el-form-item label="用户类型id" prop="UserTypeID"> |
| | | <el-input |
| | | clearable |
| | | v-model="formObj.UserTypeID" |
| | | placeholder="用户类型id" |
| | | /> |
| | | </el-form-item> --> |
| | | <el-form-item label="用户类型" prop="_usertype"> |
| | | <el-select v-model="formObj._usertype" placeholder="用户类型"> |
| | | <el-option |
| | | v-for="s in userTypes" |
| | | :key="s.value" |
| | | :label="s.label" |
| | | :value="s" |
| | | <template #form-item="{ formObj }"> |
| | | <!-- <el-form-item label="头像url" prop="HeadIconUrl"> |
| | | <el-input |
| | | clearable |
| | | v-model="formObj.HeadIconUrl" |
| | | placeholder="头像url" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="所属企业" prop="departmentname"> |
| | | <el-input |
| | | clearable |
| | | v-model="formObj.departmentname" |
| | | placeholder="所属企业" |
| | | disabled |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="是否可用" prop="isenable"> |
| | | <el-switch v-model="formObj.isenable" /> |
| | | <span style="margin-left: 16px">{{ |
| | | formObj.isenable ? '可用' : '不可用' |
| | | }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="工号" prop="workno"> |
| | | <el-input clearable v-model="formObj.workno" placeholder="工号" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="手机" prop="telephone"> |
| | | <el-input |
| | | clearable |
| | | type="tel" |
| | | v-model="formObj.telephone" |
| | | placeholder="手机" |
| | | /> |
| | | </el-form-item> |
| | | <!-- <el-form-item label="微信id" prop="WechatID"> |
| | | <el-input clearable v-model="formObj.WechatID" placeholder="微信id" /> |
| | | </el-form-item> --> |
| | | <el-form-item label="省/市/区/镇" prop="_locations"> |
| | | <el-cascader |
| | | v-model="formObj._locations" |
| | | :options="locations" |
| | | placeholder="省/市/区/镇" |
| | | :props="locationsProps" |
| | | style="width: 280px" |
| | | :disabled="!create" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="场景类型" prop="_scenetype"> |
| | | <el-select |
| | | v-model="formObj._scenetype" |
| | | placeholder="场景类型" |
| | | > |
| | | <el-option |
| | | v-for="s in sceneTypes" |
| | | :key="s.value" |
| | | :label="s.label" |
| | | :value="s" |
| | | </el-form-item> --> |
| | | <el-form-item label="账户名" prop="acountname"> |
| | | <el-input clearable v-model="formObj.acountname" placeholder="账户名" /> |
| | | </el-form-item> |
| | | <el-form-item label="用户昵称" prop="realname"> |
| | | <el-input clearable v-model="formObj.realname" placeholder="用户昵称" /> |
| | | </el-form-item> |
| | | <el-form-item label="密码" prop="password"> |
| | | <el-col :span="18"> |
| | | <el-input |
| | | :disabled="true" |
| | | clearable |
| | | type="password" |
| | | v-model="formObj.password" |
| | | placeholder="默认密码123456" |
| | | /> |
| | | </el-col> |
| | | <el-col :span="6" v-if="!create"> |
| | | <el-row justify="end"> |
| | | <el-button type="danger" @click="onResetPw" :loading="pwLoading">重置密码</el-button> |
| | | </el-row> |
| | | </el-col> |
| | | </el-form-item> |
| | | <FYOptionUserType |
| | | prop="_usertype" |
| | | :allOption="false" |
| | | :initValue="false" |
| | | v-model:value="formObj._usertype" |
| | | ></FYOptionUserType> |
| | | <!-- <el-form-item label="所属企业" prop="departmentname"> |
| | | <el-input |
| | | clearable |
| | | v-model="formObj.departmentname" |
| | | placeholder="所属企业" |
| | | disabled |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button |
| | | :disabled="!edit" |
| | | type="primary" |
| | | @click="onSubmit" |
| | | :loading="loading" |
| | | >提交</el-button |
| | | > |
| | | <el-button :disabled="!edit" @click="onReset">重置</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-form-item> --> |
| | | <el-form-item label="是否可用" prop="isenable"> |
| | | <el-switch v-model="formObj.isenable" /> |
| | | <span style="margin-left: 16px">{{ formObj.isenable ? '可用' : '不可用' }}</span> |
| | | </el-form-item> |
| | | <el-form-item label="工号" prop="workno"> |
| | | <el-input clearable v-model="formObj.workno" placeholder="工号" /> |
| | | </el-form-item> |
| | | <el-form-item label="手机" prop="telephone"> |
| | | <el-input clearable type="tel" v-model="formObj.telephone" placeholder="手机" /> |
| | | </el-form-item> |
| | | <FYOptionLocation |
| | | v-if="create" |
| | | prop="_locations" |
| | | :allOption="false" |
| | | :level="5" |
| | | :checkStrictly="true" |
| | | :initValue="false" |
| | | v-model:value="formObj._locations" |
| | | ></FYOptionLocation> |
| | | <FYOptionScene |
| | | prop="_scenetype" |
| | | :allOption="false" |
| | | :type="1" |
| | | :initValue="false" |
| | | v-model:value="formObj._scenetype" |
| | | ></FYOptionScene> |
| | | </template> |
| | | </FYForm> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { defineProps, defineEmits, reactive, ref, watch } from 'vue'; |
| | | import { useFormConfirm } from '@/composables/formConfirm'; |
| | | import { enumUserNA } from '@/enum/user'; |
| | | import { enumScene_1NA, getSceneName_1 } from '@/enum/scene'; |
| | | import { enumLocationNA } from '@/enum/location'; |
| | | import { defineProps, defineEmits, reactive, ref, watch, computed } from 'vue'; |
| | | import { getSceneName } from '@/enum/scene'; |
| | | import userApi from '@/api/fytz/userApi'; |
| | | import { useMessageBoxTip } from '@/composables/messageBox'; |
| | | |
| | | const props = defineProps({ |
| | | //基本信息 |
| | | formInfo: Object, |
| | | isEdit: Boolean, |
| | | model: { |
| | | type: Object |
| | | // default: () => { |
| | | // return { isenable: true }; |
| | | // } |
| | | }, |
| | | create: { |
| | | type: Boolean, |
| | | default: false, |
| | | default: false |
| | | }, |
| | | active: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | default: false |
| | | } |
| | | }); |
| | | |
| | | const emit = defineEmits(['onSubmit', 'onCancel', 'update:isEdit']); |
| | | const formInfo = ref({ isenable: true }); |
| | | |
| | | const { formObj, formRef, edit, onSubmit, onReset } = useFormConfirm({ |
| | | defaultForm: { |
| | | isenable: true, |
| | | }, |
| | | submit: { |
| | | do: submit, |
| | | }, |
| | | cancel: { |
| | | do: cancel, |
| | | }, |
| | | }); |
| | | watch( |
| | | () => props.model, |
| | | (nValue) => { |
| | | formInfo.value = parseUserInfo(nValue); |
| | | } |
| | | ); |
| | | |
| | | const userTypes = reactive(enumUserNA()); |
| | | const sceneTypes = reactive(enumScene_1NA()); |
| | | const locations = enumLocationNA(); |
| | | const locationsProps = reactive({ |
| | | checkStrictly: true, |
| | | }); |
| | | const loading = ref(false); |
| | | const emit = defineEmits(['onSubmit', 'onCancel', 'updateEdit']); |
| | | |
| | | const rules = reactive({ |
| | | acountname: [ |
| | | { |
| | | required: true, |
| | | message: '账户名不能为空', |
| | | trigger: 'blur', |
| | | }, |
| | | trigger: 'blur' |
| | | } |
| | | ], |
| | | realname: [ |
| | | { |
| | | required: true, |
| | | message: '用户昵称不能为空', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | password: [ |
| | | { |
| | | required: props.create, |
| | | message: '密码不能为空', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | _usertype: [ |
| | | { |
| | | required: true, |
| | | message: '用户类型不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | _locations: [ |
| | | { |
| | | required: props.create, |
| | | message: '省/市/区/镇不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | _scenetype: [ |
| | | { |
| | | required: true, |
| | | message: '场景类型不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | // password: [ |
| | | // { |
| | | // required: props.create, |
| | | // message: '密码不能为空', |
| | | // trigger: 'blur', |
| | | // }, |
| | | // ], |
| | | }); |
| | | |
| | | // 用户基本信息格式化 |
| | | function parseUserInfo(s) { |
| | | s._usertype = { |
| | | label: s.usertype, |
| | | value: s.usertypeid + '', |
| | | }; |
| | | if (s.usertype && s.usertypeid) { |
| | | s._usertype = { |
| | | label: s.usertype, |
| | | value: s.usertypeid + '' |
| | | }; |
| | | } |
| | | |
| | | s._scenetype = { |
| | | label: getSceneName_1(s.extension2), |
| | | value: s.extension2, |
| | | }; |
| | | if (s.extension2) { |
| | | s._scenetype = getSceneName(s.extension2, 1); |
| | | } |
| | | |
| | | s._locations = []; |
| | | // if (s.provincecode && s.provincecode.length > 0) |
| | | // s._locations.push([s.provincecode, s.provincename]); |
| | | // if (s.citycode && s.citycode.length > 0) |
| | | // s._locations.push([s.citycode, s.cityname]); |
| | | // if (s.districtcode && s.districtcode.length > 0) |
| | | // s._locations.push([s.districtcode, s.districtname]); |
| | | // if (s.towncode && s.towncode.length > 0) |
| | | // s._locations.push([s.towncode, s.townname]); |
| | | s._locations = {}; |
| | | |
| | | return s; |
| | | } |
| | | |
| | | function createUser() { |
| | | loading.value = true; |
| | | return userApi |
| | | .createUser(formObj.value) |
| | | .then(() => { |
| | | emit('onSubmit', formObj); |
| | | }) |
| | | .finally(() => { |
| | | loading.value = false; |
| | | }); |
| | | } |
| | | |
| | | function updateUser() { |
| | | loading.value = true; |
| | | return userApi |
| | | .updateUserInfo(formObj.value) |
| | | .then(() => { |
| | | emit('onSubmit', formObj); |
| | | }) |
| | | .finally(() => { |
| | | loading.value = false; |
| | | }); |
| | | } |
| | | |
| | | function submit() { |
| | | function parseUserInfoReverse(v) { |
| | | // 行政区划信息填充 |
| | | const a = formObj.value._locations; |
| | | if (a[0]) { |
| | | formObj.value.provincecode = a[0][0]; |
| | | formObj.value.provincename = a[0][1]; |
| | | } |
| | | if (a[1]) { |
| | | formObj.value.citycode = a[1][0]; |
| | | formObj.value.cityname = a[1][1]; |
| | | } |
| | | if (a[2]) { |
| | | formObj.value.districtcode = a[2][0]; |
| | | formObj.value.extension1 = a[2][1]; |
| | | } |
| | | if (a[3]) { |
| | | formObj.value.towncode = a[3][0]; |
| | | formObj.value.townname = a[3][1]; |
| | | } |
| | | |
| | | const a = v._locations; |
| | | v.extension1 = a.dName; |
| | | // 用户类型信息填充 |
| | | const b = formObj.value._usertype; |
| | | formObj.value.usertypeid = b.value; |
| | | formObj.value.usertype = b.label; |
| | | const b = v._usertype; |
| | | v.usertypeid = b.value; |
| | | v.usertype = b.label; |
| | | |
| | | // 场景类型信息填充 |
| | | const c = formObj.value._scenetype; |
| | | formObj.value.extension2 = c.value; |
| | | const c = v._scenetype; |
| | | v.extension2 = c.value; |
| | | |
| | | return props.create ? createUser() : updateUser(); |
| | | return v; |
| | | } |
| | | |
| | | function cancel() { |
| | | emit('onCancel'); |
| | | } |
| | | |
| | | watch( |
| | | () => props.formInfo, |
| | | (nValue) => { |
| | | formObj.value = parseUserInfo(nValue); |
| | | } |
| | | ); |
| | | |
| | | watch( |
| | | () => props.active, |
| | | (nValue) => { |
| | | if (!nValue) { |
| | | onReset(); |
| | | function createUser(v, success, fail) { |
| | | const l = v._locations; |
| | | const params = { |
| | | userInfo: v, |
| | | baseInfo: { |
| | | biProvinceCode: l.pCode, |
| | | biProvinceName: l.pName, |
| | | biCityCode: l.cCode, |
| | | biCityName: l.cName, |
| | | biDistrictCode: l.dCode, |
| | | biDistrictName: l.dName, |
| | | biTownCode: l.tCode, |
| | | biTownName: l.tName, |
| | | biAreaCode: l.aCode, |
| | | biArea: l.aName |
| | | // biManagementCompanyId: |
| | | // biManagementCompany: |
| | | // biContact |
| | | // biTelephone |
| | | // biAddress |
| | | } |
| | | } |
| | | ); |
| | | }; |
| | | return userApi |
| | | .createUser(params) |
| | | .then(() => { |
| | | emit('onSubmit', params); |
| | | success(); |
| | | }) |
| | | .catch((err) => { |
| | | fail(err); |
| | | }); |
| | | } |
| | | |
| | | watch(edit, (nValue) => { |
| | | emit('update:isEdit', nValue); |
| | | }); |
| | | function updateUser(v, success, fail) { |
| | | return userApi |
| | | .updateUserInfo(v) |
| | | .then(() => { |
| | | emit('onSubmit', v); |
| | | if (success) success(); |
| | | }) |
| | | .catch((err) => { |
| | | if (fail) fail(err); |
| | | }); |
| | | } |
| | | |
| | | function submit(v, success, fail) { |
| | | parseUserInfoReverse(v.value); |
| | | |
| | | return props.create ? createUser(v.value, success, fail) : updateUser(v.value, success, fail); |
| | | // parseUserInfoReverse(props.formInfo); |
| | | |
| | | // return props.create |
| | | // ? createUser(props.formInfo, success, fail) |
| | | // : updateUser(props.formInfo, success, fail); |
| | | } |
| | | |
| | | // 重置密码 |
| | | const pwLoading = ref(false); |
| | | |
| | | function onResetPw() { |
| | | useMessageBoxTip({ |
| | | confirmMsg: '是否重置该场景密码?', |
| | | confirmTitle: '重置密码', |
| | | onConfirm: async () => { |
| | | pwLoading.value = true; |
| | | return userApi.resetPassword(formInfo.value.guid).finally(() => { |
| | | pwLoading.value = false; |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | </script> |