广告管理

imcs-bt-fe/imcs-bt-fe/imcs-ui/src/views/zuihou/ad/ad/components/Edit.vue

@@ -2,7 +2,7 @@
  * @Author: wangj
  * @Date: 2023-02-19 13:54:14
  * @LastEditors: @EXtreeDesigner
- * @LastEditTime: 2023-03-05 23:55:15
+ * @LastEditTime: 2023-03-19 16:33:35
  * @FilePath: \imcs-ui\src\views\zuihou\ad\ad\components\Edit.vue
  * @Description: 
 -->
@@ -24,25 +24,25 @@
       label-width="180px"
       ref="form"
     >
-    <!-- 广告名称 -->
+      <!-- 广告名称 -->
       <el-form-item :label="$t('ad.add.0')" prop="adName">
         <el-input v-model.trim="place.adName" :placeholder="$t('ad.add.0')" />
       </el-form-item>
       <!-- 广告客户 -->
       <el-form-item :label="$t('ad.add.1')" prop="customerId">
-          <el-select
-            class="from-item"
-            v-model="place.customerId"
-            :placeholder="$t('ad.add.1')"
+        <el-select
+          class="from-item"
+          v-model="place.customerId"
+          :placeholder="$t('ad.add.1')"
+        >
+          <el-option
+            v-for="item in adcList"
+            :key="item.id"
+            :label="item.customerName"
+            :value="item.id"
           >
-            <el-option
-              v-for="item in adcList"
-              :key="item.id"
-              :label="item.customerName"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
+          </el-option>
+        </el-select>
       </el-form-item>
       <!-- 广告视频 -->
       <el-form-item :label="$t('ad.add.2')" prop="contactPhone">
@@ -52,18 +52,19 @@
           :http-request="handleUpload"
           :limit="1"
           :on-remove="clearfile"
-          :file-list="fileList">
+          :file-list="fileList"
+        >
           <el-button size="small" type="primary">点击上传</el-button>
         </el-upload>
       </el-form-item>
       <!-- 投放设备 -->
       <el-form-item :label="$t('ad.add.3')" prop="plcEvnType">
         <el-cascader
-        v-model="place.advertisementEquList"
-        :props="{ multiple: true }"
-        class="from-item"
-        :options="epuipList"
-        clearable
+          v-model="place.advertisementEquList"
+          :props="{ multiple: true, expandTrigger: 'hover' }"
+          class="from-item"
+          :options="epuipList"
+          clearable
         ></el-cascader>
       </el-form-item>
       <!-- 投放开始时间 -->
@@ -74,7 +75,8 @@
             v-model="place.deliveryStartTime"
             class="from-item"
             type="datetime"
-            placeholder="选择投放开始时间">
+            placeholder="选择投放开始时间"
+          >
           </el-date-picker>
         </template>
       </el-form-item>
@@ -86,7 +88,8 @@
             v-model="place.deliveryEndTime"
             class="from-item"
             type="datetime"
-            placeholder="选择投放结束时间">
+            placeholder="选择投放结束时间"
+          >
           </el-date-picker>
         </template>
       </el-form-item>
@@ -109,8 +112,11 @@
 <script>
 import elDragDialog from "@/directive/el-drag-dialog";
 import { ad } from "@/api/adSomeelse";
-import { Loading } from 'element-ui';
-import {regionData, CodeToText, TextToCode} from 'element-china-area-data';
+import placeApi from "@/api/Place.js";
+import { Loading } from "element-ui";
+import { regionData, CodeToText, TextToCode } from "element-china-area-data";
+import { initQueryParams } from "@/utils/commons";
+const { place } = placeApi;
 export default {
   name: "PlaceEdit",
   directives: { elDragDialog },
@@ -126,15 +132,15 @@ export default {
     },
   },
   data() {
-    const fileList = []
+    const fileList = [];
     const uploadcheck = (rule, value, callback) => {
-          callback();
-        // if (fileList.length === 1) {
-        //   callback();
-        // } else {
-        //   callback(new Error('请上传广告视频'));
-        // }
-      };
+      callback();
+      // if (fileList.length === 1) {
+      //   callback();
+      // } else {
+      //   callback(new Error('请上传广告视频'));
+      // }
+    };
     return {
       confirmDisabled: false,
       place: this.initPlace(),
@@ -155,14 +161,13 @@ export default {
             trigger: "visible-change",
           },
         ],
