演出厅需求完成和写票务页面

src/api/performanceHallMr/performanceHallMr.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+// 分页查询
+export const pageList = (query) => {
+  return request({
+    url: '/merchant/merchantTheatreAuditorium/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增/修改
+export const saveAndEdit = (data) => {
+  return request({
+    url: '/merchant/merchantTheatreAuditorium/insertOrUpdate',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除模板
+export const deleteById = (id) => {
+  return request({
+    url: '/merchant/merchantTheatreAuditorium/deleteById',
+    method: 'delete',
+    params: {id:id}
+  })
+}
+
+// id获取详情
+export function getSelectById(id) {
+  return request({
+    url: '/merchant/merchantAuditoriumSeat/selectByAuditoriumId?auditoriumId=' + id,
+    method: 'get'
+  })
+}
+
+// 座位模板 新增/修改
+export const seatSaveAndEdit = (data) => {
+  return request({
+    url: '/merchant/merchantAuditoriumSeat/save',
+    method: 'post',
+    data: data
+  })
+}

src/api/ticketMr/ticketMr.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+// 分页查询
+export const pageList = (query) => {
+  return request({
+    url: '/scenicgoods/goods/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增/修改
+export const saveAndEdit = (data) => {
+  return request({
+    url: '/scenicgoods/goods/insertOrUpdate',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除模板
+export const deleteById = (id) => {
+  return request({
+    url: '/scenicgoods/goods/deleteById',
+    method: 'delete',
+    params: {id:id}
+  })
+}
+
+// id获取详情
+export function getSelectById(id) {
+  return request({
+    url: '/scenicgoods/goods/selectByAuditoriumId?auditoriumId=' + id,
+    method: 'get'
+  })
+}

src/views/performanceHallMr/dialog/addAndEdit.vue

@@ -4,7 +4,7 @@
  * @Date: 2023-11-24 13:55:00
  * @LastEditors: Sugar.
  * @LastEditTime: 22023-11-24 13:55:00
- * @FilePath: \cattle_webui\src\views\perform\dialog\AddOrEditDialog.vue
+ * @FilePath: \cattle_webui\src\views\performanceHallMr\dialog\AddOrEditDialog.vue
  * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
 -->
 <template>
@@ -18,44 +18,30 @@
   >
     <div class="dialog">
       <el-form :model="form" ref="form" :rules="rules" label-width="100px">
-        <el-form-item label="演出厅名称" prop="title">
+        <el-form-item label="演出厅名称" prop="name">
           <el-input
-            v-model="form.title"
+            v-model="form.name"
             placeholder="演出厅名称"
             clearable
             style="width: 100%;"
           />
         </el-form-item>
-        <el-form-item label="所属场馆" prop="title">
+        <el-form-item label="所属场馆" prop="theatreId">
           <el-select
-            v-model="form.status"
+            v-model="form.theatreId"
             placeholder="所属场馆"
             clearable
             style="width: 100%"
           >
             <el-option
-              v-for="dict in statusList"
-              :key="dict.value"
+              v-for="dict in theatreList"
+              :key="dict.id"
               :label="dict.name"
-              :value="dict.value"
+              :value="dict.id"
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="座位表设置" prop="title">
-          <el-row>
-            <el-col :span="12" style="padding-right: 15px">
-              <el-input placeholder="请输入" v-model="form.title">
-                <template slot="append">行</template>
-              </el-input>
-            </el-col>
-            <el-col :span="12" style="padding-left: 15px">
-              <el-input placeholder="请输入" v-model="form.title">
-                <template slot="append">列</template>
-              </el-input>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item label="票区图上传" prop="mainImg">
+        <el-form-item label="票区图上传" prop="seatImg">
           <el-upload
             ref="upload"
             class="avatar-uploader"
@@ -66,10 +52,10 @@
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
           >
-            <div class="avatar" v-if="form.mainImg">
+            <div class="avatar" v-if="form.seatImg">
               <el-image
                 style="width: 100px; height: 100px"
-                :src="form.mainImg"
+                :src="form.seatImg"
                 fit="cover"
               />
             </div>
@@ -100,21 +86,11 @@
 </template>
 
 <script>
-// import { updateNoticeMgr } from "@/api/system/noticeMgr";
-import { saveAndEdit } from "@/api/perform/perform";
-import Editor from "@/components/Editor";
+import { pageList } from "@/api/venueMr/venueMr";
+import { saveAndEdit } from "@/api/performanceHallMr/performanceHallMr";
 import { getToken } from "@/utils/auth";
 export default {
   name: "addAndEdit",
-  props: {
-    dict: {
-      type: Object,
-      default: () => [],
-    },
-  },
-  components: {
-    Editor,
-  },
   data() {
     return {
       title: "编辑",
@@ -128,21 +104,17 @@ export default {
         content: "",
       },
       rules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        mainImg: [{ required: true, message: "请上传封面", trigger: "blur" }],
-        centent: [
-          { required: true, message: "请输入内容详情", trigger: "blur" },
+        name: [{ required: true, message: "请输入所属场馆", trigger: "blur" }],
+        seatImg: [{ required: true, message: "请上传票区图", trigger: "blur" }],
+        theatreId: [
+          { required: true, message: "请选择所属场馆", trigger: "blur" },
         ],
       },
       uploadObj: {
         url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
         Headers: { Authorization: "Bearer " + getToken() },
       },
-      statusList: [
-        {id: 1, name: '未发布', value: 0},
-        {id: 2, name: '发布', value: 1},
-        {id: 3, name: '下架', value: 2},
-      ],
+      theatreList: [],
     };
   },
   methods: {
@@ -154,13 +126,14 @@ export default {
      */
     openDialog(title, obj) {
       this.open = true;
+      this.getList();
       if (obj){
         this.title = "编辑演出厅";
         this.$nextTick(() => {
-          this.form.id = obj.id;
-          this.form.title = obj.title;
-          this.form.mainImg = obj.mainImg;
-          this.form.content = obj.centent;
+          this.$set(this.form, 'id', obj.id)
+          this.$set(this.form, 'name', obj.name)
+          this.$set(this.form, 'seatImg', obj.seatImg)
+          this.$set(this.form, 'theatreId', obj.theatreId)
         });
       }else{
         this.title = "添加演出厅";
@@ -169,6 +142,14 @@ export default {
         });
       }
     },
+    /** 查询列表 */
+    getList() {
+      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
+        .then(response => {
+            this.theatreList = response.data.rows;
+          }
+        );
+    },
     /**
      * 保存
      * @date 2023-11-22
@@ -219,7 +200,7 @@ export default {
     handleAvatarSuccess(res) {
       if (res.code === 200) {
         // this.form.mainImg = res?.data?.url;
-        this.$set(this.form, 'mainImg', res?.data?.url)
+        this.$set(this.form, 'seatImg', res?.data?.url)
       }
     },
     /**

src/views/performanceHallMr/dialog/programmeAddAndEdit.vue

@@ -0,0 +1,311 @@
+<!--
+ * @Description: 新增/编辑弹框
+ * @Author: Sugar.
+ * @Date: 2023-11-24 13:55:00
+ * @LastEditors: Sugar.
+ * @LastEditTime: 22023-11-24 13:55:00
+ * @FilePath: \cattle_webui\src\views\performanceHallMr\dialog\AddOrEditDialog.vue
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
+-->
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    width="700px"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="dialog">
+      <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="['performanceHallMr:performanceHallMr:add']"
+          >新增</el-button>
+        </el-col>
+      </el-row>
+      <el-table ref="tables" v-loading="loading" :data="tableList" border>
+        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+        <el-table-column label="剧目名称" align="center" prop="name" />
+        <el-table-column label="票务名称" align="center" prop="theatreName" />
+        <el-table-column label="座位类型" align="center" prop="theatreName" />
+        <el-table-column label="座位价格" align="center" prop="theatreName" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['performanceHallMr:performanceHallMr:edit']"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleDelete(scope.row,scope.index)"
+              v-hasPermi="['performanceHallMr:performanceHallMr:delete']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog
+      title="剧目绑定"
+      :visible.sync="formOpen"
+      width="700px"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="cancel"
+    >
+      <div class="dialog">
+        <el-form :model="form" ref="form" :rules="rules" label-width="100px">
+          <el-form-item label="选择剧目" prop="theatreId">
+            <el-select
+              v-model="form.theatreId"
+              placeholder="选择剧目"
+              clearable
+              style="width: 100%"
+            >
+              <el-option
+                v-for="dict in seatList"
+                :key="dict.id"
+                :label="dict.name"
+                :value="dict.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="选择票务" prop="theatreId">
+            <el-select
+              v-model="form.theatreId"
+              placeholder="选择票务"
+              clearable
+              style="width: 100%"
+            >
+              <el-option
+                v-for="dict in seatList"
+                :key="dict.id"
+                :label="dict.name"
+                :value="dict.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="座位类型">
+            <el-select
+              v-model="form.seatTypeId"
+              placeholder="座位类型"
+              clearable
+              style="width: 100%"
+            >
+              <el-option
+                v-for="dict in seatList"
+                :key="dict.id"
+                :label="dict.name"
+                :value="dict.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="座位价格" prop="name">
+            <el-input
+              v-model="form.name"
+              placeholder="座位价格"
+              clearable
+              style="width: 100%;"
+            >
+              <template slot="append">元</template>
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+      <el-button @click="formOpen = false">取消</el-button>
+      <el-button
+        type="primary"
+        @click="submitForm"
+        v-loading.fullscreen.lock="loading"
+        element-loading-text="提交中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
+        <span v-if="loading">提交中...</span>
+        <span v-else>保存</span>
+      </el-button>
+    </span>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import { saveAndEdit } from "@/api/performanceHallMr/performanceHallMr";
+import { pageList } from '@/api/seatTypeMr/seatTypeMr'
+import { getToken } from "@/utils/auth";
+export default {
+  name: "programmeAddAndEdit",
+  data() {
+    return {
+      title: "编辑",
+      model: "EDIT",
+      activeName: '01',
+      open: false,
+      loading: false,
+      formOpen: false,
+      form: {
+        id: undefined,
+        type: "",
+        content: "",
+      },
+      tableList: [],
+      rules: {
+        name: [{ required: true, message: "请输入所属场馆", trigger: "blur" }],
+        seatImg: [{ required: true, message: "请上传票区图", trigger: "blur" }],
+        theatreId: [
+          { required: true, message: "请选择所属场馆", trigger: "blur" },
+        ],
+      },
+      seatList: [],
+    };
+  },
+  methods: {
+    /**
+     * 打开弹框
+     * @date 2023-11-22
+     * @param {any} obj
+     * @returns {any}
+     */
+    openDialog(title, obj) {
+      this.open = true;
+      this.getSeatTypeList();
+      this.getList();
+      this.title = "剧目管理";
+      if (obj){
+        this.$set(this.form, 'id', obj.id)
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.formOpen = true;
+      this.form = {}
+    },
+    /** 座位类型列表 */
+    getSeatTypeList() {
+      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
+        .then(response => {
+            this.seatList = response.data.rows;
+          }
+        );
+    },
+    /** 查询列表 */
+    getList() {
+      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
+        .then(response => {
+            this.theatreList = response.data.rows;
+          }
+        );
+    },
+    /**
+     * 保存
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    submitForm() {
+      this.$refs["form"].validate(async (valid) => {
+        if (valid) {
+          try {
+            this.loading = true;
+            const { code } = await saveAndEdit({ ...this.form });
+            if (code === 200) {
+              this.$message.success("修改成功!");
+              this.$emit("getList");
+              this.cancel();
+            }
+          } catch (error) {
+          } finally {
+            this.loading = false;
+          }
+        }
+      });
+    },
+    /**
+     * 重置
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    reset() {
+      this.$refs["form"].resetFields();
+      this.form.id = undefined;
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.reset();
+      this.open = false;
+    },
+    /**
+     * 上传成功
+     * @date 2023-11-22
+     * @param {any} res
+     * @returns {any}
+     */
+    handleAvatarSuccess(res) {
+      if (res.code === 200) {
+        // this.form.mainImg = res?.data?.url;
+        this.$set(this.form, 'seatImg', res?.data?.url)
+      }
+    },
+    /**
+     * 上传文件之前之前
+     * @date 2023-11-22
+     * @param {any} file
+     * @returns {any}
+     */
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg" || "image/png";
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是jpg或png格式!");
+      }
+      return isJPG;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 0 30px;
+  max-height: 65vh;
+  overflow-y: auto;
+}
+.dialog {
+  padding: 0 30px;
+
+  .color-class{
+    width: 50px;
+    height: 50px;
+  }
+
+  .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;
+  }
+}
+</style>

src/views/performanceHallMr/dialog/seatTemplateEdit.vue

@@ -0,0 +1,445 @@
+<!--
+ * @Description: 新增/编辑弹框
+ * @Author: Sugar.
+ * @Date: 2023-11-24 13:55:00
+ * @LastEditors: Sugar.
+ * @LastEditTime: 22023-11-24 13:55:00
+ * @FilePath: \cattle_webui\src\views\performanceHallMr\dialog\seatTemplateEdit.vue
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
+-->
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    width="900px"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="dialog">
+      <el-row>
+        <el-col :span="16" style="padding-right: 15px">
+          <div class="title-class">
+            <el-row>
+              <el-col :span="8" style="padding-right: 15px">
+                <el-input placeholder="请输入" v-model.number="seatMapRow">
+                  <template slot="append">行</template>
+                </el-input>
+              </el-col>
+              <el-col :span="8" style="padding-left: 15px">
+                <el-input placeholder="请输入" v-model.number="seatMapCol">
+                  <template slot="append">列</template>
+                </el-input>
+              </el-col>
+              <el-col :span="8" style="padding-left: 15px">
+                <el-button @click="setRowCol(seatMapRow, seatMapCol)" style="width: 100%;" type="primary">生成模板</el-button>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="box-class">
+            <div class="box-top-class">
+              <div class="stage-class">舞台</div>
+            </div>
+            <div class="box-bottom-class" ref="seatBox" v-if="seatType">
+              <div v-for="row in seatMap.row" :key="row">
+                <div class="seat-tag"
+                     @click="setSeatTemplateMap(row, col)"
+                     v-for="col in seatMap.col"
+                     :key="col"
+                     :style="{
+                       width: seatWidth,
+                       height: seatWidth,
+                       backgroundColor: colSeatMap[row+'_'+col] && colSeatMap[row+'_'+col].color ? colSeatMap[row+'_'+col].color : ''}"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8" style="padding-left: 15px">
+          <div class="title-class">座位设置</div>
+          <div class="box-class">
+            <el-form :model="form" ref="form" label-width="100px" label-position="top">
+              <el-form-item label="是否可售">
+                <el-radio v-model="form.status" label="1">可售</el-radio>
+                <el-radio v-model="form.status" label="2">不可售</el-radio>
+              </el-form-item>
+              <el-form-item label="座位类型">
+                <el-select
+                  v-model="form.seatTypeId"
+                  placeholder="座位类型"
+                  clearable
+                  style="width: 100%"
+                  @change="seatTypeChange"
+                >
+                  <el-option
+                    v-for="dict in seatList"
+                    :key="dict.id"
+                    :label="dict.name"
+                    :value="dict.id"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="座位自动分配优先级">
+                <el-input
+                  v-model.number="form.priority"
+                  placeholder="优先级"
+                  clearable
+                  style="width: 100%;"
+                />
+              </el-form-item>
+              <el-form-item label="自定义座位名">
+                <el-input
+                  v-model="form.name"
+                  placeholder="自定义座位名"
+                  clearable
+                  style="width: 100%;"
+                />
+              </el-form-item>
+
+              <el-form-item >
+                <el-button @click="setSeatMap" style="width: 100%; margin-top: 20px" type="primary">确 定</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取消</el-button>
+      <el-button
+        type="primary"
+        @click="submitForm"
+        v-loading.fullscreen.lock="loading"
+        element-loading-text="提交中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
+        <span v-if="loading">提交中...</span>
+        <span v-else>保存</span>
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { pageList } from '@/api/seatTypeMr/seatTypeMr'
+import { seatSaveAndEdit, saveAndEdit, getSelectById } from "@/api/performanceHallMr/performanceHallMr";
+import { getToken } from "@/utils/auth";
+export default {
+  name: "seatTemplateEdit",
+  data() {
+    return {
+      title: "编辑",
+      model: "EDIT",
+      activeName: '01',
+      open: false,
+      seatType: false,
+      loading: false,
+      seatWidth: null,
+      seatMap: {
+        row: 0,
+        col: 0,
+      },
+      seatMapRow: '',
+      seatMapCol: '',
+      seatSetMap: {},
+      seatTemplateMap: [],
+      colSeatMap: {},
+      form: {
+        id: undefined,
+        status: "1",
+        content: "",
+      },
+      seatList: [],
+      auditoriumId: '',
+    };
+  },
+  methods: {
+    /**
+     * 打开弹框
+     * @date 2023-11-22
+     * @param {any} obj
+     * @returns {any}
+     */
+    openDialog(title, obj) {
+      this.open = true;
+      this.seatType = false;
+      this.getSeatTypeList();
+      this.colSeatMap = {};
+      if (obj){
+        this.title = "座位模板";
+        this.auditoriumId = obj.id;
+        this.$set(this.seatMap, 'row', obj.rows);
+        this.$set(this.seatMap, 'col', obj.cols);
+        this.$set(this, 'seatMapRow', obj.rows);
+        this.$set(this, 'seatMapCol', obj.cols);
+
+        this.getSelectByIdApi(obj)
+      }else{
+        this.seatType = true;
+        this.title = "座位模板";
+        this.$nextTick(() => {
+          this.$refs["form"].clearValidate();
+        });
+      }
+    },
+    /** 获取详情 */
+    getSelectByIdApi(row) {
+      const id = row.id
+      getSelectById(id).then(response => {
+        const dataList = response.data;
+        this.$nextTick(() =>{
+          dataList.forEach(item => {
+            if(item.status == 2){
+              item.color = '#7d7d7e';
+            }
+            this.$set(this.colSeatMap, item.rowNo + '_' + item.columnNo, item);
+          })
+          this.seatType = true;
+          this.$nextTick(() =>{
+            this.seatWidth = ((this.$refs.seatBox.offsetWidth - 10 - (this.seatMap.col * 2))/this.seatMap.col)  + 'px';
+          })
+        })
+      });
+    },
+    /** 设置座位模板行列 */
+    setRowCol(row, col) {
+      if(!row || !col){
+        this.$message.error("请输入行和列!");
+        return false;
+      }
+      if(row <= 0 || col <= 0){
+        this.$message.error("请输入大于0的行和列!");
+        return false;
+      }
+      if(this.colSeatMap) {
+        this.$confirm('此操作将重置座位模板, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.seatMap.row = row;
+          this.seatMap.col = col;
+          this.seatType = false;
+          this.seatType = true;
+          this.colSeatMap  = {}
+          for (let i = 1; i < this.seatMap.row + 1; i++) {
+            for (let j = 1; j < this.seatMap.col + 1; j++) {
+              let rowColMap = {
+                "auditoriumId": this.auditoriumId,
+                "name": "",
+                "rowNo": i,
+                "columnNo": j,
+                "seatTypeColor": '#fdfdfd',
+                "seatTypeId": "",
+                "seatLabel": "",
+                "priority": "",
+                "status": 2
+              };
+              this.$set(this.colSeatMap, i + '_' + j, rowColMap);
+            }
+          }
+          this.$nextTick(() =>{
+            this.seatWidth = ((this.$refs.seatBox.offsetWidth - 10 - (this.seatMap.col * 2))/this.seatMap.col)  + 'px';
+          })
+        }).catch(() => {
+
+        });
+      }
+    },
+    /** 座位类型列表 */
+    getSeatTypeList() {
+      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
+        .then(response => {
+            this.seatList = response.data.rows;
+          }
+        );
+    },
+    /** 座位类型选择事件 */
+    seatTypeChange(val) {
+      this.seatList.forEach(item => {
+        if(val == item.id){
+          this.form.seat = item
+        }
+      })
+    },
+    /** 座位设置确认事件 */
+    setSeatMap() {
+      this.seatSetMap = {};
+      this.seatSetMap.status = this.form.status;
+      this.seatSetMap.color = this.form.seat.color;
+      this.seatSetMap.seatTypeId = this.form.seat.id;
+      this.seatSetMap.seatLabel = this.form.seat.name;
+      this.seatSetMap.name = this.form.name;
+      this.seatSetMap.priority = this.form.priority;
+
+      if(this.seatSetMap.status == 2) {
+        this.seatSetMap.color = '#7d7d7e';
+        this.seatSetMap.seatTypeId = '';
+        this.seatSetMap.seatLabel = '';
+      }
+    },
+
+    // 点击座位放置参数
+    setSeatTemplateMap(row, col) {
+      let map = this.colSeatMap[row + '_' +col];
+      map.status = this.seatSetMap.status;
+      map.color = this.seatSetMap.color;
+      map.seatTypeId = this.seatSetMap.seatTypeId;
+      map.seatLabel = this.seatSetMap.seatLabel;
+      map.name = this.seatSetMap.name;
+      map.priority = this.seatSetMap.priority;
+      this.$set(this.colSeatMap, row + '_' +col, map);
+    },
+    /**
+     * 保存
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    submitForm() {
+      let that = this;
+      this.$refs["form"].validate(async (valid) => {
+        if (valid) {
+          let postList = []
+          for (const codeKey in this.colSeatMap) {
+            postList.push(this.colSeatMap[codeKey])
+          }
+          try {
+            this.loading = true;
+            const { code } = await saveAndEdit({ id: this.auditoriumId, rows: this.seatMap.row, cols: this.seatMap.col });
+            if (code === 200) {
+              let postList = []
+              for (const codeKey in this.colSeatMap) {
+                postList.push(this.colSeatMap[codeKey])
+              }
+              const { code } = await seatSaveAndEdit(postList);
+              if (code === 200) {
+                that.$message.success("修改成功!");
+                that.$emit("getList");
+                that.cancel();
+              }
+            }
+          } catch (error) {
+          } finally {
+            this.loading = false;
+          }
+        }
+      });
+    },
+    /**
+     * 重置
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    reset() {
+      this.$refs["form"].resetFields();
+      this.form.id = undefined;
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.reset();
+      this.open = false;
+    },
+    /**
+     * 上传成功
+     * @date 2023-11-22
+     * @param {any} res
+     * @returns {any}
+     */
+    handleAvatarSuccess(res) {
+      if (res.code === 200) {
+        // this.form.mainImg = res?.data?.url;
+        this.$set(this.form, 'mainImg', res?.data?.url)
+      }
+    },
+    /**
+     * 上传文件之前之前
+     * @date 2023-11-22
+     * @param {any} file
+     * @returns {any}
+     */
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg" || "image/png";
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是jpg或png格式!");
+      }
+      return isJPG;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 0 30px;
+  max-height: 65vh;
+  overflow-y: auto;
+}
+.dialog {
+  padding: 0 30px;
+
+  .title-class{
+    text-align: center;
+    color: #6e6e6e;
+    margin: 10px auto;
+  }
+  .box-class{
+    width: 100%;
+    height: 100%;
+    border: 2px solid #7d7d7e;
+    border-radius: 4px;
+    padding: 10px;
+
+    .box-top-class{
+      .stage-class{
+        margin: 10px auto;
+        width: 160px;
+        height: 80px;
+        border: 2px solid #7d7d7e;
+        text-align: center;
+        line-height: 80px;
+      }
+    }
+    .box-bottom-class{
+      //border: 2px solid #5656c2;
+      margin-top: 15px;
+      padding-left: 4px;
+
+      .seat-tag{
+        display: inline-block;
+        border: 1px solid #7d7d7e;
+        margin-right: 2px;
+        cursor: pointer;
+        background: url("../../../assets/images/seat-icon.png") no-repeat;
+        background-size: 100% 100%;
+
+        &:hover{
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+
+  .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;
+  }
+}
+</style>

src/views/performanceHallMr/index.vue

@@ -41,8 +41,8 @@
 
     <el-table ref="tables" v-loading="loading" :data="dataList" border>
       <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
-      <el-table-column label="演出厅名称" align="center" prop="title" />
-      <el-table-column label="所属场馆" align="center" prop="title" />
+      <el-table-column label="演出厅名称" align="center" prop="name" />
+      <el-table-column label="所属场馆" align="center" prop="theatreName" />
       <el-table-column label="票区图" align="center" prop="type">
         <template slot-scope="scope">
           <el-button type="text" @click="seeCenter(scope.row, 'img')">查看</el-button>
@@ -58,15 +58,15 @@
           <el-button
             size="mini"
             type="text"
-            @click="handleUpdate(scope.row)"
+            @click="handleSeat(scope.row)"
             v-hasPermi="['performanceHallMr:performanceHallMr:edit']"
           >座位管理</el-button>
           <el-button
             size="mini"
             type="text"
-            @click="handleUpdate(scope.row)"
+            @click="handleMr(scope.row)"
             v-hasPermi="['performanceHallMr:performanceHallMr:edit']"
-          >场次管理</el-button>
+          >剧目管理</el-button>
           <el-button
             size="mini"
             type="text"
@@ -94,10 +94,14 @@
     <!-- 新增/编辑弹框 -->
     <add-and-edit
       ref="addAndEdit"
-      :dict="dict"
       @getList="getList"
     />
 
+    <!-- 座位模板 -->
+    <seat-template-edit ref="seatTemplateEdit" @getList="getList"></seat-template-edit>
+
+    <!-- 剧目管理 -->
+    <programme-add-and-edit ref="programmeAddAndEdit" @getList="getList"></programme-add-and-edit>
 
     <el-dialog
       title="查看"
@@ -109,7 +113,7 @@
       <div v-if="visibleType == 'img'">
         <el-image
           style="width: 400px; height: 100%"
-          :src="newObj.mainImg"
+          :src="newObj.seatImg"
           fit="cover"
         />
       </div>
@@ -125,13 +129,14 @@
 
 <script>
 
-import { pageList, deleteById } from '@/api/appletMr/appletMr'
+import { pageList, deleteById } from '@/api/performanceHallMr/performanceHallMr'
 import addAndEdit from "./dialog/addAndEdit.vue";
+import seatTemplateEdit from "./dialog/seatTemplateEdit.vue";
+import programmeAddAndEdit from "./dialog/programmeAddAndEdit.vue";
 
 export default {
   name: "agreement",
-  dicts: ['agreement_type'],
-  components: { addAndEdit },
+  components: { addAndEdit, seatTemplateEdit, programmeAddAndEdit },
   data() {
     return {
       // 遮罩层
@@ -168,7 +173,8 @@ export default {
       ],
       visibleStatus: false,
       newObj: {},
-      visibleType: ''
+      visibleType: '',
+      seatList: []
     };
   },
   created() {
@@ -219,28 +225,19 @@ export default {
       this.$refs["addAndEdit"].openDialog("修改数据", row);
     },
 
-    /** 发布或者取消发布按钮操作 */
-    ionlineApi(row) {
-      this.$confirm("是否对标题为" + row.title + "的数据进行" + (row.status == 1 ? '下架？' : '发布？'), '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        ionline({ id: row.id, status: row.status == 1 ? 2 : 1 }).then((res) => {
-          if (res.code == 200) {
-            this.$message({
-              type: 'success',
-              message: '操作成功!'
-            });
-            this.getList();
-          }
-        });
-      }).catch(() => {});
+    /** 座位管理按钮操作 */
+    handleSeat(row) {
+      this.$refs["seatTemplateEdit"].openDialog("座位管理", row);
+    },
+
+    /** 剧目管理按钮操作 */
+    handleMr(row) {
+      this.$refs["programmeAddAndEdit"].openDialog("剧目管理", row);
     },
 
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除数据标题为"' + row.title + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除数据演出厅为"' + row.name + '"的数据项？').then(function() {
         return deleteById(row.id);
       }).then(() => {
         this.getList();

src/views/programmeMr/dialog/programmeAddAndEdit.vue

@@ -0,0 +1,265 @@
+<!--
+ * @Description: 新增/编辑弹框
+ * @Author: Sugar.
+ * @Date: 2023-11-24 13:55:00
+ * @LastEditors: Sugar.
+ * @LastEditTime: 22023-11-24 13:55:00
+ * @FilePath: \cattle_webui\src\views\performanceHallMr\dialog\AddOrEditDialog.vue
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
+-->
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    width="800px"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="dialog">
+      <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="['performanceHallMr:performanceHallMr:add']"
+          >新增</el-button>
+        </el-col>
+      </el-row>
+      <el-table ref="tables" v-loading="loading" :data="tableList" border>
+        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+        <el-table-column label="票务ID" align="center" prop="name" />
+        <el-table-column label="票务名称" align="center" prop="theatreName" />
+        <el-table-column label="原价" align="center" prop="theatreName" />
+        <el-table-column label="销售价" align="center" prop="theatreName" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['performanceHallMr:performanceHallMr:edit']"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleDelete(scope.row,scope.index)"
+              v-hasPermi="['performanceHallMr:performanceHallMr:delete']"
+            >移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-dialog
+      title="票务信息"
+      :visible.sync="formOpen"
+      width="700px"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="cancel"
+    >
+      <div class="dialog">
+        <el-table ref="tables" v-loading="loading" :data="tableList" border @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="50" align="center" />
+          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+          <el-table-column label="票务ID" align="center" prop="name" />
+          <el-table-column label="票务名称" align="center" prop="theatreName" />
+          <el-table-column label="原价" align="center" prop="theatreName" />
+          <el-table-column label="销售价" align="center" prop="theatreName" />
+        </el-table>
+      </div>
+      <span slot="footer" class="dialog-footer">
+      <el-button @click="formOpen = false">取消</el-button>
+      <el-button
+        type="primary"
+        @click="submitForm"
+        v-loading.fullscreen.lock="loading"
+        element-loading-text="提交中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
+        <span v-if="loading">提交中...</span>
+        <span v-else>保存</span>
+      </el-button>
+    </span>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import { saveAndEdit } from "@/api/performanceHallMr/performanceHallMr";
+import { pageList } from '@/api/seatTypeMr/seatTypeMr'
+import { getToken } from "@/utils/auth";
+export default {
+  name: "programmeAddAndEdit",
+  data() {
+    return {
+      title: "编辑",
+      model: "EDIT",
+      activeName: '01',
+      open: false,
+      loading: false,
+      formOpen: false,
+      form: {
+        id: undefined,
+        type: "",
+        content: "",
+      },
+      tableList: [],
+      rules: {
+        name: [{ required: true, message: "请输入所属场馆", trigger: "blur" }],
+        seatImg: [{ required: true, message: "请上传票区图", trigger: "blur" }],
+        theatreId: [
+          { required: true, message: "请选择所属场馆", trigger: "blur" },
+        ],
+      },
+      seatList: [],
+    };
+  },
+  methods: {
+    /**
+     * 打开弹框
+     * @date 2023-11-22
+     * @param {any} obj
+     * @returns {any}
+     */
+    openDialog(title, obj) {
+      this.open = true;
+      this.getSeatTypeList();
+      this.getList();
+      this.title = "票务信息";
+      if (obj){
+        this.$set(this.form, 'id', obj.id)
+      }
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.formOpen = true;
+      this.form = {}
+    },
+    /** 座位类型列表 */
+    getSeatTypeList() {
+      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
+        .then(response => {
+            this.seatList = response.data.rows;
+          }
+        );
+    },
+    /** 查询列表 */
+    getList() {
+      pageList(this.addDateRange({pageNum: 1, pageSize: 100}))
+        .then(response => {
+            this.theatreList = response.data.rows;
+          }
+        );
+    },
+    /**
+     * 保存
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    submitForm() {
+      this.$refs["form"].validate(async (valid) => {
+        if (valid) {
+          try {
+            this.loading = true;
+            const { code } = await saveAndEdit({ ...this.form });
+            if (code === 200) {
+              this.$message.success("修改成功!");
+              this.$emit("getList");
+              this.cancel();
+            }
+          } catch (error) {
+          } finally {
+            this.loading = false;
+          }
+        }
+      });
+    },
+    /**
+     * 重置
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    reset() {
+      this.form.id = undefined;
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.reset();
+      this.open = false;
+    },
+    /**
+     * 上传成功
+     * @date 2023-11-22
+     * @param {any} res
+     * @returns {any}
+     */
+    handleAvatarSuccess(res) {
+      if (res.code === 200) {
+        // this.form.mainImg = res?.data?.url;
+        this.$set(this.form, 'seatImg', res?.data?.url)
+      }
+    },
+    /**
+     * 上传文件之前之前
+     * @date 2023-11-22
+     * @param {any} file
+     * @returns {any}
+     */
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg" || "image/png";
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是jpg或png格式!");
+      }
+      return isJPG;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 0 30px;
+  max-height: 65vh;
+  overflow-y: auto;
+}
+.dialog {
+  padding: 0 30px;
+
+  .color-class{
+    width: 50px;
+    height: 50px;
+  }
+
+  .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;
+  }
+}
+</style>

src/views/programmeMr/index.vue

@@ -81,11 +81,12 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
+            @click="handleMr(scope.row)"
             v-hasPermi="['programmeMr:programmeMr:info']"
           >票务信息</el-button>
           <el-button
@@ -127,6 +128,9 @@
     <!-- 详情 -->
     <details-dia ref="detailsDia"></details-dia>
 
+    <!-- 票务信息 -->
+    <programme-add-and-edit ref="programmeAddAndEdit"></programme-add-and-edit>
+
 
     <el-dialog
       title="查看"
@@ -157,11 +161,12 @@
 import { pageList, deleteById, online } from '@/api/programmeMr/programmeMr'
 import addAndEdit from "./dialog/addAndEdit.vue";
 import detailsDia from "./dialog/details.vue";
+import programmeAddAndEdit from "./dialog/programmeAddAndEdit.vue";
 
 export default {
   name: "agreement",
   dicts: ['agreement_type'],
-  components: { addAndEdit, detailsDia },
+  components: { addAndEdit, detailsDia, programmeAddAndEdit },
   data() {
     return {
       // 遮罩层
@@ -252,6 +257,10 @@ export default {
     openDetails(row) {
       this.$refs["detailsDia"].openDialog("详情", row);
     },
+    /** 票务信息按钮操作 */
+    handleMr(row) {
+      this.$refs["programmeAddAndEdit"].openDialog("票务信息", row);
+    },
 
     /** 发布或者取消发布按钮操作 */
     ionlineApi(row) {

src/views/seatTypeMr/dialog/addAndEdit.vue

@@ -18,16 +18,16 @@
   >
     <div class="dialog">
       <el-form :model="form" ref="form" :rules="rules" label-width="120px">
-        <el-form-item label="类型名称" prop="title">
+        <el-form-item label="类型名称" prop="name">
           <el-input
-            v-model="form.title"
+            v-model="form.name"
             placeholder="类型名称"
             clearable
             style="width: 100%;"
           />
         </el-form-item>
-        <el-form-item label="颜色：" prop="centent">
-          <el-color-picker v-model="form.color1"></el-color-picker>
+        <el-form-item label="颜色：" prop="color">
+          <el-color-picker v-model="form.color"></el-color-picker>
         </el-form-item>
       </el-form>
     </div>
@@ -50,8 +50,7 @@
 
 <script>
 // import { updateNoticeMgr } from "@/api/system/noticeMgr";
-import { saveAndEdit } from "@/api/perform/perform";
-import Editor from "@/components/Editor";
+import { saveAndEdit } from "@/api/seatTypeMr/seatTypeMr";
 import { getToken } from "@/utils/auth";
 export default {
   name: "addAndEdit",
@@ -61,9 +60,6 @@ export default {
       default: () => [],
     },
   },
-  components: {
-    Editor,
-  },
   data() {
     return {
       title: "编辑",
@@ -77,11 +73,8 @@ export default {
         content: "",
       },
       rules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        mainImg: [{ required: true, message: "请上传封面", trigger: "blur" }],
-        centent: [
-          { required: true, message: "请输入内容详情", trigger: "blur" },
-        ],
+        title: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
+        color: [{ required: true, message: "请选择颜色", trigger: "blur" }],
       },
       uploadObj: {
         url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
@@ -99,15 +92,14 @@ export default {
     openDialog(title, obj) {
       this.open = true;
       if (obj){
-        this.title = "编辑资讯";
+        this.title = "编辑座位类型";
         this.$nextTick(() => {
-          this.form.id = obj.id;
-          this.form.title = obj.title;
-          this.form.mainImg = obj.mainImg;
-          this.form.content = obj.centent;
+          this.$set(this.form, 'id', obj.id);
+          this.$set(this.form, 'name', obj.name);
+          this.$set(this.form, 'color', obj.color);
         });
       }else{
-        this.title = "添加资讯";
+        this.title = "添加座位类型";
         this.$nextTick(() => {
           this.$refs["form"].clearValidate();
         });

src/views/seatTypeMr/index.vue

@@ -32,10 +32,10 @@
 
     <el-table ref="tables" v-loading="loading" :data="dataList" border>
       <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
-      <el-table-column label="类型名称" align="center" prop="title" />
-      <el-table-column label="颜色" align="center" prop="type">
+      <el-table-column label="类型名称" align="center" prop="name" />
+      <el-table-column label="颜色" align="center" prop="color">
         <template slot-scope="scope">
-          <div class="color-class" style="width: 30px; height: 30px; margin: auto" :style="{backgroundColor: 'red'}"></div>
+          <div class="color-class" style="width: 30px; height: 30px; margin: auto" :style="{backgroundColor: scope.row.color}"></div>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="160">
@@ -218,7 +218,7 @@ export default {
 
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除数据标题为"' + row.title + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除数据座位类型为"' + row.name + '"的数据项？').then(function() {
         return deleteById(row.id);
       }).then(() => {
         this.getList();

src/views/ticketMr/dialog/addAndEdit.vue

@@ -0,0 +1,490 @@
+<!--
+ * @Description: 新增/编辑弹框
+ * @Author: Sugar.
+ * @Date: 2023-11-24 13:55:00
+ * @LastEditors: Sugar.
+ * @LastEditTime: 2023-11-24 13:55:00
+ * @FilePath: \cattle_webui\src\views\programmeMr\dialog\AddOrEditDialog.vue
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
+-->
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="open"
+    width="800px"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="dialog">
+      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
+        <el-tabs v-model="activeName">
+          <!--    基础信息     -->
+          <el-tab-pane label="基础信息" name="01">
+            <el-form-item label="票务名称:" prop="name" style="margin-top: 20px">
+              <el-input
+                v-model="form.name"
+                placeholder="票务名称"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="使用年龄:" prop="sponsorId">
+              <el-radio v-model="form.type" label="1">不限制</el-radio>
+              <el-radio v-model="form.type" label="2">限制</el-radio>
+            </el-form-item>
+            <el-form-item label="实名信息:" prop="status">
+              <el-radio v-model="form.type" label="1">全部观影人员均实名</el-radio>
+              <el-radio v-model="form.type" label="2">1位观影人员实名即可</el-radio>
+            </el-form-item>
+            <el-form-item label="核销播报次数:" prop="name">
+              <el-input
+                v-model="form.name"
+                placeholder="核销播报次数"
+                clearable
+                style="width: 100%;"
+              >
+                <template slot="append">次</template>
+              </el-input>
+            </el-form-item>
+          </el-tab-pane>
+
+          <!--    销售信息     -->
+          <el-tab-pane label="销售信息" name="02">
+            <el-form-item label="原价:" label-width="100px" style="margin-top: 20px">
+              <el-input
+                v-model="form.name"
+                placeholder="原价"
+                clearable
+                style="width: 100%;"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="销售价:" label-width="100px">
+              <el-input
+                v-model="form.name"
+                placeholder="原价"
+                clearable
+                style="width: 100%;"
+              >
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="每日限售:" prop="status" label-width="100px">
+              <el-radio v-model="form.type" label="1">不限</el-radio>
+              <el-radio v-model="form.type" label="2">限制</el-radio>
+            </el-form-item>
+            <el-form-item label="每日限售:" prop="status" label-width="100px">
+              <el-radio v-model="form.type" label="1">不限</el-radio>
+              <el-radio v-model="form.type" label="2">限制</el-radio>
+            </el-form-item>
+            <el-form-item label="是否限购:" prop="status" label-width="100px">
+              <el-radio v-model="form.type" label="1">是</el-radio>
+              <el-radio v-model="form.type" label="2">否</el-radio>
+            </el-form-item>
+            <el-form-item label="售票时间:" prop="status" label-width="100px">
+              <el-radio v-model="form.ticketing" label="1">不限</el-radio>
+              <el-radio v-model="form.ticketing" label="2">限制</el-radio>
+            </el-form-item>
+            <el-form-item label="限制时间段:" v-if="form.ticketing == 2" label-width="100px">
+              <el-date-picker
+                v-model="form.value1"
+                type="datetimerange"
+                value-format="yyyy-MM-dd  HH:mm:ss"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="售票渠道:" prop="status" label-width="100px">
+              <el-checkbox v-model="form.xcx">小程序</el-checkbox>
+              <el-checkbox v-model="form.ck">窗口</el-checkbox>
+            </el-form-item>
+          </el-tab-pane>
+
+          <!--    退票信息     -->
+          <el-tab-pane label="退票信息" name="03">
+            <el-form-item label="是否支持退票:" prop="status" label-width="180px">
+              <el-radio v-model="form.type" label="1">是</el-radio>
+              <el-radio v-model="form.type" label="2">否</el-radio>
+            </el-form-item>
+            <el-form-item label="是否支持退票:" prop="status" label-width="180px">
+              <el-radio v-model="form.type" label="1">百分比</el-radio>
+              <el-radio v-model="form.type" label="2">固定值</el-radio>
+            </el-form-item>
+            <el-form-item label="手续费类型与扣费规则:" prop="status" label-width="180px">
+              <div>
+                <div style="margin-bottom: 10px">
+                  <span style="padding-right: 5px">演出开始前</span>
+                  <el-input v-model="form.name" placeholder="票务名称" style="width: 120px" clearable />
+                  <span style="padding-left: 5px">分钟以上，  </span>
+                  <span style="padding-right: 5px">收取</span>
+                  <el-input v-model="form.name" placeholder="票务名称" style="width: 120px" clearable />
+                  <span style="padding-left: 5px">元</span>
+                  <el-button style="padding-left: 15px" type="text">添加</el-button>
+                </div>
+              </div>
+              <div>
+                <span style="padding-right: 5px">演出开始前</span>
+                <el-input v-model="form.name" placeholder="票务名称" style="width: 120px" clearable />
+                <span style="padding-left: 5px">分钟以上，  </span>
+                <span>不允许退票</span>
+              </div>
+            </el-form-item>
+          </el-tab-pane>
+
+          <!--    选座信息     -->
+          <el-tab-pane label="选座信息" name="04">
+            <el-form-item label="是否支持选座:" prop="status">
+              <el-radio v-model="form.type" label="1">是</el-radio>
+              <el-radio v-model="form.type" label="2">否</el-radio>
+            </el-form-item>
+            <el-form-item label="选座渠道:" prop="status">
+              <el-checkbox v-model="form.xcx">小程序</el-checkbox>
+              <el-checkbox v-model="form.ck">窗口</el-checkbox>
+            </el-form-item>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取消</el-button>
+      <el-button
+        type="primary"
+        @click="submitForm"
+        v-loading.fullscreen.lock="loading"
+        element-loading-text="提交中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
+        <span v-if="loading">提交中...</span>
+        <span v-else>保存</span>
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+// import { updateNoticeMgr } from "@/api/system/noticeMgr";
+import { saveAndEdit, getSelectById } from '@/api/programmeMr/programmeMr'
+import { getToken } from "@/utils/auth";
+import { pageList } from '@/api/performMr/performMr'
+export default {
+  name: "addAndEdit",
+  data() {
+    return {
+      channelList: [
+        {id: 1, name: '小程序', value: 1},
+        {id: 2, name: '窗口', value: 2},
+      ],
+      title: "编辑",
+      model: "EDIT",
+      activeName: '01',
+      // 演员信息弹窗
+      performerVisible: false,
+      // 演员信息
+      performerList: [],
+      // 演员上传图片索引
+      performerIndex: 0,
+      open: false,
+      loading: false,
+      form: {
+        id: undefined,
+        type: "",
+        content: "",
+        checkedCities: []
+      },
+      rules: {
+        name: [{ required: true, message: "请输入剧目名称", trigger: "blur" }],
+        sponsorId: [{ required: true, message: "请选择主办方", trigger: "blur" }],
+        status: [{ required: true, message: "请选择是否启用状态", trigger: "blur" }]
+      },
+      uploadObj: {
+        url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
+        Headers: { Authorization: "Bearer " + getToken() },
+      },
+      statusList: [
+        {id: 1, name: '是', value: 1},
+        {id: 2, name: '否', value: 2},
+      ],
+      performList: []
+    };
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询主办方列表 */
+    getList() {
+      pageList({pageNum: 1, pageSize: 100})
+        .then(response => {
+            this.performList = response.data.rows;
+          }
+        );
+    },
+    /** 主办方选择事件 */
+    changePerform(val) {
+      this.performList.forEach(item => {
+        if(item.id == val){
+          this.form.sponsorName = item.name
+        }
+      })
+    },
+    /** 多选框事件 */
+    handleCheckedCitiesChange() {
+
+    },
+    /**
+     * 打开弹框
+     * @date 2023-11-22
+     * @param {any} obj
+     * @returns {any}
+     */
+    openDialog(title, obj) {
+      this.open = true;
+      this.form = {};
+      this.activeName = '01';
+      if (obj){
+        this.title = "编辑票务管理";
+        this.getSelectByIdApi(obj)
+      }else{
+        this.title = "添加票务管理";
+        this.$nextTick(() => {
+          this.$refs["form"].clearValidate();
+        });
+      }
+    },
+    /** 获取详情 */
+    getSelectByIdApi(row) {
+      const id = row.id
+      getSelectById(id).then(response => {
+        const obj = response.data;
+        this.$nextTick(() => {
+          this.$set(this.form, 'id', obj.id);
+        });
+      });
+    },
+    /**
+     * 保存
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    submitForm() {
+      this.$refs["form"].validate(async (valid) => {
+        if (valid) {
+          try {
+            this.loading = true;
+            const { code } = await saveAndEdit({ ...this.form });
+            if (code === 200) {
+              this.$message.success("修改成功!");
+              this.$emit("getList");
+              this.cancel();
+            }
+          } catch (error) {
+          } finally {
+            this.loading = false;
+          }
+        }
+      });
+    },
+    /**
+     * 演员信息添加
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    performerEven() {
+      let target=[...this.performerList];
+      this.form.performerList = JSON.parse(JSON.stringify(target));
+      this.performerVisible = false;
+    },
+    /**
+     * 重置
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    reset() {
+      this.$refs["form"].resetFields();
+      this.form.id = undefined;
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.reset();
+      this.open = false;
+    },
+    /**
+     * 上传成功
+     * @date 2023-11-22
+     * @param {any} res
+     * @returns {any}
+     */
+    handleAvatarSuccess(res) {
+      if (res.code === 200) {
+        // this.form.mainImg = res?.data?.url;
+        this.$set(this.form, 'showImg', res?.data?.url)
+      }
+    },
+    /**
+     * 剧目海报上传成功
+     * @date 2023-11-22
+     * @param {any} res
+     * @returns {any}
+     */
+    handlePhotoListSuccess(res) {
+      if (res.code === 200) {
+        let photo = {
+          imageUrl: res?.data?.url,
+          photoType: '2'
+        }
+        if(!this.form.photoList){
+          this.form.photoList = []
+        }
+        this.form.photoList.push(photo);
+      }
+    },
+    handleRemove(file, fileList) {
+      fileList.forEach(item => {
+        if(item.response && item.response.data){
+          let res = item.response.data;
+          let photo = {
+            imageUrl: res?.data?.url,
+            photoType: '2'
+          }
+          if(!this.form.photoList){
+            this.form.photoList = []
+          }
+          this.form.photoList.push(photo);
+        }
+      })
+    },
+    /**
+     * 上传文件之前之前
+     * @date 2023-11-22
+     * @param {any} file
+     * @returns {any}
+     */
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg" || "image/png";
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是jpg或png格式!");
+      }
+      return isJPG;
+    },
+    /**
+     * 演员新增
+     * @date 2023-11-22
+     */
+    handleAdd() {
+      if(!this.performerList){
+        this.performerList = []
+      }
+      this.performerList.push({})
+    },
+    /**
+     * 演员删除
+     * @date 2023-11-22
+     */
+    handleDelete(row, index) {
+      this.$confirm('是否确认删当前数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.performerList.splice(index, 1);
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    /**
+     * 演员弹窗打开
+     * @date 2023-11-22
+     */
+    performerOpen() {
+      if(!this.form.performerList){
+        this.form.performerList = []
+      }
+      let target=[...this.form.performerList];
+      this.performerList = JSON.parse(JSON.stringify(target));
+      this.performerVisible = true;
+    },
+    /**
+     * 演员图片上传成功
+     * @date 2023-11-22
+     * @param {any} res
+     * @returns {any}
+     */
+    handlePerformerAvatarSuccess(res) {
+      if (res.code === 200) {
+        // this.form.mainImg = res?.data?.url;
+        this.$set(this.performerList[this.performerIndex], 'performerHead', res?.data?.url);
+      }
+    },
+    /**
+     * 演员图片上传点击记录当前索引
+     * @date 2023-11-22
+     * @param {any} row
+     * @returns {any}
+     */
+    changeIndexEven(row) {
+      this.performerIndex = row.$index;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 0 30px;
+  max-height: 65vh;
+  overflow-y: auto;
+}
+.dialog {
+  padding: 0 30px;
+  .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;
+  }
+}
+</style>

src/views/ticketMr/dialog/details.vue

@@ -0,0 +1,281 @@
+<!--
+ * @Description: 详情弹框
+ * @Author: Sugar.
+ * @Date: 2023-11-24 13:55:00
+ * @LastEditors: Sugar.
+ * @LastEditTime: 2023-11-24 13:55:00
+ * @FilePath: \cattle_webui\src\views\performMr\dialog\AddOrEditDialog.vue
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
+-->
+<template>
+  <el-dialog
+    title="剧目信息"
+    :visible.sync="open"
+    width="700px"
+    append-to-body
+    :close-on-click-modal="false"
+    @close="cancel"
+  >
+    <div class="dialog">
+      <!--   基础信息   -->
+      <div class="title-class" style="margin-top: 0">基础信息</div>
+      <el-row>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">剧目名称: <span>{{ form.name }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">主办方: <span>{{ form.sponsorName }}</span></div>
+        </el-col>
+        <el-col :span="24">
+          <div class="grid-content bg-purple item-class">是否启用: <span>{{ form.status == 1 ? '启用' : '未启用' }}</span></div>
+        </el-col>
+      </el-row>
+
+      <!--   演出信息   -->
+      <div class="title-class">演出信息</div>
+      <el-row>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">上映日期: <span>{{ form.releaseDate }}</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">演出时长: <span>{{ form.showDuration }}分钟</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">演出人数: <span>{{ form.peopleNum }}人</span></div>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content bg-purple item-class">演员信息: <el-button style="padding: 0" type="text" @click="performerOpen">查看</el-button></div>
+        </el-col>
+        <el-col :span="24">
+          <div class="grid-content bg-purple item-class">
+            <el-row>
+              <el-col :span="3">
+                <div>宣传图:</div>
+              </el-col>
+              <el-col :span="12">
+                <div v-if="form.showImg">
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="form.showImg"
+                    fit="cover"
+                  />
+                </div>
+                <div v-else>--</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="grid-content bg-purple item-class">
+            <el-row>
+              <el-col :span="3">
+                <div>剧目海报:</div>
+              </el-col>
+              <el-col :span="12">
+                <div v-if="form.photoList && form.photoList.length > 0">
+                  <el-image
+                    v-for="(item, index) in form.photoList"
+                    style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px;"
+                    :src="item.imageUrl"
+                    :key="index"
+                    fit="cover"
+                  />
+                </div>
+                <div v-else>--</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col :span="24">
+          <div class="grid-content bg-purple item-class">
+            <el-row>
+              <el-col :span="3">
+                <div>剧情介绍:</div>
+              </el-col>
+              <el-col :span="12">
+                <div v-html="form.performSnapshot"></div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!--   观影须知   -->
+      <div class="title-class" style="margin-top: 0">观影须知</div>
+      <el-row>
+        <el-col :span="24">
+          <div class="grid-content bg-purple">
+            <el-row>
+              <el-col :span="3">
+                <div>观影须知:</div>
+              </el-col>
+              <el-col :span="12">
+                <div v-html="form.performNotice"></div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="cancel">确定</el-button>
+    </span>
+
+
+    <el-dialog
+      title="演员信息"
+      :visible.sync="performerVisible"
+      width="800px"
+      append-to-body
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+    >
+      <div>
+        <el-table ref="tables"  :data="performerList" border>
+          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
+          <el-table-column label="姓名" align="center">
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.performerName"
+                placeholder="姓名"
+                disabled
+                clearable
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="图片" align="center">
+            <template slot-scope="scope">
+              <div class="avatar" v-if="scope.row.performerHead">
+                <el-image
+                  style="width: 100px; height: 100px"
+                  :src="scope.row.performerHead"
+                  fit="cover"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="角色名" align="center">
+            <template slot-scope="scope">
+              <el-input
+                disabled
+                v-model="scope.row.performerRole"
+                placeholder="角色名"
+                clearable
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="performerVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
+  </el-dialog>
+</template>
+
+<script>
+import { getSelectById } from "@/api/programmeMr/programmeMr";
+import Editor from "@/components/Editor";
+export default {
+  name: "detailsDia",
+  components: {
+    Editor,
+  },
+  data() {
+    return {
+      title: "编辑",
+      model: "EDIT",
+      open: false,
+      loading: false,
+      form: {
+        id: undefined,
+      },
+      performerVisible: false,
+      performerList: []
+    };
+  },
+  methods: {
+    /**
+     * 打开弹框
+     * @date 2023-11-22
+     * @param {any} obj
+     * @returns {any}
+     */
+    openDialog(title, obj) {
+      this.open = true;
+      if (obj){
+        this.getSelectByIdApi(obj)
+      }
+    },
+    /** 获取详情 */
+    getSelectByIdApi(row) {
+      const id = row.id
+      getSelectById(id).then(response => {
+        this.form = response.data;
+
+      });
+    },
+    /**
+     * 演员弹窗打开
+     * @date 2023-11-22
+     */
+    performerOpen() {
+      if(!this.form.performerList){
+        this.form.performerList = []
+      }
+      let target=[...this.form.performerList];
+      this.performerList = JSON.parse(JSON.stringify(target));
+      this.performerVisible = true;
+    },
+    /**
+     * 关闭弹框
+     * @date 2023-11-22
+     * @returns {any}
+     */
+    cancel() {
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  padding: 0 30px;
+  max-height: 65vh;
+  overflow-y: auto;
+}
+.dialog {
+  padding: 0 30px;
+  .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;
+  }
+  .title-class{
+    font-size: 16px;
+    font-weight: bold;
+    color: black;
+    margin-bottom: 20px;
+    margin-top: 20px;
+  }
+  .item-class{
+    margin-bottom: 20px;
+  }
+}
+</style>

src/views/ticketMr/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="票务ID">
+        <el-input
+          v-model="queryParams.id"
+          placeholder="请输入票务ID"
+          clearable
+          style="width: 240px;"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="票务名称">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入票务名称"
+          clearable
+          style="width: 240px;"
+          @keyup.enter.native="handleQuery"
+        />
+      </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="['ticketMr:ticketMr:add']"
+            >新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table ref="tables" v-loading="loading" :data="dataList" border>
+      <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
+      <el-table-column label="票务ID" align="center" prop="name" />
+      <el-table-column label="票务名称" align="center" prop="name" />
+      <el-table-column label="原价" align="center" prop="type">
+        <template slot-scope="scope">
+
+        </template>
+      </el-table-column>
+      <el-table-column label="销售价" align="center" prop="type">
+        <template slot-scope="scope">
+
+        </template>
+      </el-table-column>
+      <el-table-column label="库存" align="center" prop="name" />
+      <el-table-column label="销售时间段" align="center" prop="name" />
+      <el-table-column label="售票渠道" align="center" prop="name" />
+      <el-table-column label="售票渠道" align="center" prop="type">
+        <template slot-scope="scope">
+
+        </template>
+      </el-table-column>
+      <el-table-column label="是否可退" align="center" prop="type">
+        <template slot-scope="scope">
+
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="type">
+        <template slot-scope="scope">
+          <el-switch
+            @change="ionlineApi(scope.row)"
+            v-model="scope.row.status"
+            :active-value="1"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+          </el-switch>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="添加时间" align="center" prop="onlineTime" width="160" >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.onlineTime) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="openDetails(scope.row)"
+            v-hasPermi="['ticketMr:ticketMr:details']"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['ticketMr:ticketMr:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleDelete(scope.row,scope.index)"
+            v-hasPermi="['ticketMr:ticketMr:delete']"
+          >删除</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"
+    />
+
+    <!-- 新增/编辑弹框 -->
+    <add-and-edit
+      ref="addAndEdit"
+      @getList="getList"
+    />
+
+    <!-- 详情 -->
+    <details-dia ref="detailsDia"></details-dia>
+
+  </div>
+</template>
+
+<script>
+
+import { pageList, deleteById, online } from '@/api/programmeMr/programmeMr'
+import addAndEdit from "./dialog/addAndEdit.vue";
+import detailsDia from "./dialog/details.vue";
+
+export default {
+  name: "agreement",
+  dicts: ['agreement_type'],
+  components: { addAndEdit, detailsDia },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      dataList: null,
+      // 弹出层标题
+      title: "",
+
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        type: undefined
+      },
+      statusList: [
+        {id: 1, name: '未发布', value: 0},
+        {id: 2, name: '发布', value: 1},
+        {id: 3, name: '下架', value: 2},
+      ],
+      visibleStatus: false,
+      newObj: {},
+      visibleType: ''
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      pageList(this.addDateRange(this.queryParams, this.dateRange))
+      .then(response => {
+          this.dataList = response.data.rows;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.queryParams.id = "";
+      this.queryParams.name = "";
+      this.queryParams.sponsorName = "";
+      this.queryParams.pageNum = 1;
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.userId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.$refs["addAndEdit"].openDialog("新增数据", null);
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.$refs["addAndEdit"].openDialog("修改数据", row);
+    },
+    /** 详情按钮操作 */
+    openDetails(row) {
+      this.$refs["detailsDia"].openDialog("详情", row);
+    },
+    /** 票务信息按钮操作 */
+    handleMr(row) {
+      this.$refs["programmeAddAndEdit"].openDialog("票务信息", row);
+    },
+
+    /** 发布或者取消发布按钮操作 */
+    ionlineApi(row) {
+      online({ id: row.id, status: !row.status ? 2 : 1 }).then((res) => {
+        if (res.code == 200) {
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          });
+          this.getList();
+        }
+      });
+    },
+
+    // 修改是否启用
+    changeStatus(row) {
+      console.log(row)
+    },
+
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除数据剧目为"' + row.name + '"的数据项？').then(function() {
+        return deleteById(row.id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 查看按钮操作 */
+    seeCenter(obj, type) {
+      this.visibleStatus = true
+      this.visibleType = type;
+      this.newObj = obj;
+    }
+  }
+};
+</script>