riku
2024-04-24 da51e7d5bbf5ff1610209510571e94d0523b515c
src/views/fytz/user/components/CompUserInfo.vue
@@ -1,305 +1,250 @@
<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>