-        contactPhone: [
-          { validator: uploadcheck, trigger: 'change' }
-        ],
+        contactPhone: [{ validator: uploadcheck, trigger: "change" }],
       },
-      adcList:[],
-      upLoadUrl:ad.uploade,
+      adcList: [],
+      upLoadUrl: ad.uploade,
       fileList,
-      epuipList:[],
+      epuipList: [],
+      arealist: null, // 场地列表（包含区域信息）
     };
   },
   computed: {
@@ -180,66 +185,101 @@ export default {
     },
     res: function () {
       const r = JSON.parse(JSON.stringify(this.place));
-      r.advertisementEquList = this.place.advertisementEquList.map(e => {
+      r.advertisementEquList = this.place.advertisementEquList.map((e) => {
         return {
-          deliveryEquId:e[2]
-        }
+          deliveryEquId: e[2],
+        };
       });
-      r.adVideo = this.fileList[0]
+      r.adVideo = this.fileList[0];
       return r;
     },
   },
-  created(){
+  async created() {
     // 广告客户
-    ad.adc({"customerStatus": "1"}).then(e => {
-      if (e.status == 200 && e.data.code === 0){
-        this.adcList = e.data.data
+    ad.adc({ customerStatus: "1" }).then((e) => {
+      if (e.status == 200 && e.data.code === 0) {
+        this.adcList = e.data.data;
       }
-    })
+    });
+    const data = await placeApi
+      .page(initQueryParams())
+      .catch((e) => console.error(e));
+    // .then(response => {
+    //     const res = response.data;
+    //     if (res.isSuccess) {
+    //       this.tableData = res.data;
+    //     }
+    //   })
+    const arealist = data.data.data.records.map((e) => {
+      return {
+        place: {
+          value: e.id,
+          label: e.plcName,
+        },
+        area: {
+          value: e.regionIds,
+          label: e.regions,
+        },
+      };
+    });
+    this.arealist = arealist;
     // 设备列表
     ad.epuip({
-      "size": 99999,
-      "current": 1,
-      "sort": "id",
-      "order": "descending",
-      "model": {},
-      "map": {},
-      "timeRange": null
-    }).then(e =>{
-      if (e.status == 200 && e.data.code === 0){
-        const tree = {}
-        e.data.data.records.forEach((equip,index) => {
+      size: 99999,
+      current: 1,
+      sort: "id",
+      order: "descending",
+      model: {},
+      map: {},
+      timeRange: null,
+    }).then((e) => {
+      if (e.status == 200 && e.data.code === 0) {
+        const tree = new Map();
+        const empty = {
+          place: {
+            value: null,
+            label: null,
+          },
+          area: {
+            value: null,
+            label: null,
+          },
+        };
+        e.data.data.records.forEach((equip, index) => {
+          const { area, place } =
+            arealist.filter((e) => e.place.value == equip.placeId)[0] || empty;
           // 区域
-          if (!tree[equip.areaIds]){
-            tree[equip.areaIds] = {}
+          if (!tree.has(area)) {
+            tree.set(area, new Map());
           }
           // 场地
-          if (!tree[equip.areaIds][equip.placeId]){
-            tree[equip.areaIds][equip.placeId] = {label:equip.placeName,children:[]}
+          if (!tree.get(area).has(place)) {
+            // if (!(tree[area][place])) {
+            tree.get(area).set(place, []);
           }
           // 设备
-          tree[equip.areaIds][equip.placeId].children.push({value:equip.id, label:equip.name})
-        })
-        for (let areaIds in tree){
-          const area = tree[areaIds]
+          tree.get(area).get(place).push({
+            value: equip.id,
+            label: equip.name,
+          });
+        });
+        for (const [area, places] of tree) {
           this.epuipList.push({
-            value:areaIds,
-            label:areaIds.split(',').map(e => CodeToText[e]).join('-'),
-            children:(area=>{
-              const areaList = []
-              for (let placeid in area){
-                const place = area[placeid]
+            ...area,
+            children: ((area) => {
+              const areaList = [];
+              for (const [place, children] of area) {
                 areaList.push({
-                  value:placeid,
-                  ...place
-                })
+                  ...place,
+                  children,
+                });
               }
-              return areaList
-            })(area)
-          })
+              return areaList;
+            })(places),
+          });
         }
       }
-    })
+    });
   },
   mounted() {
     window.onresize = () => {
@@ -249,17 +289,25 @@ export default {
     };
   },
   methods: {
-    setPlace(e){
-      if (e){
-        const {row} = e
-        this.place = JSON.parse(JSON.stringify(row))
-        this.place.customerId = row.advertisementCustomer && row.advertisementCustomer.id;
-        this.place.advertisementEquList = row.advertisementEquList.map(e => {
-          return [e.areaIds, e.placeId, e.deliveryEquId]
-        })
-        this.fileList.push(row.adVideo)
-      }else{
-        this.place = this.initPlace()
+    setPlace(e) {
+      if (e) {
+        const { row } = e;
+        this.place = JSON.parse(JSON.stringify(row));
+        this.place.customerId =
+          row.advertisementCustomer && row.advertisementCustomer.id;
+        this.place.advertisementEquList = row.advertisementEquList.map((e) => {
+          const info = this.arealist.filter(
+            (e) => e.place.value == e.placeId
+          )[0];
+          return [
+            (info && info.area.value) || null,
+            e.placeId || null,
+            e.deliveryEquId,
+          ];
+        });
+        this.fileList.push(row.adVideo);
+      } else {
+        this.place = this.initPlace();
       }
     },
     initPlace() {
@@ -267,40 +315,40 @@ export default {
         id: "",
         customerId: "",
         adName: "",
-        advertisementEquList:[],
+        advertisementEquList: [],
         deliveryStartTime: "",
         deliveryEndTime: "",
       };
     },
-    clearfile(){
-      this.fileList = []
+    clearfile() {
+      this.fileList = [];
     },
-    handleUpload(e){
-      if (!this.fileList[0]){
-        this.fileList.pop()
+    handleUpload(e) {
+      if (!this.fileList[0]) {
+        this.fileList.pop();
       }
-      if (this.fileList.length === 0){
-        const loadingInstance = Loading.service({text:'正在上传'});
+      if (this.fileList.length === 0) {
+        const loadingInstance = Loading.service({ text: "正在上传" });
         ad.uploade({
-          file:e.file,
-          bizld: '业务主键',
-          bizType:'ADVERTISEMENT_AD_VIDEO',
-          isSingle:true
-        }).then(e => {
-          if (e.status === 200 && e.data.code === 0){
-            this.fileList.push(e.data.data.url)
+          file: e.file,
+          bizld: "业务主键",
+          bizType: "ADVERTISEMENT_AD_VIDEO",
+          isSingle: true,
+        }).then((e) => {
+          if (e.status === 200 && e.data.code === 0) {
+            this.fileList.push(e.data.data.url);
             loadingInstance.close();
             this.$message({
-              message: '上传成功！',
-              type: 'success'
+              message: "上传成功！",
+              type: "success",
             });
           }
-        })
-      }else{
+        });
+      } else {
         this.$message({
-        message: '只能上传一个文件',
-        type: 'warning'
-      });
+          message: "只能上传一个文件",
+          type: "warning",
+        });
       }
     },
     initWidth() {
@@ -345,8 +393,7 @@ export default {
       const vm = this;
 
       vm.confirmDisabled = true;
-      ad
-        .save(this.res)
+      ad.save(this.res)
         .then((response) => {
           const res = response.data;
           if (res.isSuccess) {
@@ -363,8 +410,7 @@ export default {
     update() {
       const vm = this;
       vm.confirmDisabled = true;
-      ad
-        .update(this.res)
+      ad.update(this.res)
         .then((response) => {
           const res = response.data;
           if (res.isSuccess) {