add.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  1. <template>
  2. <!-- 新增账号 -->
  3. <div class="accountPerPage flex-col">
  4. <s-header :name="pageTitle" :noback="false"></s-header>
  5. <div class="accountPerBox flex-col">
  6. <van-form @submit="onSubmit">
  7. <van-field v-model="username" name="username" :label="$t('accountPer.usernameLabel')" :readonly="isUserName"
  8. :placeholder="$t('accountPer.usernamePlaceholder')" :rules="[
  9. { required: true, message: $t('accountPer.usernamePlaceholder') },
  10. ]" />
  11. <van-field v-model="password" name="password" type="password" :label="$t('accountPer.passwordLabel')"
  12. :placeholder="passwordPlaceholder" :rules="[
  13. { required: havePassword, message: $t('accountPer.passwordPlaceholder') },
  14. ]" />
  15. <van-field v-model="name" name="name" :label="$t('accountPer.nameLabel')"
  16. :placeholder="$t('accountPer.namePlaceholder')" :rules="[
  17. { required: true, message: $t('accountPer.namePlaceholder') },
  18. ]" />
  19. <van-field v-model="phone" name="phone" :label="$t('accountPer.phoneLabel')"
  20. :placeholder="$t('accountPer.phonePlaceholder')" :rules="[
  21. { required: true, message: $t('accountPer.phonePlaceholder') },
  22. ]" />
  23. <van-field name="radio" label="类型" v-if="user.type === 0">
  24. <template #input>
  25. <van-radio-group v-model="type" direction="horizontal">
  26. <van-radio name="1">公司人员</van-radio>
  27. <van-radio name="4">营销经理</van-radio>
  28. </van-radio-group>
  29. </template>
  30. </van-field>
  31. <van-field v-model="roleText" is-link readonly :label="$t('accountPer.roleLabel')"
  32. :placeholder="$t('accountPer.rolePlaceholder')" @click="roleShow = true" :rules="[{ required: true, message: $t('accountPer.rolePlaceholder') }]"/>
  33. <div class="van-cell van-field">
  34. <div class="van-cell__title van-field__label">
  35. <label id="van-field-4-label" for="van-field-4-input">{{ $t("accountPer.setUp") }}</label>
  36. </div>
  37. <div class="van-cell__value">
  38. <div class="van-field__body">
  39. <van-switch v-model="isEnabled" size="20px" class="o-mr-10" /><span>{{
  40. $t("accountPer.startOrNot")
  41. }}</span>
  42. </div>
  43. </div>
  44. </div>
  45. <van-field :border="false" @click-input="busiEquipInpClk" readonly clearable
  46. v-model="cofficentForm.equipmentNames" :label="$t('accountPer.manageMachinesLabel')"
  47. :placeholder="$t('accountPer.manageMachinesPlaceholder')" >
  48. <!-- :rules="[{ required: true, message: $t('accountPer.manageMachinesPlaceholder') }]" -->
  49. <template #right-icon>
  50. <div class="l-flex-RC">
  51. <van-icon v-if="cofficentForm.equipmentNames" @click="cofficentForm.equipmentNames = ''; equipmentIds = ''"
  52. class="o-mr-6" name="clear" />
  53. <van-icon @click="busiEquipInpClk" name="arrow" />
  54. </div>
  55. </template>
  56. </van-field>
  57. <!-- 操作 -->
  58. <van-row justify="space-around" style="padding: 1em">
  59. <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em" native-type="submit">{{
  60. $t("accountPer.submit") }}</van-button>
  61. </van-row>
  62. <van-row justify="space-around" style="padding: 1em" v-if="pageTitle === $t('accountPer.modifyAccount')">
  63. <van-button span="5" round type="danger" style="height: 2em; padding: 0 2em" @click="deleteLoginUserFun()">{{
  64. $t("accountPer.delete") }}</van-button>
  65. </van-row>
  66. </van-form>
  67. </div>
  68. <van-popup v-model:show="roleShow" round position="bottom">
  69. <van-cascader v-model="roleList" :title="$t('accountPer.rolePlaceholder')" :options="roleOptions"
  70. @close="roleShow = false" @finish="onRoleFinish" />
  71. </van-popup>
  72. <!-- 机器弹窗 -->
  73. <kSelectPop @selconfirm="selEquipConfirm" ref="kSelectPopEquipRef" :selOptions="selEquipOptions" @searchData="searchEquData"
  74. :selTitleAndName="['name', 'id']"></kSelectPop>
  75. </div>
  76. </template>
  77. <script>
  78. // 导入选择组件
  79. import kSelectPop from "../../components/commom/kSelectPop/index.vue";
  80. import { onMounted, reactive, toRefs, ref } from "vue";
  81. import sHeader from "../../components/SimpleHeader";
  82. import { showFailToast, showSuccessToast, showToast } from 'vant';
  83. import {
  84. getSysRoleList,
  85. getEquipmentList,
  86. addLoginUser,
  87. updataLoginUser,
  88. deleteLoginUser,
  89. } from "../../service/accountPar/index";
  90. import { getLoginUser, styleUrl } from "../../common/js/utils";
  91. import md5 from "js-md5";
  92. import { useRouter } from "vue-router";
  93. import { useI18n } from "vue-i18n";
  94. export default {
  95. components: { sHeader, kSelectPop },
  96. setup() {
  97. const { t } = useI18n();
  98. const router = useRouter();
  99. const user = getLoginUser();
  100. const roleShow = ref(false);
  101. const roleText = ref("");
  102. const roleOptions = ref([]);
  103. const onRoleFinish = ({ selectedOptions }) => {
  104. roleShow.value = false;
  105. roleText.value = selectedOptions[0].text;
  106. };
  107. const equipmentIdShow = ref(false);
  108. const equipmentIdText = ref("");
  109. const equipmentIdsOptions = ref([]);
  110. const onEquipmentIdFinish = ({ selectedOptions }) => {
  111. equipmentIdShow.value = false;
  112. equipmentIdText.value = selectedOptions[0].text;
  113. };
  114. const passwordPlaceholder = ref("");
  115. const havePassword = ref(true);
  116. const isUserName = ref(false);
  117. let addParams = reactive({
  118. username: "",
  119. password: "",
  120. name: "",
  121. phone: "",
  122. type: user.type === 0 ? "1" : "",
  123. isEnabled: true,
  124. roleList: "",
  125. equipmentIds: "",
  126. companyType: "0",
  127. });
  128. const cofficentForm = ref({
  129. equipmentNames: "",
  130. });
  131. const pageTitle = ref("");
  132. onMounted(async () => {
  133. // 加载样式
  134. styleUrl('accountPer');
  135. let accoutPerSet = localStorage.getItem("accoutPerSet");
  136. if (accoutPerSet) {
  137. pageTitle.value = t("accountPer.modifyAccount");
  138. accoutPerSet = JSON.parse(accoutPerSet);
  139. addParams.id = accoutPerSet.id;
  140. addParams.username = accoutPerSet.username;
  141. isUserName.value = true;
  142. addParams.name = accoutPerSet.name;
  143. addParams.phone = accoutPerSet.phone;
  144. addParams.isEnabled = accoutPerSet.isEnabled;
  145. addParams.roleList = accoutPerSet.roleList[0];
  146. addParams.equipmentIds = accoutPerSet.equipmentIds;
  147. havePassword.value = false;
  148. passwordPlaceholder.value = t('accountPer.editPasswordPlaceholder')
  149. } else {
  150. pageTitle.value = t("accountPer.addAccount");
  151. passwordPlaceholder.value = t('accountPer.passwordPlaceholder');
  152. havePassword.value = true;
  153. }
  154. getSysRoleListFun();
  155. getEquipmentListFun();
  156. });
  157. // 获取角色下拉列表
  158. const getSysRoleListFun = async () => {
  159. const { data } = await getSysRoleList({ adminId: user.id });
  160. if (data.code === "00000") {
  161. roleOptions.value = data.data.map((item) => {
  162. return { text: item.label, value: item.value };
  163. });
  164. if (pageTitle.value === t("accountPer.modifyAccount")) {
  165. roleText.value = roleOptions.value.filter(
  166. (v) => v.value === addParams.roleList
  167. )[0].text;
  168. }
  169. } else {
  170. showFailToast(data.message);
  171. }
  172. };
  173. const searchEquData = (e) => {
  174. // console.log("设备列表", e);
  175. selEquipOptions.value = e;
  176. }
  177. // 获取机器下拉
  178. const getEquipmentListFun = async () => {
  179. const { data } = await getEquipmentList({ adminId: user.id });
  180. if (data.code === "00000") {
  181. if (data.data.length > 0) {
  182. // 将id转成字符串类型,解决选中问题
  183. data.data.forEach((item) => {
  184. item.id = item.id + "";
  185. });
  186. }
  187. selEquipOptions.value = data.data;
  188. if (addParams.equipmentIds != null) {
  189. const list = addParams.equipmentIds.split(',');
  190. const listName = [];
  191. // 根据id找到对应的name
  192. selEquipOptions.value.forEach(item => {
  193. list.forEach(item1 => {
  194. if (item.id === item1) {
  195. listName.push(item.name);
  196. }
  197. })
  198. })
  199. cofficentForm.value.equipmentNames = listName.join(",");
  200. }
  201. } else {
  202. showFailToast(data.message);
  203. }
  204. };
  205. const onSubmit = async () => {
  206. let params = { adminId: user.id };
  207. params = Object.assign({ adminId: user.id }, addParams);
  208. if (params.password !== "") {
  209. params.password = md5(params.password);
  210. }
  211. params.roleList = [params.roleList];
  212. // if (params.equipmentIds !== 'all') {
  213. // params.equipmentIds= [params.equipmentIds];
  214. // }
  215. if (pageTitle.value === t("accountPer.modifyAccount")) {
  216. // delete params.password;
  217. const { data } = await updataLoginUser(params);
  218. if (data.code === "00000") {
  219. showSuccessToast(t("accountPer.successfullyModifiedTheAccount"));
  220. // router.push("/accountPer");
  221. router.replace("/accountPer");
  222. } else {
  223. showFailToast(t("accountPer.failedToModifyTheAccount"), data.message);
  224. }
  225. console.log("onSubmit", data);
  226. } else {
  227. const { data } = await addLoginUser(params);
  228. if (data.code === "00000") {
  229. showSuccessToast(t("accountPer.accountAddedSuccessfully"));
  230. // router.push("/accountPer");
  231. router.replace("/accountPer");
  232. } else if (data.code === 'A0201') {
  233. showToast(t("accountPer.accountNameExists"));
  234. } else {
  235. showFailToast(t("accountPer.failedToAddAccount"), data.message);
  236. }
  237. console.log("onSubmit", data);
  238. }
  239. };
  240. const deleteLoginUserFun = async () => {
  241. const params = {
  242. adminId: user.id,
  243. id: addParams.id,
  244. };
  245. const { data } = await deleteLoginUser(params);
  246. if (data.code === "00000") {
  247. showSuccessToast(t("accountPer.successfullyDeletedTheAccount"));
  248. router.push("/accountPer");
  249. } else {
  250. showFailToast(t("accountPer.failedToDeleteTheAccount"), data.message);
  251. }
  252. };
  253. // 点击机器列表
  254. const busiEquipInpClk = () => {
  255. if (cofficentForm.value.equipmentNames) {
  256. let list = cofficentForm.value.equipmentNames.split(",");
  257. console.log(list, "list");
  258. kSelectPopEquipRef.value.selPopOpen(list);
  259. } else {
  260. kSelectPopEquipRef.value.selPopOpen();
  261. }
  262. };
  263. // 机器选择弹窗
  264. const selEquipOptions = ref([]);
  265. const kSelectPopEquipRef = ref(null);
  266. // 机器弹窗的确定按钮
  267. const selEquipConfirm = (e, e1) => {
  268. console.log("e", e);
  269. console.log("e1", e1);
  270. if (e.length > 0) {
  271. // const list = [];
  272. // // 根据id找到对应的name
  273. // selEquipOptions.value.forEach(item => {
  274. // e.forEach(item1 => {
  275. // if (item.id === item1) {
  276. // list.push(item.name);
  277. // }
  278. // })
  279. // })
  280. // console.log("list", list)
  281. cofficentForm.value.equipmentNames = e.join(",");
  282. addParams.equipmentIds = e1.join(",");
  283. console.log("equipmentNames", cofficentForm.value.equipmentNames);
  284. console.log("equipmentIds", addParams.equipmentIds);
  285. } else {
  286. cofficentForm.value.equipmentNames = "";
  287. addParams.equipmentIds = '';
  288. }
  289. kSelectPopEquipRef.value.selPopClose();
  290. };
  291. return {
  292. user,
  293. pageTitle,
  294. roleShow,
  295. roleText,
  296. roleOptions,
  297. onRoleFinish,
  298. equipmentIdShow,
  299. equipmentIdText,
  300. equipmentIdsOptions,
  301. onEquipmentIdFinish,
  302. ...toRefs(addParams),
  303. onSubmit,
  304. deleteLoginUserFun,
  305. selEquipOptions,
  306. kSelectPopEquipRef,
  307. selEquipConfirm,
  308. cofficentForm,
  309. busiEquipInpClk,
  310. havePassword,
  311. passwordPlaceholder,
  312. isUserName,
  313. searchEquData,
  314. };
  315. },
  316. };
  317. </script>
  318. <style lang="less" scoped>
  319. @import "../../common/style/common.less";
  320. </style>