123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325 |
- <template>
- <!-- 新增账号 -->
- <div class="accountPerPage flex-col">
- <s-header :name="pageTitle" :noback="false"></s-header>
- <div class="accountPerBox flex-col">
- <van-form @submit="onSubmit">
- <van-field v-model="username" name="username" :label="$t('accountPer.usernameLabel')" :readonly="isUserName"
- :placeholder="$t('accountPer.usernamePlaceholder')" :rules="[
- { required: true, message: $t('accountPer.usernamePlaceholder') },
- ]" />
- <van-field v-model="password" name="password" type="password" :label="$t('accountPer.passwordLabel')"
- :placeholder="passwordPlaceholder" :rules="[
- { required: havePassword, message: $t('accountPer.passwordPlaceholder') },
- ]" />
- <van-field v-model="name" name="name" :label="$t('accountPer.nameLabel')"
- :placeholder="$t('accountPer.namePlaceholder')" :rules="[
- { required: true, message: $t('accountPer.namePlaceholder') },
- ]" />
- <van-field v-model="phone" name="phone" :label="$t('accountPer.phoneLabel')"
- :placeholder="$t('accountPer.phonePlaceholder')" :rules="[
- { required: true, message: $t('accountPer.phonePlaceholder') },
- ]" />
- <van-field name="radio" label="类型" v-if="user.type === 0">
- <template #input>
- <van-radio-group v-model="type" direction="horizontal">
- <van-radio name="1">公司人员</van-radio>
- <van-radio name="4">营销经理</van-radio>
- </van-radio-group>
- </template>
- </van-field>
- <van-field v-model="roleText" is-link readonly :label="$t('accountPer.roleLabel')"
- :placeholder="$t('accountPer.rolePlaceholder')" @click="roleShow = true" :rules="[{ required: true, message: $t('accountPer.rolePlaceholder') }]"/>
- <div class="van-cell van-field">
- <div class="van-cell__title van-field__label">
- <label id="van-field-4-label" for="van-field-4-input">{{ $t("accountPer.setUp") }}</label>
- </div>
- <div class="van-cell__value">
- <div class="van-field__body">
- <van-switch v-model="isEnabled" size="20px" class="o-mr-10" /><span>{{
- $t("accountPer.startOrNot")
- }}</span>
- </div>
- </div>
- </div>
- <van-field :border="false" @click-input="busiEquipInpClk" readonly clearable
- v-model="cofficentForm.equipmentNames" :label="$t('accountPer.manageMachinesLabel')"
- :placeholder="$t('accountPer.manageMachinesPlaceholder')" >
- <!-- :rules="[{ required: true, message: $t('accountPer.manageMachinesPlaceholder') }]" -->
- <template #right-icon>
- <div class="l-flex-RC">
- <van-icon v-if="cofficentForm.equipmentNames" @click="cofficentForm.equipmentNames = ''; equipmentIds = ''"
- class="o-mr-6" name="clear" />
- <van-icon @click="busiEquipInpClk" name="arrow" />
- </div>
- </template>
- </van-field>
- <!-- 操作 -->
- <van-row justify="space-around" style="padding: 1em">
- <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" native-type="submit">{{
- $t("accountPer.submit") }}</van-button>
- </van-row>
- <van-row justify="space-around" style="padding: 1em" v-if="pageTitle === $t('accountPer.modifyAccount')">
- <van-button span="5" round type="danger" style="height: 2em; padding: 0 2em" @click="deleteLoginUserFun()">{{
- $t("accountPer.delete") }}</van-button>
- </van-row>
- </van-form>
- </div>
- <van-popup v-model:show="roleShow" round position="bottom">
- <van-cascader v-model="roleList" :title="$t('accountPer.rolePlaceholder')" :options="roleOptions"
- @close="roleShow = false" @finish="onRoleFinish" />
- </van-popup>
- <!-- 机器弹窗 -->
- <kSelectPop @selconfirm="selEquipConfirm" ref="kSelectPopEquipRef" :selOptions="selEquipOptions" @searchData="searchEquData"
- :selTitleAndName="['name', 'id']"></kSelectPop>
- </div>
- </template>
- <script>
- // 导入选择组件
- import kSelectPop from "../../components/commom/kSelectPop/index.vue";
- import { onMounted, reactive, toRefs, ref } from "vue";
- import sHeader from "../../components/SimpleHeader";
- import { showFailToast, showSuccessToast, showToast } from 'vant';
- import {
- getSysRoleList,
- getEquipmentList,
- addLoginUser,
- updataLoginUser,
- deleteLoginUser,
- } from "../../service/accountPar/index";
- import { getLoginUser, styleUrl } from "../../common/js/utils";
- import md5 from "js-md5";
- import { useRouter } from "vue-router";
- import { useI18n } from "vue-i18n";
- export default {
- components: { sHeader, kSelectPop },
- setup() {
- const { t } = useI18n();
- const router = useRouter();
- const user = getLoginUser();
- const roleShow = ref(false);
- const roleText = ref("");
- const roleOptions = ref([]);
- const onRoleFinish = ({ selectedOptions }) => {
- roleShow.value = false;
- roleText.value = selectedOptions[0].text;
- };
- const equipmentIdShow = ref(false);
- const equipmentIdText = ref("");
- const equipmentIdsOptions = ref([]);
- const onEquipmentIdFinish = ({ selectedOptions }) => {
- equipmentIdShow.value = false;
- equipmentIdText.value = selectedOptions[0].text;
- };
- const passwordPlaceholder = ref("");
- const havePassword = ref(true);
- const isUserName = ref(false);
- let addParams = reactive({
- username: "",
- password: "",
- name: "",
- phone: "",
- type: user.type === 0 ? "1" : "",
- isEnabled: true,
- roleList: "",
- equipmentIds: "",
- companyType: "0",
- });
- const cofficentForm = ref({
- equipmentNames: "",
- });
- const pageTitle = ref("");
- onMounted(async () => {
- // 加载样式
- styleUrl('accountPer');
- let accoutPerSet = localStorage.getItem("accoutPerSet");
- if (accoutPerSet) {
- pageTitle.value = t("accountPer.modifyAccount");
- accoutPerSet = JSON.parse(accoutPerSet);
- addParams.id = accoutPerSet.id;
- addParams.username = accoutPerSet.username;
- isUserName.value = true;
- addParams.name = accoutPerSet.name;
- addParams.phone = accoutPerSet.phone;
- addParams.isEnabled = accoutPerSet.isEnabled;
- addParams.roleList = accoutPerSet.roleList[0];
- addParams.equipmentIds = accoutPerSet.equipmentIds;
- havePassword.value = false;
- passwordPlaceholder.value = t('accountPer.editPasswordPlaceholder')
- } else {
- pageTitle.value = t("accountPer.addAccount");
- passwordPlaceholder.value = t('accountPer.passwordPlaceholder');
- havePassword.value = true;
- }
- getSysRoleListFun();
- getEquipmentListFun();
- });
- // 获取角色下拉列表
- const getSysRoleListFun = async () => {
- const { data } = await getSysRoleList({ adminId: user.id });
- if (data.code === "00000") {
- roleOptions.value = data.data.map((item) => {
- return { text: item.label, value: item.value };
- });
- if (pageTitle.value === t("accountPer.modifyAccount")) {
- roleText.value = roleOptions.value.filter(
- (v) => v.value === addParams.roleList
- )[0].text;
- }
- } else {
- showFailToast(data.message);
- }
- };
- const searchEquData = (e) => {
- // console.log("设备列表", e);
- selEquipOptions.value = e;
- }
- // 获取机器下拉
- const getEquipmentListFun = async () => {
- const { data } = await getEquipmentList({ adminId: user.id });
- if (data.code === "00000") {
- if (data.data.length > 0) {
- // 将id转成字符串类型,解决选中问题
- data.data.forEach((item) => {
- item.id = item.id + "";
- });
- }
- selEquipOptions.value = data.data;
- if (addParams.equipmentIds != null) {
- const list = addParams.equipmentIds.split(',');
- const listName = [];
- // 根据id找到对应的name
- selEquipOptions.value.forEach(item => {
- list.forEach(item1 => {
- if (item.id === item1) {
- listName.push(item.name);
- }
- })
- })
- cofficentForm.value.equipmentNames = listName.join(",");
- }
- } else {
- showFailToast(data.message);
- }
- };
- const onSubmit = async () => {
- let params = { adminId: user.id };
- params = Object.assign({ adminId: user.id }, addParams);
- if (params.password !== "") {
- params.password = md5(params.password);
- }
- params.roleList = [params.roleList];
- // if (params.equipmentIds !== 'all') {
- // params.equipmentIds= [params.equipmentIds];
- // }
- if (pageTitle.value === t("accountPer.modifyAccount")) {
- // delete params.password;
- const { data } = await updataLoginUser(params);
- if (data.code === "00000") {
- showSuccessToast(t("accountPer.successfullyModifiedTheAccount"));
- // router.push("/accountPer");
- router.replace("/accountPer");
- } else {
- showFailToast(t("accountPer.failedToModifyTheAccount"), data.message);
- }
- console.log("onSubmit", data);
- } else {
- const { data } = await addLoginUser(params);
- if (data.code === "00000") {
- showSuccessToast(t("accountPer.accountAddedSuccessfully"));
- // router.push("/accountPer");
- router.replace("/accountPer");
- } else if (data.code === 'A0201') {
- showToast(t("accountPer.accountNameExists"));
- } else {
- showFailToast(t("accountPer.failedToAddAccount"), data.message);
- }
- console.log("onSubmit", data);
- }
- };
- const deleteLoginUserFun = async () => {
- const params = {
- adminId: user.id,
- id: addParams.id,
- };
- const { data } = await deleteLoginUser(params);
- if (data.code === "00000") {
- showSuccessToast(t("accountPer.successfullyDeletedTheAccount"));
- router.push("/accountPer");
- } else {
- showFailToast(t("accountPer.failedToDeleteTheAccount"), data.message);
- }
- };
- // 点击机器列表
- const busiEquipInpClk = () => {
- if (cofficentForm.value.equipmentNames) {
- let list = cofficentForm.value.equipmentNames.split(",");
- console.log(list, "list");
- kSelectPopEquipRef.value.selPopOpen(list);
- } else {
- kSelectPopEquipRef.value.selPopOpen();
- }
- };
- // 机器选择弹窗
- const selEquipOptions = ref([]);
- const kSelectPopEquipRef = ref(null);
- // 机器弹窗的确定按钮
- const selEquipConfirm = (e, e1) => {
- console.log("e", e);
- console.log("e1", e1);
- if (e.length > 0) {
- // const list = [];
- // // 根据id找到对应的name
- // selEquipOptions.value.forEach(item => {
- // e.forEach(item1 => {
- // if (item.id === item1) {
- // list.push(item.name);
- // }
- // })
- // })
- // console.log("list", list)
- cofficentForm.value.equipmentNames = e.join(",");
- addParams.equipmentIds = e1.join(",");
- console.log("equipmentNames", cofficentForm.value.equipmentNames);
- console.log("equipmentIds", addParams.equipmentIds);
- } else {
- cofficentForm.value.equipmentNames = "";
- addParams.equipmentIds = '';
- }
- kSelectPopEquipRef.value.selPopClose();
- };
- return {
- user,
- pageTitle,
- roleShow,
- roleText,
- roleOptions,
- onRoleFinish,
- equipmentIdShow,
- equipmentIdText,
- equipmentIdsOptions,
- onEquipmentIdFinish,
- ...toRefs(addParams),
- onSubmit,
- deleteLoginUserFun,
- selEquipOptions,
- kSelectPopEquipRef,
- selEquipConfirm,
- cofficentForm,
- busiEquipInpClk,
- havePassword,
- passwordPlaceholder,
- isUserName,
- searchEquData,
- };
- },
- };
- </script>
- <style lang="less" scoped>
- @import "../../common/style/common.less";
- </style>
|