deviceSet.vue 20 KB

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