1. 新增

src/views/tourism/membershipManagement/equityCard/formBox/equityCardAllocationForm.vue

@@ -75,31 +75,18 @@
             </el-checkbox-group>
           </el-form-item> -->
           <div class="form-title"><span>权益规则</span></div>
-          <el-form-item label="门票折扣权益：">
+          <!-- <el-form-item label="门票折扣权益：">
             <div style="display: flex;align-items: center;">
               <el-form-item label="基本折扣：" prop="benefitList" label-width="100px">
                 <el-input-number style="width: 150px;" v-model="form.benefitList" controls-position="right" placeholder="请输入基本折扣"></el-input-number>
                 <span style="padding-bottom: 15px;">%</span>
               </el-form-item>
-              <!-- <el-button style="margin-left: 15px;" v-if="!form.discountGoodList||form.discountGoodList.length==0" type="primary" @click="addClassifyList">添加单品</el-button> -->
             </div>
-            
-            <!-- <div v-for="(item,index) in form.discountGoodList" :key="index" style="margin-top: 10px;display: flex;align-items: center;">
-              <el-form-item label="单品折扣：" label-width="100px">
-                <el-select v-model="form.discountGoodList[index].goodId" clearable placeholder="请选择单品">
-                  <el-option
-                    v-for="item in scenicAreaProducts"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
-                <el-input-number style="width: 150px;margin-left: 20px;" v-model="form.discountGoodList[index].benefitList" placeholder="请输入单品折扣" controls-position="right"></el-input-number>
-                <span style="padding-bottom: 15px;">%</span>
-              </el-form-item>
-              <el-button style="margin-left: 15px;" v-if="form.discountGoodList.length==(index+1)" type="primary" @click="addClassifyList">添加单品</el-button>
-              <el-button style="margin-left: 15px;" type="danger" @click="clearClassifyList(index)">移除</el-button>
-            </div> -->
+          </el-form-item> -->
+          <el-form-item label="门票免费：" v-if="tableListCopy.length>0">
+            <el-checkbox-group v-model="form.projectId">
+              <el-checkbox v-for="(item,index) in tableListCopy" :key="index" :label="item.projectId">{{ item.projectName }}</el-checkbox>
+            </el-checkbox-group>
           </el-form-item>
           <el-form-item label="持卡须知：" prop="remark">
             <el-input style="width: 100%;" type="textarea" v-model="form.remark" placeholder="请输入持卡须知" maxlength="200"
@@ -125,7 +112,8 @@
 import {
   getTableDeatilsByIdApi,
   updateTableApi,
-  addTableApi
+  addTableApi,
+  listTableApi,
 } from '@/api/CURD'
 
 export default {
@@ -143,13 +131,15 @@ export default {
         add: '/merchant/equityCard', // 新增地址
         details: '/merchant/equityCard/detail', // 规格详情
         edit: '/merchant/equityCard', // 编辑地址
+        list: '/merchant/equityCard/projectList', // 获取查询景区项目列表
       },
       performId: null,
       form: {
         id: undefined,
         activateType: [0],
         validityType: 0,
-        validityDayS: 2
+        validityDayS: 2,
+        projectId: []
       },
       rules: {
         name: [{ required: true, message: "请输入权益卡名称", trigger: ["change", "blur"] }],
@@ -166,8 +156,12 @@ export default {
       },
       tableList: [],// 景点产品关联
       scenicAreaProducts: [],
+      tableListCopy: [],
     };
   },
+  created(){
+    this.getListCopy() 
+  },
   methods: {
     async initData(title, model, row) {
       this.title = title
@@ -182,7 +176,8 @@ export default {
           ...row,
           activateType: ["0"],
           validityType: 0,
-          validityDayS: 2
+          validityDayS: 2,
+          projectId: []
         })
         this.radioInputs(this.form.validityDayS)
         this.formStatus = 1
@@ -202,6 +197,16 @@ export default {
         }
       })
     },
