deviceSet.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569
  1. <template>
  2. <!-- 设备信息修改 -->
  3. <div class="deviceSetPage flex-col">
  4. <s-header :name="$t('device.deviceInformation')" :noback="false"></s-header>
  5. <van-form @submit="updateDeviceFun">
  6. <div class="bd1 flex-col">
  7. <div class="bd3 flex-col">
  8. <div class="mod1 flex-col">
  9. <span class="word2">{{ $t("device.essentialInformation") }}</span>
  10. <img class="pic1" referrerpolicy="no-referrer"
  11. src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a" />
  12. </div>
  13. <div class="mod2 flex-col"></div>
  14. </div>
  15. <van-field readonly v-model="deviceDetal.clientId" :label="`${$t('device.equipmentCode')}`" placeholder="" />
  16. <div class="cust_vantBorder">
  17. <van-field required clearable v-model="deviceDetal.name" name="name"
  18. :label="`${$t('device.equipmentNameLabel')}`" :placeholder="$t('device.equipmentNamePlaceholder')" :rules="[
  19. {
  20. required: true,
  21. message: $t('device.equipmentNamePlaceholder'),
  22. },
  23. ]" />
  24. <van-field clearable v-model="deviceDetal.selfName" :label="`${$t('device.equipmentRemarksLabel')}`"
  25. :placeholder="$t('device.equipmentRemarksPlaceholder')" />
  26. <div></div>
  27. </div>
  28. <van-field readonly v-model="deviceDetal.adminUserName" :label="`${$t('device.affiliatedMerchant')}`" />
  29. <!-- 地区 -->
  30. <!-- <div v-if="areaShow" class="bd7 l-flex-between">
  31. <div class="l-flex-RC">
  32. <div class="cust_vantBorder">
  33. <div class="filedInpPad">
  34. <van-field colon @click-input="fieldValueInpClk" readonly clearable v-model="fieldValue"
  35. :label="`${$t('device.affiliatedArea')}`" :placeholder="$t('user.regionPlace')">
  36. <template #right-icon>
  37. <div class="l-flex-RC">
  38. <van-icon v-if="fieldValue" @click="
  39. fieldValue = '';
  40. deviceDetal.areaId = '';
  41. " class="o-mr-6" name="clear" />
  42. <van-icon @click="fieldValueInpClk" name="arrow-down" />
  43. </div>
  44. </template>
  45. <template #extra>
  46. <van-icon @click="areaShow = !areaShow" size="20" name="edit" />
  47. </template>
  48. </van-field>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. <div v-else class="bd7 l-flex-between">
  54. <van-field colon readonly v-model="fieldValue" :label="`${$t('device.affiliatedArea')}`" placeholder="">
  55. <template #extra>
  56. <van-icon @click="areaShow = !areaShow" size="20" name="edit" />
  57. </template>
  58. </van-field>
  59. </div> -->
  60. <van-field readonly v-model="deviceDetal.equimentType" :label="`${$t('device.machineType')}`" placeholder="" />
  61. <!-- mg280才有到期时间 -->
  62. <template v-if="deviceDetal?.equimentType?.indexOf('mg280') !== -1">
  63. <van-field readonly v-model="deviceDetal.lastUseDate" :label="`${$t('device.expirationTime')}`"
  64. placeholder="" />
  65. </template>
  66. <div class="bd9 l-f">
  67. <van-field readonly :label="`${$t('device.equipmentLabel')}`" placeholder="">
  68. <template #input>
  69. <div class="box2 l-flex-RC l-flex-w" v-if="tagsList.arr.length > 0">
  70. <div class="word8 o-mr-6 o-p-6 c-radius-2 o-mb-10" v-for="(item, index) in tagsList.arr" :key="index">
  71. {{ item.name }}
  72. </div>
  73. </div>
  74. </template>
  75. <template #extra>
  76. <div @click="toTagSet" class="ImageText1 flex-col">
  77. <div class="box3 flex-row justify-between">
  78. <div class="bd10 flex-col"></div>
  79. <div class="TextGroup1 flex-col">
  80. <span class="word9">{{ $t("device.edit") }}</span>
  81. </div>
  82. </div>
  83. </div>
  84. </template>
  85. </van-field>
  86. </div>
  87. <div class="custom-line"></div>
  88. <div v-if="isAdmind" class="bd9 l-f">
  89. <van-field readonly :label="`${$t('device.adRule')}`" placeholder="">
  90. <template #input>
  91. <div class="box2 l-flex-RC l-flex-w" v-if="adRuleList.length > 0">
  92. <div class="word8 o-mr-6 o-p-6 c-radius-2 o-mb-5" v-for="(item, index) in adRuleList" :key="index">
  93. {{ item.name }}
  94. </div>
  95. </div>
  96. </template>
  97. <template #extra>
  98. <div @click="toEditAdRule" class="ImageText1 flex-col">
  99. <div class="box3 flex-row justify-between">
  100. <div class="bd10 flex-col"></div>
  101. <div class="TextGroup1 flex-col">
  102. <span class="word9">{{ $t("device.edit") }}</span>
  103. </div>
  104. </div>
  105. </div>
  106. </template>
  107. </van-field>
  108. <div class="custom-line"></div>
  109. </div>
  110. <!-- 优惠券 -->
  111. <van-field readonly :label="`${$t('device.coupon')}`" placeholder=""
  112. v-if="user.type < 2 && user.ifForeign === '0'">
  113. <template #input>
  114. <div class="l-flex-RC">
  115. <span>{{ couponStatusNameComp }}</span>
  116. <van-switch class="o-ml-5" @change="couponStatusChg" v-model="deviceDetal.couponStatus" size="23px"
  117. active-value="1" inactive-value="0" />
  118. </div>
  119. </template>
  120. </van-field>
  121. <div class="cust_vantBorder">
  122. <van-field required clearable v-model="deviceDetal.operationalName" name="operationalName"
  123. :label="`${$t('device.nameOfOperatorLabel')}`" :placeholder="$t('device.nameOfOperatorPlaceholder')" :rules="[
  124. {
  125. required: true,
  126. message: $t('device.nameOfOperatorPlaceholder'),
  127. },
  128. ]" />
  129. <van-field required clearable v-model="deviceDetal.operationalPhone" name="operationalPhone"
  130. :label="`${$t('device.operatorTelephoneLabel')}`" :placeholder="$t('device.operatorTelephonePlaceholder')"
  131. :rules="[
  132. {
  133. required: true,
  134. message: $t('device.operatorTelephonePlaceholder'),
  135. },
  136. ]" />
  137. <!-- <van-field clearable v-model="deviceDetal.timeRuleId" :label="`${$t('device.advertisingRulesLabel')}:`"
  138. :placeholder="$t('device.advertisingRulesPlaceholder')" /> -->
  139. </div>
  140. <div class="custom-line"></div>
  141. <div class="cust_vantBorder">
  142. <van-field clearable label-width="32%" v-model="deviceDetal.messageReceiver1"
  143. :label="`${$t('device.messageReceiver1')}`" :placeholder="$t('device.equipmentmessageReceiverPlaceholder')" />
  144. <van-field clearable label-width="32%" v-model="deviceDetal.messageReceiver2"
  145. :label="`${$t('device.messageReceiver2')}`" :placeholder="$t('device.equipmentmessageReceiverPlaceholder')" />
  146. <van-field clearable label-width="32%" v-model="deviceDetal.messageReceiver3"
  147. :label="`${$t('device.messageReceiver3')}`" :placeholder="$t('device.equipmentmessageReceiverPlaceholder')" />
  148. </div>
  149. <div class="custom-line"></div>
  150. <!-- <div class="cust_vantBorder">
  151. </div>
  152. <div class="cust_vantBorder">
  153. </div> -->
  154. <!-- 支付方式 -->
  155. <!-- <van-field v-if="user.ifForeign == '0'" colon readonly label-width="18%" :label="`${$t('device.paymentMethod')}`"
  156. placeholder="">
  157. <template #input>
  158. <div class="van-cell__value van-field__value radioBox">
  159. <van-radio-group v-model="deviceDetal.payType" direction="horizontal">
  160. <van-radio name="0" icon-size="18px">{{
  161. $t("device.onlinePayment")
  162. }}</van-radio>
  163. <van-radio name="1" icon-size="18px">{{
  164. $t("device.offlinePayment")
  165. }}</van-radio>
  166. <van-radio name="2" icon-size="18px">{{
  167. $t("device.onlineAndOfflinePayment")
  168. }}</van-radio>
  169. </van-radio-group>
  170. </div>
  171. </template>
  172. </van-field> -->
  173. <!-- 新支付方式,暂时没用屏蔽掉,后续再添加 -->
  174. <!-- <van-field v-model="paymentValue" is-link readonly :label="`${$t('device.paymentMethod')}`" placeholder="选择支付方式"
  175. @click="showPayment = true" />
  176. <van-popup v-model:show="showPayment" round position="bottom">
  177. <van-picker :columns="paymentColumns" @cancel="showPayment = false" @confirm="onConfirm" />
  178. </van-popup> -->
  179. <!-- 通信通道 -->
  180. <template v-if="isAdmind">
  181. <van-field readonly :label="`${$t('device.communiChannel')}`" placeholder="">
  182. <template #input>
  183. <div class="van-cell__value van-field__value radioBox">
  184. <van-radio-group v-model="deviceDetal.channel" direction="horizontal">
  185. <van-radio name="1" icon-size="16px">{{
  186. $t("device.tweets")
  187. }}</van-radio>
  188. <van-radio name="2" icon-size="16px">{{
  189. $t("device.mq")
  190. }}</van-radio>
  191. </van-radio-group>
  192. </div>
  193. </template>
  194. </van-field>
  195. </template>
  196. <!-- 花型种类 -->
  197. <template v-if="isAdmind && machineType === '0'">
  198. <van-field readonly :label="`${$t('device.flowerType')}`" placeholder="">
  199. <template #input>
  200. <div class="van-cell__value van-field__value radioBox">
  201. <van-radio-group v-model="deviceDetal.flowers" direction="horizontal">
  202. <van-radio name="18" icon-size="16px">18</van-radio>
  203. <van-radio name="22" icon-size="16px">22</van-radio>
  204. <van-radio name="26" icon-size="16px">26</van-radio>
  205. <van-radio name="30" icon-size="16px">30</van-radio>
  206. <van-radio name="42" icon-size="16px">42</van-radio>
  207. </van-radio-group>
  208. </div>
  209. </template>
  210. </van-field>
  211. </template>
  212. <!-- 版本号 -->
  213. <van-field readonly v-model="deviceDetal.apkVersion" :label="`${$t('device.versionNo')}`" placeholder="" />
  214. <!-- url -->
  215. <div v-if="isAdmind">
  216. <van-field center clearable class="input1" v-model="deviceDetal.url" :label="$t('device.url')"
  217. :placeholder="$t('device.urlPlace')">
  218. <template #button>
  219. <van-button class="updateBtn" @click="updateUrlClk" type="primary">&nbsp;&nbsp;{{ $t("device.update")
  220. }}&nbsp;&nbsp;</van-button>
  221. </template>
  222. </van-field>
  223. </div>
  224. <div class="l-flex-center o-mtb-30">
  225. <van-button round type="primary" class="info7" native-type="submit">{{
  226. $t("device.submitAndPushDeviceUpdates") }}</van-button>
  227. </div>
  228. </div>
  229. </van-form>
  230. <!-- 地区弹窗 -->
  231. <kCascader @getareaname="getAreaName" :selectId="deviceDetal.areaId" @areapopfinish="areaPopFinish"
  232. ref="kCascaderRef"></kCascader>
  233. <!-- 更新弹窗 -->
  234. <kDialog :dialogTitle="$t('user.logOutTips')" :cancelBtnTxt="$t('user.cancelLog')"
  235. :confirmBtnTxt="$t('user.confirmLog')" ref="kDialogRef" :dialogContent="$t('device.sureUpdate')"
  236. @confirmclk="confirmClk">
  237. </kDialog>
  238. </div>
  239. </template>
  240. <script>
  241. // 导入接口
  242. import { Api_getAdRuleDetail } from "@/service/advertManage";
  243. // 引入弹窗
  244. import kDialog from "@/components/commom/kDialog/index.vue";
  245. // 导入公用方法
  246. import { setLocal, getLoginUser } from "@/common/js/utils";
  247. // 导入vuex
  248. import { useStore } from "vuex";
  249. // 导入接口
  250. import { Api_getGetEquipmentToLabel } from "@/service/labelMan";
  251. // 导入地区弹窗
  252. import kCascader from "@/components/commom/kCascader/index.vue";
  253. import { computed, onMounted, reactive, ref } from "vue";
  254. import sHeader from "@/components/SimpleHeader";
  255. import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
  256. import {
  257. getDeviceDetal,
  258. updateDevice,
  259. Api_getTApkInfo_updateApk,
  260. Api_getDiscCodeStatus,
  261. } from "@/service/device/index";
  262. import { showFailToast, showSuccessToast, showToast } from "vant";
  263. import { useI18n } from "vue-i18n";
  264. import dateUtil from "@/utils/dateUtil";
  265. import { styleUrl } from "../../common/js/utils";
  266. export default {
  267. name: "deviceSet",
  268. components: { sHeader, kCascader, kDialog },
  269. // // 路由守卫
  270. // beforeRouteEnter(to, from, next) {
  271. // console.log("to", to);
  272. // console.log("from", from);
  273. // // 不能获取组件实例
  274. // // 因为当守卫执行前,组件实例还没被创建
  275. // if (from.name === "editTag") {
  276. // let tagList = sessionStorage.getItem("tagList") || "[]";
  277. // this.tagsList.arr = JSON.parse(tagList);
  278. // sessionStorage.removeItem("tagList");
  279. // }
  280. // next();
  281. // },
  282. setup() {
  283. // 广告规则列表
  284. const adRuleList = ref([]);
  285. // 获取用户信息
  286. const user = getLoginUser();
  287. // 导入vuex
  288. const store = useStore();
  289. const { t } = useI18n();
  290. const route = useRoute();
  291. const router = useRouter();
  292. const isUpdate = ref(false);
  293. const deviceDetal = ref({
  294. name: "",
  295. selfName: "",
  296. operationalName: "",
  297. operationalPhone: "",
  298. timeRuleId: "",
  299. payType: "",
  300. channel: "",
  301. flowers: "18",
  302. messageReceiver1: "",
  303. messageReceiver2: "",
  304. messageReceiver3: "",
  305. });
  306. let tagsList = reactive({
  307. arr: [],
  308. });
  309. onBeforeRouteLeave((to, from, next) => {
  310. if (isUpdate.value) {
  311. console.log("to.meta.keepAlive", to.meta.keepAlive);
  312. to.meta.keepAlive = false;
  313. }
  314. next();
  315. });
  316. // 过滤时间
  317. const filterDate = (date) => {
  318. if (date) {
  319. return dateUtil.formateDate(new Date(date), dateUtil.DATE_yyyy_MM_dd());
  320. }
  321. return "";
  322. };
  323. // 是否管理员
  324. const isAdmind = ref(false);
  325. // 设备类型
  326. const machineType = ref('0');
  327. const paymentColumns = [
  328. {
  329. text: t("device.onlinePayment"),
  330. value: 0
  331. },
  332. {
  333. text: t("device.offlinePayment"),
  334. value: 1
  335. },
  336. {
  337. text: t("device.onlineAndOfflinePayment"),
  338. value: 2
  339. }
  340. ];
  341. const paymentValue = ref('');
  342. const showPayment = ref(false);
  343. const onConfirm = ({ selectedOptions }) => {
  344. paymentValue.value = selectedOptions[0].text;
  345. deviceDetal.value.payType = selectedOptions[0].value;
  346. console.log(deviceDetal.value.payType);
  347. showPayment.value = false;
  348. };
  349. // 初始化页面获取列表
  350. onMounted(async () => {
  351. // 加载样式
  352. styleUrl('deviceSet');
  353. // 从标签设置回来
  354. // let tagList = sessionStorage.getItem("tagList") || "[]";
  355. // tagsList.arr = JSON.parse(tagList);
  356. // sessionStorage.removeItem("tagList");
  357. getDeviceDetalFun();
  358. getLabelDetail();
  359. // 如果user.type<2那么则是公司人员
  360. if (user.type < 2) {
  361. isAdmind.value = true;
  362. }
  363. });
  364. // 获取标签
  365. const getLabelDetail = () => {
  366. Api_getGetEquipmentToLabel({ equipmentId: route.query.deviceId }).then(
  367. (res) => {
  368. // console.log("res", res);
  369. if (res.data.code === "00000") {
  370. tagsList.arr = res.data.data;
  371. // 储存数据到vuex
  372. store.commit("MUTA_LABELLIST", tagsList.arr);
  373. setLocal("deviceSet-tagsList", JSON.stringify(tagsList.arr));
  374. }
  375. }
  376. );
  377. };
  378. // 获取设备列表数据
  379. const getDeviceDetalFun = async () => {
  380. const { data } = await getDeviceDetal({ id: route.query.deviceId });
  381. if (data.code === "00000") {
  382. if (data.data.lastUseDate) {
  383. data.data.lastUseDate = filterDate(data.data.lastUseDate);
  384. }
  385. // channel如果为null,那么默认是个推
  386. if (!data.data.channel) {
  387. data.data.channel = "1";
  388. }
  389. // couponStatus如果是null,默认是关闭
  390. if (data.data.couponStatus != 1) {
  391. data.data.couponStatus = "0";
  392. }
  393. deviceDetal.value = data.data;
  394. // 查询地址回显
  395. kCascaderRef.value.init(deviceDetal.value.areaId);
  396. // 获取广告规则详情
  397. if (isAdmind.value) {
  398. if (data.data.timeRuleId) {
  399. getDetail(data.data.timeRuleId);
  400. }
  401. }
  402. if (data.data.machineType === '1') {
  403. machineType.value = '1';
  404. }
  405. } else {
  406. showFailToast(data.message);
  407. }
  408. };
  409. // 获取广告规则详情
  410. const getDetail = (id) => {
  411. Api_getAdRuleDetail({ id }).then((res) => {
  412. const resData = res.data.data;
  413. // console.log("resData", resData);
  414. adRuleList.value = [{ name: resData.name, id: resData.id }];
  415. });
  416. };
  417. // 修改设备详情
  418. const updateDeviceFun = async () => {
  419. let params = Object.assign({}, deviceDetal.value);
  420. params = [params].map((item) => {
  421. return {
  422. id: item.id,
  423. name: item.name,
  424. selfName: item.selfName,
  425. areaId: item.areaId,
  426. contactName: item.contactName,
  427. contactPhone: item.contactPhone,
  428. flowers: item.flowers,
  429. operationalName: item.operationalName,
  430. operationalPhone: item.operationalPhone,
  431. timeRuleId: item.timeRuleId,
  432. channel: item.channel,
  433. messageReceiver1: item.messageReceiver1,
  434. messageReceiver2: item.messageReceiver2,
  435. messageReceiver3: item.messageReceiver3,
  436. payType: item.payType
  437. };
  438. })[0];
  439. console.log(params);
  440. const { data } = await updateDevice(params);
  441. if (data.code === "00000") {
  442. isUpdate.value = true;
  443. showSuccessToast(t("device.modificationSucceeded"));
  444. router.push({ path: "/device" });
  445. } else {
  446. showFailToast(data.message);
  447. }
  448. };
  449. // 点击去到编辑标签页
  450. const toTagSet = () => {
  451. router.push({
  452. path: "/editTag",
  453. query: { deviceId: route.query.deviceId },
  454. });
  455. };
  456. // 地区的显示
  457. const areaShow = ref(false);
  458. // 地区弹窗
  459. const fieldValue = ref("");
  460. const kCascaderRef = ref(null);
  461. // 点击地区输入框
  462. const fieldValueInpClk = () => {
  463. kCascaderRef.value.openPop();
  464. };
  465. // 选择地区完成
  466. const areaPopFinish = async (e) => {
  467. console.log("e", e);
  468. fieldValue.value = e.selectName;
  469. deviceDetal.value.areaId = e.selectId;
  470. };
  471. // 获取回显的值
  472. const getAreaName = (e) => {
  473. fieldValue.value = e;
  474. };
  475. // 退出登录弹窗
  476. const kDialogRef = ref(null);
  477. // 点击更新url
  478. const updateUrlClk = () => {
  479. if (!deviceDetal.value.url) {
  480. showToast(t("device.urlPlace"));
  481. return;
  482. }
  483. kDialogRef.value.openDialog();
  484. };
  485. // 点击更新弹窗的确定
  486. const confirmClk = () => {
  487. Api_getTApkInfo_updateApk({
  488. id: deviceDetal.value.id,
  489. url: deviceDetal.value.url,
  490. }).then((res) => {
  491. showToast(res.data.message);
  492. setTimeout(() => {
  493. getDeviceDetalFun();
  494. }, 1000);
  495. });
  496. };
  497. // 点击优惠券开关
  498. const couponStatusChg = (couponStatus) => {
  499. Api_getDiscCodeStatus({
  500. equipmentId: deviceDetal.value.id,
  501. couponStatus,
  502. }).then((res) => {
  503. showToast(res.data.message);
  504. setTimeout(() => {
  505. getDeviceDetalFun();
  506. }, 1500);
  507. });
  508. };
  509. const couponStatusNameComp = computed(() => {
  510. if (deviceDetal.value.couponStatus != 1) {
  511. return t("device.close");
  512. } else {
  513. return t("device.open");
  514. }
  515. });
  516. // 点击广告规则的编辑
  517. const toEditAdRule = () => {
  518. router.push({
  519. path: "/editAdRule",
  520. query: { deviceId: route.query.deviceId, adRuleList: JSON.stringify(adRuleList.value) },
  521. });
  522. };
  523. return {
  524. deviceDetal,
  525. updateDeviceFun,
  526. filterDate,
  527. toTagSet,
  528. tagsList,
  529. areaShow,
  530. fieldValue,
  531. kCascaderRef,
  532. fieldValueInpClk,
  533. areaPopFinish,
  534. getAreaName,
  535. isAdmind,
  536. updateUrlClk,
  537. confirmClk,
  538. kDialogRef,
  539. couponStatusChg,
  540. couponStatusNameComp,
  541. toEditAdRule,
  542. adRuleList,
  543. machineType,
  544. user,
  545. paymentValue,
  546. paymentColumns,
  547. onConfirm,
  548. showPayment,
  549. };
  550. },
  551. };
  552. </script>
  553. <style lang="less" scoped>
  554. @import "../../common/style/common";
  555. @import "../../styles/deviceSet/index.less";
  556. .custom-line {
  557. height: 1px;
  558. background-color: #ebedf0;
  559. /* 设置线条颜色 */
  560. // margin-bottom: 10px; /* 根据需要调整线条与上方内容的间距 */
  561. margin: 0 15px;
  562. }
  563. </style>