+    /** 查询权益卡类型列表 */
+    getListCopy() {
+      listTableApi(this.configUrl.list,{}).then(response => {
+          this.tableListCopy = response.data
+        }
+      ).catch (error=>{
+        console.error('获取列表失败!!!!',error)
+        this.tableListCopy = [];
+      }) 
+    },
     /** 获取详情 */
     async getTableDeatilsFun(row) {
       const id = row.id
@@ -213,8 +218,11 @@ export default {
             ...res.data,
             activateType: res.data.activateType?res.data.activateType.split('|'):[]
           }
+          obj['projectId'] = []
           if(res.data.benefitList && res.data.benefitList.length>0) {
-            obj['benefitList'] = res.data.benefitList[0].benefitValue
+            res.data.benefitList.forEach((item,index)=>{
+              obj['projectId'].push(item.projectId.toString())
+            })
           }
           this.$set(this, 'form', JSON.parse(JSON.stringify(obj)))
           this.radioInputs(obj.validityDay)
@@ -246,22 +254,29 @@ export default {
           this.loadingText = "提交数据中..."
           this.loading = true
           let params = JSON.parse(JSON.stringify(this.form))
+          if(this.form.projectId){
+            params['benefitList'] = []
+            this.form.projectId.forEach((item)=>{
+              params['benefitList'].push({
+                benefitType: 0,
+                projectId: item
+              })
+            })
+          }
           if(params.validityDayS == -1) {
             params.validityDay = -1
           }
           delete params.validityDayS
+          delete params.projectId
+
           if(this.model == 'ADD') {
             addTableApi(this.configUrl.edit, {
               ...params,
-              benefitList: [{
-                benefitType: 0,
-                benefitValue: params.benefitList
-              }],
               activateType: params.activateType?params.activateType.join('|'):null,
             }).then(response => {
               this.$modal.msgSuccess(`${this.form.id ? '编辑' : '新增'}成功`);
               this.loading = false
-              this.$set(this, 'form', {activateType:[]})
+              this.$set(this, 'form', {activateType:[],projectId: []})
               this.$nextTick(() => {
                 this.$refs.form.clearValidate();
               })
@@ -274,15 +289,11 @@ export default {
           }else {
             updateTableApi(this.configUrl.edit, {
               ...params,
-              benefitList: [{
-                benefitType: 0,
-                benefitValue: params.benefitList
-              }],
               activateType: params.activateType?params.activateType.join('|'):null,
             }).then(response => {
               this.$modal.msgSuccess(`${this.form.id ? '编辑' : '新增'}成功`);
               this.loading = false
-              this.$set(this, 'form', {activateType:[]})
+              this.$set(this, 'form', {activateType:[],projectId: []})
               this.$nextTick(() => {
                 this.$refs.form.clearValidate();
               })
@@ -305,7 +316,7 @@ export default {
     reset() {
       if (this.$refs["form"]) {
         //this.$refs["form"].resetFields();
-        this.$set(this, 'form', {activateType:[]})
+        this.$set(this, 'form', {activateType:[],projectId: []})
         this.$nextTick(() => {
           this.$refs["form"].clearValidate();
         })

src/views/tourism/membershipManagement/physicalCard/formBox/physicalCardTemplateForm.vue

@@ -8,7 +8,7 @@
     @close="cancel">
     <div class="form-dialog-box" v-loading="loading" :element-loading-text="loadingText"
       element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
-      <div class="form-make" :style="{ '--crad-zm': form.mainBg ? `url(${form.mainBg})`:none }">
+      <div class="form-make" :style="{ '--crad-zm': form.mainBg ? `url(${form.mainBg})`:'none' }">
         <div class="form-make_zm">
           <div class="form-make_zm-title">正面</div>
           <div class="form-make_zm-info">
@@ -30,12 +30,55 @@
                 >
                 <el-button size="small" type="primary">上传底图</el-button>
               </el-upload>
-              <el-button style="margin-left: 10px;" size="small" type="primary" @click="addText('zm')">添加文本</el-button>
-              <el-button size="small" type="primary" @click="addImage('zm')">添加图片</el-button>
-              <el-button size="small" type="primary" @click="addQR('zm')">添加二维</el-button>
+              <el-button style="margin-left: 10px;" size="small" type="primary" @click="centerDialogVisibleOpen('addText','zm')">添加文本</el-button>
+              <!-- <el-button size="small" type="primary" @click="centerDialogVisibleOpen('addImage','zm')">添加图片</el-button> -->
+              <el-button size="small" type="primary" @click="centerDialogVisibleOpen('addQR','zm')">添加二维</el-button>
             </div>
             <!-- 样式  -->
             <div class="form-make_zm-style">
+              <div class="form-make_zm-style-bgm"></div>
+              <div ref="styleInfo" id="styleInfo" class="form-make_zm-style-info">
+
+              </div>
+            </div>
+          </div>
+          <div style="padding: 20px;">
+            <span>编辑</span> 
+            <div id="styleInfo_list">
+              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+                <div v-if="ruleForm.type == 'text'">
+                  <el-form-item label="文本名称" prop="textInfo">
+                    <el-input v-model="ruleForm.textInfo"></el-input>
+                  </el-form-item>
+                  <el-form-item label="字体大小" prop="size">
+                    <el-input-number v-model="ruleForm.size" controls-position="right" :min="12" :max="100"></el-input-number>
+                  </el-form-item>
+                  <el-form-item label="字体颜色" prop="color">
+                    <el-color-picker v-model="ruleForm.color"></el-color-picker>
+                  </el-form-item>
+                </div>
+                <div v-if="editFun == 'addQR'">
+                  <el-form-item label="宽度" prop="width">
+                    <el-input-number v-model="ruleForm.width" controls-position="right" :min="1"></el-input-number>
+                  </el-form-item>
+                  <el-form-item label="高度" prop="height">
+                    <el-input-number v-model="ruleForm.height" controls-position="right" :min="1"></el-input-number>
+                  </el-form-item>
+                </div>
+                <el-form-item label="关联字段" prop="replace">
+                  <el-select v-model="ruleForm.replace" placeholder="请选择关联字段">
+                    <el-option
+                      v-for="item in dict.type.tourism_make_key"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="updateFun('ruleForm')">更新</el-button>
+                </el-form-item>
+              </el-form>
             </div>
           </div>
         </div>
@@ -53,6 +96,51 @@
       </el-button>
     </span>
     <!-- 添加或修改对话框 End -->
+
+    <el-dialog
+      :title="addTitle"
+      :visible.sync="centerDialogVisible"
+      width="30%"
+      append-to-body
+      center>
+      <div>
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <div v-if="editFun == 'addText'">
+            <el-form-item label="文本名称" prop="textInfo">
+              <el-input v-model="ruleForm.textInfo"></el-input>
+            </el-form-item>
+            <el-form-item label="字体大小" prop="size">
+              <el-input-number v-model="ruleForm.size" controls-position="right" :min="12" :max="100"></el-input-number>
+            </el-form-item>
+            <el-form-item label="字体颜色" prop="color">
+              <el-color-picker v-model="ruleForm.color"></el-color-picker>
+            </el-form-item>
+          </div>
+          <div v-if="editFun == 'addQR'">
+            <el-form-item label="宽度" prop="width">
+              <el-input-number v-model="ruleForm.width" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+            <el-form-item label="高度" prop="height">
+              <el-input-number v-model="ruleForm.height" controls-position="right" :min="1"></el-input-number>
+            </el-form-item>
+          </div>
+          <el-form-item label="关联字段" prop="replace">
+            <el-select v-model="ruleForm.replace" placeholder="请选择关联字段">
+              <el-option
+                v-for="item in dict.type.tourism_make_key"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="centerDialogVisiblePush">确 定</el-button>
+      </span>
+    </el-dialog>
   </el-dialog>
 </template>
 
@@ -65,6 +153,7 @@ import {
 
 export default {
   name: "addAndEdit",
+  dicts: ['tourism_make_key'],
   data() {
     return {
       title: "",
@@ -84,10 +173,27 @@ export default {
         mainBg: null,
         backBg: null,
       },
-      rules: {},
       //  上传文件
       actionUrl: process.env.VUE_APP_BASE_API + process.env.VUE_APP_UPLOAD_IMAGE,
       actionUrlLoading: false,
+
+      addTitle: '添加文本',
+      centerDialogVisible: false,
+      ruleForm: {},
+      rules: {
+        textInfo: [
+          { required: true, message: '请输入文本内容', trigger: ['blur', 'change'] },
+        ],
+        size: [
+          { required: true, message: '请输入字体大小', trigger: ['blur', 'change'] },
+        ],
+        color: [
+          { required: true, message: '请输入字体颜色', trigger: ['blur', 'change'] },
+        ]
+      },
+      editType: '',
+      editFun: '',
+      
     };
   },
   methods: {
@@ -231,13 +337,104 @@ export default {
     },
 
     addText(type){
-
+      let div = document.createElement('div')
+      div.setAttribute('class', 'form-make_zm-style-item');
+      div.setAttribute('id', 'text_'+ Number((new Date()).getTime()));
+      div.setAttribute('replace', 'text_'+ this.ruleForm.replace);
+
+      div.setAttribute('draggable', 'true');
+      div.style.color = this.ruleForm.color
+      div.style.fontSize = this.ruleForm.size + 'px'
+      div.style.backgroundColor = '#fff'
+      div.innerHTML = this.ruleForm.textInfo
+      div.addEventListener('dragend',this.dragendFun)
+      div.addEventListener('click',this.clickFun)
+      let box = document.getElementById('styleInfo')
+      box.appendChild(div)
+      this.centerDialogVisible = false
     },
     addImage(type){
 
     },
     addQR(type){
+      let div = document.createElement('div')
+      div.setAttribute('class', 'form-make_zm-style-item');
+      div.setAttribute('id', 'qr_'+ Number((new Date()).getTime()));
+      div.setAttribute('replace', 'qr_'+ this.ruleForm.replace);
+
+      div.setAttribute('draggable', 'true');
+      div.style.width = this.ruleForm.width  + 'px'
+      div.style.height = this.ruleForm.height + 'px'
+      div.style.backgroundColor = '#fff'
+      div.innerHTML = "二维码位置"
+      div.style.color = '#000'
+      div.style.fontSize = '16px'
+      div.addEventListener('dragend',this.dragendFun)
+      div.addEventListener('click',this.clickFun)
+      let box = document.getElementById('styleInfo')
+      
+      box.appendChild(div)
+      // let box1 = document.getElementById('styleInfo_list')
+      // box1.appendChild(div)
+      this.centerDialogVisible = false
+    },
+    
+    /**  拖拽事件  */
+    dragendFun(e){
+      let draggedItem = document.getElementById(e.target.id);
+      let dropzone = document.getElementById('styleInfo');
+      // 获取元素相对于父元素的位置
+      let rect = draggedItem.getBoundingClientRect();
+      let parentRect = dropzone.getBoundingClientRect();
+    
+      // 计算元素在父元素中的位置
+      let left =e.clientX - parentRect.x;
+      let top =e.clientY - parentRect.y;
+      console.log("dragend事件====",e.clientX,e.clientY)
+      // 设置元素的新位置
+      draggedItem.style.left = left + 'px';
+      draggedItem.style.top = top + 'px';
+    },
+    clickFun(e) {
+      let draggedItem = document.getElementById(e.target.id);
+      let content = draggedItem.getAttribute('replace')
+      let info = draggedItem.innerHTML
+      if(content.indexOf('text_') > -1) {
+        this.$set(this,'ruleForm',{
+          id: e.target.id,
+          type: 'text',
+          textInfo: info,
+          size: Number(draggedItem.style.fontSize.replace('px','')),
+          color: draggedItem.style.color,
+          replace: content.replace('text_','')
+        })
+      }
+      if(content.indexOf('qr_') > -1) {
 
+      }
+      console.log(this.ruleForm)
+    },
+    /**    */
+    centerDialogVisibleOpen(fun,type) {
+      this.editType = type
+      this.editFun = fun
+      this.centerDialogVisible = true
+    },
+    centerDialogVisiblePush() {
+      switch(this.editFun){
+        case 'addText' : this.addText(this.editType); break;
+        case 'addImage' : this.addImage(this.editType); break;
+        case 'addQR' : this.addQR(this.editType); break;
+      }
+    },
+    updateFun() {
+      let div = document.getElementById(this.ruleForm.id)
+      if(this.ruleForm.type == 'text') {
+        div.setAttribute('replace', 'text_'+ this.ruleForm.replace);
+        div.style.color = this.ruleForm.color
+        div.style.fontSize = this.ruleForm.size
+      }
+      
     }
   },
 };
@@ -439,9 +636,28 @@ export default {
         height: var(--crad-h);
         border: 1px dashed #000;
         border-radius: 20px;
-        background-image: var(--crad-zm);
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
+        box-sizing: border-box;
+        overflow: hidden;
+        position: relative;
+        .form-make_zm-style-bgm {
+          width: 100%;
+          height: 100%;
+          background-image: var(--crad-zm);
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          border-radius: 20px;
+        }
+        .form-make_zm-style-info {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          z-index: 9;
+          top: 0;
+          left: 0;
+          border-radius: 20px;
+          box-sizing: border-box;
+          overflow: hidden;
+        }
       }
     }
   }
@@ -454,4 +670,17 @@ export default {
 .custom-class-box {
   z-index: 999999 !important;
 }
+.form-make_zm-style-item {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  color: #000;
+  font-size: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
 </style>

src/views/tourism/membershipManagement/physicalCard/formBox/printForm.vue

@@ -2,7 +2,7 @@
   <el-dialog 
   :title="title" 
   :visible.sync="open" 
-  width="1000" 
+  width="80%" 
   append-to-body 
   :close-on-click-modal="false"
     @close="cancel">
@@ -12,9 +12,6 @@
         <div class="form-make_zm">
           <div class="form-make_zm-title">正面</div>
           <div class="form-make_zm-info">
-            <!-- 工具  -->
-            <div class="form-make_zm-tool">
-            </div>
             <!-- 样式  -->
             <div class="form-make_zm-style" ref="myElement">
             </div>
@@ -24,27 +21,19 @@
         <div class="form-make_fm">
           <div class="form-make_fm-title">反面</div>
           <div class="form-make_fm-info">
-            <!-- 工具  -->
-            <div class="form-make_fm-tool">
-            </div>
             <!-- 样式  -->
-            <div class="form-make_fm-style" ref="myElement1" style="position: relative;">
-              <div 
-              v-if="isQrCode"
-              id="#barcode"
-              style="
-              width: 267px;
-              height: 93px;
-              position: absolute;
-              z-index: 99;
-              bottom: 46px;
-              background-color: #fff;
-              display: flex;
-              justify-content: center;
-              box-sizing: border-box;
-              right: 48px;">
-                <barcode :value="cardNo" format="CODE128" :width="width" height="51"></barcode>  
+            <div class="form-make_fm-style" style="position: relative;">
+              <div class="form-make_fm-style-bgm" ref="myElement1">
+
               </div>
+              <div class="form-make_fm-style-text" ref="myElement2">
+                <div 
+                v-if="isQrCode"
+                id="barcode">
+                  <barcode :value="cardNo" format="CODE128" :width="width" height="48"></barcode>  
+                </div>
+              </div>
+              
             </div>
           </div>
         </div>
@@ -90,8 +79,8 @@ export default {
         print:'/zebra/card/print/io/upload'
       },
       isQrCode: false,
-      bgm1: require('./zm.jpg'),
-      bgm2: require('./fm.jpg'),
+      bgm1: require('./1_0.png') ,//require('./zm.jpg'),
+      bgm2: require('./1_1.png'), // require('./fm.jpg')
       cardNo: '',
       width: 3
     };
@@ -174,12 +163,13 @@ export default {
         this.loading = true
         let cardImgFrontFile = await this.captureCanvas('myElement')
         let cardImgBackFile = await this.captureCanvas('myElement1')
+        let cardFontBackFilee = await this.captureCanvas('myElement2')
         const formData = new FormData();
         formData.append("ip", '172.16.90.128');
         formData.append("cardImgFrontFile", cardImgFrontFile);
         formData.append("cardFontFrontFile", null);
         formData.append("cardImgBackFile", cardImgBackFile);
-        formData.append("cardFontBackFilee", null);
+        formData.append("cardFontBackFilee", cardFontBackFilee);
         let res1 = await fetch('https://zebra.dev.gztjy.top/zebra/card/print/io/upload', {  
           method: 'POST', // 或者 'GET'  
           // headers: { 
@@ -444,15 +434,16 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   width: 100%;
   height: 100%;
   --crad-zm: none;
   --crad-fm: none;
-  --crad-w: 860px;
-  --crad-h: 540px;
+  --crad-w: 862px;
+  --crad-h: 542px;
   .form-make_zm {
     display: flex;
-    height: 600px;
+    height: var(--crad-h);
     .form-make_zm-title {
       width: 20px;
       height: 100%;
@@ -462,20 +453,12 @@ export default {
       align-items: center;
       font-size: 24px;
       font-family: 600;
-      padding: 20px 20px;
+      padding: 0 20px;
       box-sizing: border-box;
     }
     .form-make_zm-info {
       width: var(--crad-w);
       height: 100%;
-      .form-make_zm-tool{
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: calc( 100% - var(--crad-h) );
-        box-sizing: border-box;
-        ///padding-bottom: 10px;
-      }
       .form-make_zm-style {
         width: 100%;
         height: var(--crad-h);
@@ -489,7 +472,8 @@ export default {
   }
   .form-make_fm {
     display: flex;
-    height: 600px;
+    height: var(--crad-h);
+    margin-top: 10px;
     .form-make_fm-title {
       width: 20px;
       height: 100%;
@@ -505,25 +489,64 @@ export default {
     .form-make_fm-info {
       width: var(--crad-w);
       height: 100%;
-      .form-make_fm-tool{
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: calc( 100% - var(--crad-h) );
-        box-sizing: border-box;
-        ///padding-bottom: 10px;
-      }
       .form-make_fm-style {
         width: 100%;
         height: var(--crad-h);
         border: 1px dashed #000;
+        box-sizing: border-box;
+        position: relative;
         border-radius: 20px;
-        background-image: var(--crad-fm);
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
+        overflow: hidden;
+        .form-make_fm-style-bgm {
+          width: 100%;
+          height: 100%;
+          background-image: var(--crad-fm);
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          z-index: 88;
+          border-radius: 20px;
+          overflow: hidden;
+        }
+        .form-make_fm-style-text {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          z-index: 99;
+          border-radius: 20px;
+          overflow: hidden;
+        }
+        
       }
     }
   }
+  #barcode {
+    width: 323px;
+    height: 91px;
+    position: absolute;
+    z-index: 99;
+    bottom: 46px;
+    background-color: rgb(255, 255, 255);
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    right: 58px;
+
+    // width: 267px;
+    //           height: 93px;
+    //           position: absolute;
+    //           z-index: 99;
+    //           bottom: 46px;
+    //           background-color: #fff;
+    //           display: flex;
+    //           justify-content: center;
+    //           box-sizing: border-box;
+    //           right: 48px;
+  }
 }
 
 

src/views/tourism/statisticalReports/ticketDailyReport.vue

@@ -0,0 +1,308 @@
+<template>
+    <div class="app-container">
+      <el-row :gutter="20">
+        <!--用户数据-->
+        <el-col :span="24" :xs="24">
+          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="时间" prop="time" label-width="40px">
+                <el-date-picker
+                v-model="queryParams.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                value-format="yyyy-MM-dd"
+                end-placeholder="结束日期">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="订单来源" prop="ticketOrderSource">
+                <el-select v-model="queryParams.source" clearable placeholder="请选择订单来源">
+                <el-option
+                    v-for="dict in dict.type.ticket_order_source"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value">
+                </el-option>
+                </el-select>
+            </el-form-item>
+            
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+  
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                type="warning"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="configPermi.export"
+              >导出</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+          </el-row>
+  
+          <el-table v-loading="loading" border :data="tableList" :span-method="objectSpanMethod" @selection-change="handleSelectionChange">
+            <el-table-column label="日期报表" align="center" key="reportDate" prop="reportDate" v-if="columns[0].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="订单来源" align="center" key="ticketOrderSourceName" prop="ticketOrderSourceName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="订单张数(张)" align="center" key="orderBuyNum" prop="orderBuyNum" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="订单人数(人)" align="center" key="totalPeopleNum" prop="totalPeopleNum" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="销售金额(元)" align="center" key="orderPrice" prop="orderPrice" v-if="columns[4].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="验票金额(元)" align="center" key="usePrice" prop="usePrice" v-if="columns[5].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="退票人数(人)" align="center" key="backPeopleNum" prop="backPeopleNum" v-if="columns[6].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="退票金额(元)" align="center" key="backPrice" prop="backPrice" v-if="columns[7].visible" :show-overflow-tooltip="true" />
+            <el-table-column label="实际销售金额(元)" align="center" key="realOrderPrice" prop="realOrderPrice" v-if="columns[8].visible" :show-overflow-tooltip="true" />
+          </el-table>
+  
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </el-col>
+      </el-row>
+    </div>
+  </template>
+  
+  <script>
+  import { 
+    listTableApi, 
+    delTableParamsApi, 
+    addTableApi
+  } from "@/api/CURD";
+  import moment from "moment";
+  export default {
+    name: "ticketDailyReport",
+    dicts: ['ticket_order_source'],
+    data() {
+      return {
+        title: "票务日报表",// 通用标题
+        configPermi: {
+          export: ['statisticalReports:ticketDailyReport:export'],// 导出权限
+        },
+        configUrl: {
+          list: '/merchant/reportTicket/daily', // 列表地址
+          delect: '', // 删除地址
+          upload: '',// 导入地址
+          download:'', // 下载模板地址
+          export: '/merchant/reportTicket/exportDailyXls',// 导出地址
+          edit: '', // 编辑地址
+        },
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 用户表格数据
+        tableList: [],
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        dateRange: [],
+        // 控制列表是否显示
+        columns: [
+          { key: 0, label: `日期报表`, visible: true },
+          { key: 1, label: `订单来源`, visible: true },
+          { key: 2, label: `订单张数(张)`, visible: true },
+          { key: 3, label: `订单人数(人)`, visible: true },
+          { key: 4, label: `销售金额(元)`, visible: true },
+          { key: 6, label: `验票金额(元)`, visible: true },
+          { key: 7, label: `退票人数(人)`, visible: true },
+          { key: 8, label: `退票金额(元)`, visible: true },
+          { key: 9.5, label: `实际销售金额(元)`, visible: true },
+        ],
+        mergeObj: {}, // 用来记录需要合并行的下标
+        mergeArr: ['reportDate'] // 表格中的列名
+      };
+    },
+    created() {
+      this.$set(this.queryParams,'time',[moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')])
+      this.getList();
+    },
+    methods: {
+      // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+          // 判断列的属性
+          if(this.mergeArr.indexOf(column.property) !== -1) { 
+              // 判断其值是不是为0 
+              if(this.mergeObj[column.property][rowIndex]) { 
+                  return [this.mergeObj[column.property][rowIndex], 1]
+              } else {
+                  // 如果为0则为需要合并的行
+                  return [0, 0]; 
+              }
+          }
+      },
+      // getSpanArr方法
+      getSpanArr(data) {
+          this.mergeArr.forEach((key, index1) => {
+              let count = 0; // 用来记录需要合并行的起始位置
+              this.mergeObj[key] = []; // 记录每一列的合并信息
+              data.forEach((item, index) => {
+                  // index == 0表示数据为第一行，直接 push 一个 1
+                  if(index === 0) {
+                      this.mergeObj[key].push(1); 
+                  } else {
+                      // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
+                      if(item[key] === data[index - 1][key]) { 
+                          this.mergeObj[key][count] += 1;
+                          this.mergeObj[key].push(0);
+                      } else {
+                          // 如果当前行和上一行其值不相等 
+                          count = index; // 记录当前位置 
+                          this.mergeObj[key].push(1); // 重新push 一个 1
+                      }
+                  }
+              })
+          })
+      },
+      /** 查询用户列表 */
+      getList() {
+        if(!this.queryParams.time || this.queryParams.time.length == 0){
+          this.$modal.msgError(`请选择时间!!!`);
+          this.tableList = []
+          this.total = 0
+          return
+        }
+        this.loading = true;
+        let params = JSON.parse(JSON.stringify({
+            ...this.queryParams,
+            beginTime: this.queryParams.time&&this.queryParams.time[0]?this.queryParams.time[0]:null,
+            endTime: this.queryParams.time&&this.queryParams.time[1]?this.queryParams.time[1]:null,
+            ticketOrderSource: this.queryParams.ticketOrderSource ? this.queryParams.ticketOrderSource.join(','):''
+        }))
+        delete params.time;
+        listTableApi(
+          this.configUrl.list,
+          this.addDateRange(
+            params, 
+            this.dateRange)).then(response => {
+              this.tableList = response.rows;
+              this.getSpanArr(this.tableList)
+              this.total = response.total;
+              this.loading = false;
+          }
+        ).catch (error=>{
+          console.error('获取列表失败!!!!',error)
+          this.tableList = [];
+          this.total = 0;
+          this.loading = false
+        }) 
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.dateRange = [];
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 10,
+        }
+        this.handleQuery();
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id);
+        this.single = selection.length != 1;
+        this.multiple = !selection.length;
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        if(this.$refs.addAndEdit) {
+          this.$refs.addAndEdit.initData(this.title + '新增', "ADD",{})
+        }
+      },
+      /** 修改按钮操作 */
+      handleUpdate(row) {
+        if(this.$refs.addAndEdit) {
+          this.$refs.addAndEdit.initData(this.title + '编辑', "EDITInit",{...row})
+        }
+      },
+      handleDetails(row){
+        if(this.$refs.detailsBox) {
+          this.$refs.detailsBox.initData(this.title + '详情',"DEATILSInit", row)
+        }
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        const ids = row.id || this.ids;
+        this.$modal.confirm('是否确认删除数据项？').then( () => {
+          return delTableParamsApi(this.configUrl.delect,{
+            id: ids
+          });
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        }).catch((e) => {
+          console.error("删除失败====",e)
+        });
+      },
+      /** 导出按钮操作 */
+      handleExport() {
+        if(!this.queryParams.time || this.queryParams.time.length == 0){
+          this.$modal.msgError(`请选择时间!!!`);
+          return
+        }
+        let params = JSON.parse(JSON.stringify({
+            ...this.queryParams,
+            beginTime: this.queryParams.time&&this.queryParams.time[0]?this.queryParams.time[0]:null,
+            endTime: this.queryParams.time&&this.queryParams.time[1]?this.queryParams.time[1]:null,
+            ticketOrderSource: this.queryParams.ticketOrderSource ? this.queryParams.ticketOrderSource.join(','):''
+        }))
+        delete params.time;
+        delete params.pageNum
+        delete params.pageSize
+        this.downloadGet(this.configUrl.export, {
+          ...params
+        }, `${this.title }_${new Date().getTime()}.xlsx`)
+      },
+      /** 导入按钮操作 */
+      handleImport() {
+        if(this.$refs.upload) {
+          this.$refs.upload.initData({
+            width: '400px',
+            // 弹出层标题（用户导入）
+            title: this.title + "导入",
+            // 下载模板地址
+            importTemplate: this.configUrl.download,
+            // 上传的地址
+            url: this.configUrl.upload
+          })
+        }
+      },
+      /** 开/闭 园 */
+      openAttraction(row) {
+        console.log("row======",row)
+        this.$modal.confirm(`是否确认${row.status == 2 ? '关闭' : '打开'} ${row.name}景点吗？`).then( () => {
+          return addTableApi(this.configUrl.edit,{
+            ...row,
+            status: row.status == 1 ? 2 : 1
+          });
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess(`${row.status == 1 ? '打开' : '关闭'}成功`);
+        }).catch((e) => {
+          console.error("失败====",e)
+        });
+      },
+    }
+  };
+  </script>
+  

src/views/tourism/thirdParty/formBox/eventNotificationsForm.vue

@@ -0,0 +1,340 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    width="70%"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="form-dialog-box"
+    v-loading="loading"
+    :element-loading-text="loadingText"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0)">
+      <div
+        v-loading="loading"
+        :element-loading-text="''"
+        element-loading-spinner="''"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+        <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+          <div class="form-title"><span>基本信息</span></div>
+          <div style="display: flex;">
+            <el-form-item label="公告标题" prop="noticeTitle">
+              <el-input style="width: 350px;" v-model="form.noticeTitle" placeholder="请输入公告标题" maxlength="50" show-word-limit />
+            </el-form-item>
+            <el-form-item label="公告类型" prop="noticeType">
+              <el-select style="width: 350px;" clearable v-model="form.noticeType" placeholder="请选择公告类型">
+                <el-option
+                  v-for="dict in dict.type.tourism_notice_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio 
+                v-for="dict in dict.type.tourism_notice_status"
+                :label="dict.value"
+                >{{ dict.label }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="简介" prop="noticeSnapshot">
+              <el-input type="textarea" v-model="form.noticeSnapshot" placeholder="请输入简介" maxlength="150" show-word-limit />
+            </el-form-item>
+          <el-form-item label="内容" prop="noticeContent">
+            <editor ref="editor" v-model="form.noticeContent" :fileSize="20" :min-height="200" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer" v-if="formStatus==1">
+      <el-button @click="cancel">取消</el-button>
+      <el-button
+        type="primary"
+        @click="submitForm"
+        :loading="loading"
+        element-loading-text="提交中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      > 
+        {{ loading ? '提交中...' : '保存' }}
+      </el-button>
+    </span>
+    <!-- 添加或修改对话框 End -->
+  </el-dialog>
+</template>
+
+<script>
+import { 
+  getTableDeatilsByIdApi,
+  updateTableApi,
+  addTableApi
+ } from '@/api/CURD'
+import Editor from "@/components/Editor";
+
+export default {
+  name: "addAndEdit",
+  dicts: ['tourism_notice_type','tourism_notice_status'],
+  components: {Editor},
+  data() {
+    return {
+      title: "",
+      model: "", // EDIT: 编辑模式 ADD : 新增模式  EDITInit : 编辑模式（需要请求详情）
+      open: false,
+      loading: false,
+      loadingText: "拼命加载数据中...",
+      formStatus: null, // 0/null : 加载中 1 : 获取详情成功 2  : 获取详情失败 
+      configUrl: {
+        add: '/merchant/notice/insertOrUpdate', // 新增地址
+        details: '/merchant/notice/selectById', // 详情地址
+        edit: '/merchant/notice/insertOrUpdate', // 编辑地址
+      },
+      form: {
+        id: undefined,
+      },
+      rules: {
+        noticeTitle: [{ required: true, message: "请输入公告标题", trigger: ["change","blur"] }],
+        noticeType: [{ required: true, message: "请选择公告类型", trigger: ["change","blur"] }],
+        status: [{ required: true, message: "请选择状态", trigger: ["change","blur"] }],
+        noticeContent: [{ required: false, message: "请输入内容", trigger: ["change","blur"] }],
+        noticeSnapshot: [{ required: true, message: "请输入简介", trigger: ["change","blur"] }],
+      },
+      scenicAreaProducts: [],// 景点产品关联
+    };
+  },
+  methods: {
+    async initData(title , model,row){
+      this.title = title
+      this.open = true
+      this.loadingText = "拼命加载数据中..."
+      this.loading = true
+      this.model = model
+      this.formStatus = 0
+      if(model=='ADD') { // 新增
+        this.$set(this,'form',row)
+        this.formStatus = 1
+      }else if(model=='EDIT') { // 新增
+        let obj = {
+          ...row
+        }
+        this.$set(this,'form',obj)
+        this.formStatus = 1
+      }else if(model=='EDITInit') { // 新增
+        await this.getTableDeatilsFun(row)
+      }
+      this.loading = false
+      this.$nextTick(()=>{
+        if(this.$refs["form"]) {
+          this.$refs["form"].clearValidate();
+        }
+      })
+    },
+    /** 获取详情 */
+    async getTableDeatilsFun(row) {
+      const id = row.id
+      this.loading = true
+      try {
+        let res = await getTableDeatilsByIdApi(this.configUrl.details,{id})
+        if(res.code == 200) {
+          let obj = {
+            ...res.data
+          }
+          this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
+          this.formStatus = 1
+        }else {
+          this.$message.error('获取详情失败!!!');
+          this.formStatus = 2
+          this.loading = false
+          this.open = false;
+        }
+        this.loading = false
+      } catch (error) {
+        console.error('获取详情失败!!!!',error)
+        this.formStatus = 2
+        this.loading = false
+        this.open = false;
+      }
+    },
+    /**
+     * 保存
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.loadingText = "提交数据中..."
+          this.loading = true
+          if (this.model != 'ADD') {
+            addTableApi(
+              this.configUrl.edit,{
+                ...this.form
+              }).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.loading = false
+              this.open = false;
+              this.$emit('refresh')
+            }).catch(()=>{
+              this.$message.error("修改失败!!!");
+              this.loading = false
+            })
+          } else {
+            addTableApi(this.configUrl.edit,{
+                ...this.form
+              }).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.loading = false
+              this.open = false;
+              this.$emit('refresh')
+            }).catch(()=>{
+              this.$message.error("新增失败!!!");
+              this.loading = false
+            })
+          }
+        }
+      });
+    },
+    /**
+     * 重置
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    reset() {
+      if(this.$refs["form"]) {
+        this.$refs["form"].clearValidate();
+      }
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.reset();
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-dialog-box {
+  padding: 0 30px;
+  padding: 0 30px;
+  min-height: 50vh;
+  max-height: 65vh;
+  overflow-y: auto;
+  >div {
+    width: 100%;
+    min-height: 50vh;
+  }
+  .form-title {
+    padding: 0 0 10px 0;
+    span {
+      display: flex;
+      color: rgba(65,80,88,1);
+      font-size: 16px;
+      font-family: SourceHanSansSC;
+      font-weight: 700;
+      line-height: 23px;
+      border-left: 4px solid rgb(22, 132, 252);
+      padding-left: 10px;
+    }
+    
+  }
+  ::v-deep .ql-editor {
+    height: 400px;
+  }
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
+}
+.el-table{
+  .upload-btn {
+    width: 100px;
+    height: 100px;
+    background-color: #fbfdff;
+    border: dashed 1px #c0ccda;
+    border-radius: 5px;
+    i {
+      font-size: 30px;
+      margin-top: 20px;
+    }
+    &-text {
+      margin-top: -10px;
+    }
+  }
+  .avatar {
+    cursor: pointer;
+  }
+}
+
+.area-container {
+  min-height: 400px;
+}
+
+::v-deep .area-wrap-city.el-cascader {
+  line-height: normal;
+  .el-input {
+    cursor: pointer;
+    width: 100% !important;
+    height: 28px !important;
+    .el-input__inner {
+      display: none !important;
+    }
+    span.el-input__suffix {
+      position: inherit !important;
+      i.el-input__icon {
+        line-height: inherit;
+        margin-left: 5px;
+      }
+    }
+
+    .el-input__wrapper {
+      box-shadow: none;
+      input {
+        display: none;
+      }
+    }
+  }
+
+  .el-cascader__tags {
+    display: none;
+  }
+}
+
+.area-city-popper {
+  .el-cascader-panel {
+    .el-scrollbar.el-cascader-menu {
+      .el-cascader-menu__wrap.el-scrollbar__wrap {
+        height: 315px;
+      }
+    }
+  }
+}
+</style>
+<style>
+.custom-class-box {
+  z-index: 999999 !important;
+}
+</style>

src/views/tourism/thirdParty/index.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--用户数据-->
+      <el-col :span="24" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="公告标题" prop="noticeTitle">
+            <el-input
+              v-model="queryParams.noticeTitle"
+              placeholder="请输入公告标题"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="创建者" prop="createBy">
+            <el-input
+              v-model="queryParams.createBy"
+              placeholder="请输入创建者"
+              clearable
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="公告类型" prop="noticeType">
+            <el-select v-model="queryParams.noticeType" clearable placeholder="请选择公告类型">
+              <el-option
+                v-for="dict in dict.type.tourism_notice_type"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="configPermi.add"
+            >新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="el-icon-delete"
+              size="mini"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="configPermi.delect"
+            >删除</el-button>
+          </el-col>
+          <el-col :span="1.5" v-if="false">
+            <el-button
+              type="info"
+              plain
+              icon="el-icon-upload2"
+              size="mini"
+              @click="handleImport"
+              v-hasPermi="configPermi.upload"
+            >导入</el-button>
+          </el-col>
+          <el-col :span="1.5" v-if="false">
+            <el-button
+              type="warning"
+              plain
+              icon="el-icon-download"
+              size="mini"
+              @click="handleExport"
+              v-hasPermi="configPermi.export"
+            >导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column type="index" label="序号" align="center"  />
+          <el-table-column label="公告标题" align="center" key="noticeTitle" prop="noticeTitle" v-if="columns[0].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="公告类型" align="center" key="noticeType" prop="noticeType" v-if="columns[1].visible" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.tourism_notice_type" :value="scope.row.noticeType"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" key="status" v-if="columns[2].visible" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.tourism_notice_status" :value="scope.row.status"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建者" align="center" key="createBy" prop="createBy" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="创建时间" align="center" key="createTime" prop="createTime" v-if="columns[4].visible" :show-overflow-tooltip="true" />
+          <el-table-column
+            label="操作"
+            align="center"
+            width="160"
+            class-name="small-padding fixed-width"
+          >
+            <template slot-scope="scope" >
+              <el-button
+                v-if="false"
+                size="mini"
+                type="text"
+                icon="el-icon-document"
+                @click="handleDetails(scope.row)"
+                v-hasPermi="configPermi.details"
+              >详情</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="configPermi.edit"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="configPermi.delect"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
+    <!--  新增或修改  -->
+    <addAndEdit ref="addAndEdit" @refresh="getList" />
+  </div>
+</template>
+
+<script>
+import { 
+  listTableApi, 
+  delTableApi, 
+  } from "@/api/CURD";
+import addAndEdit from "./formBox/eventNotificationsForm.vue"
+export default {
+  name: "User",
+  dicts: ['tourism_notice_type','tourism_notice_status'],
+  components: {addAndEdit},
+  data() {
+    return {
+      title: "活动通知",// 通用标题
+      configPermi: {
+        add: ['contentManagement:eventNotifications:add'], // 新增权限
+        details: [''], // 详情权限
+        delect: ['contentManagement:eventNotifications:delect'], // 删除权限
+        edit: ['contentManagement:eventNotifications:edit'], // 编辑权限
+        upload: [''],// 导入权限
+        export: [''],// 导出权限
+      },
+      configUrl: {
+        list: '/merchant/notice/pageList', // 列表地址
+        delect: '/merchant/notice/', // 删除地址
+        upload: '',// 导入地址
+        download:'', // 下载模板地址
+        export: '',// 导出地址
+      },
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      tableList: null,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      dateRange: [],
+      // 控制列表是否显示
+      columns: [
+        { key: 0, label: `公告标题`, visible: true },
+        // { key: 1, label: `归属景区`, visible: true },
+        { key: 2, label: `公告类型`, visible: true },
+        { key: 3, label: `状态`, visible: true },
+        { key: 4, label: `创建者`, visible: true },
+        { key: 5, label: `创建时间`, visible: true },
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listTableApi(
+        this.configUrl.list,
+        this.addDateRange(
+          this.queryParams, 
+          this.dateRange)).then(response => {
+            this.tableList = response.data.rows;
+            this.total = response.data.total;
+            this.loading = false;
+        }
+      ).catch (error=>{
+        console.error('获取列表失败!!!!',error)
+        this.tableList = [];
+        this.total = 0;
+        this.loading = false
+      }) 
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+      }
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      if(this.$refs.addAndEdit) {
+        this.$refs.addAndEdit.initData(this.title + '新增', "ADD",{})
+      }
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      if(this.$refs.addAndEdit) {
+        this.$refs.addAndEdit.initData(this.title + '编辑', "EDITInit",{...row})
+      }
+    },
+    handleDetails(row){
+      if(this.$refs.detailsBox) {
+        this.$refs.detailsBox.initData(this.title + '详情',"DEATILSInit", row)
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除数据项？').then( () => {
+        return delTableApi(this.configUrl.delect,ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch((e) => {
+        console.error("删除失败====",e)
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(this.configUrl.export, {
+        ...this.queryParams
+      }, `${this.title }_${new Date().getTime()}.xlsx`)
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      if(this.$refs.upload) {
+        this.$refs.upload.initData({
+          width: '400px',
+          // 弹出层标题（用户导入）
+          title: this.title + "导入",
+          // 下载模板地址
+          importTemplate: this.configUrl.download,
+          // 上传的地址
+          url: this.configUrl.upload
+        })
+      }
+    },
+  }
+};
+</script>