peko-admin-web/src/views/GiftPanelManagement/GiftPanelManagement.vue

<template>
  <div class="box">
    <!-- 选择分区 -->
    <div class="inquire">
      <div class="block">
        <span class="demonstration">选择分区</span>
        <el-select
          v-model="inquire.partitionId"
          style="width: 75%"
          placeholder="请选择"
          @change="handleChange"
        >
          <el-option
            v-for="item in inquire.inquireonInfos"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="seq" align="center" label="排序" />
      <el-table-column prop="name" align="center" label="礼物面板类型" />
      <el-table-column prop="enable" align="center" label="是否生效">
        <template v-slot="scope">{{ scope.row.enable ? "是" : "否" }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <el-button
            @click="ediClick(scope.row)"
            class="primary"
            type="primary"
            size="default"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="eidDialog" :title="eidDialogTitle" width="30%" center>
      <!-- 礼物面板类型 -->
      <div style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; white-space: nowrap; margin-right: 70px"
          class="col-sm-2 control-label"
          >礼物面板类型</span
        >
        <el-input
          v-model="eidObj.type"
          style="width: 60%"
          class="input"
          placeholder="请输入"
          disabled
        ></el-input>
      </div>
      <!-- 面板排序 -->
      <div style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; white-space: nowrap; margin-right: 70px"
          class="col-sm-2 control-label"
          >面板排序-{{ eidText }}</span
        >
        <el-input
          v-model="eidObj.seq"
          style="width: 60%"
          class="input"
          placeholder="请输入"
        ></el-input>
      </div>
      <!-- 是否生效 -->
      <div style="margin-bottom: 25px; margin-top: 10px">
        <span
          style="display: inline-block; white-space: nowrap; margin-right: 70px"
          class="col-sm-2 control-label"
          >是否生效</span
        >
        <el-select
          v-model="eidObj.value"
          style="width: 60%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in eidObj.option"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="eidDialog = false">取消</el-button>
          <el-button type="primary" @click="eidDialogClick()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { list, update } from "@/api/GiftPanelManagement/GiftPanelManagement";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
export default {
  name: "GiftPanelManagement",
  data() {
    return {
      loading: false,
      //查询所需条件对象
      inquire: {
        partitionId: 4,
        inquireonInfos: [
          { desc: "英语区", id: 1 },
          { desc: "阿拉伯区", id: 2 },
          { desc: "华语区", id: 4 },
        ],
      },
      // 表格
      tableData: [],
      // 编辑
      eidDialog: false,
      eidDialogTitle: "",
      eidText: "",
      eidObjNew: {},
      eidObj: {
        type: "",
        clientName: "",
        seq: "",
        value: "",
        option: [
          {
            desc: "是",
            id: true,
          },
          {
            desc: "否",
            id: false,
          },
        ],
      },
    };
  },
  created() {
    this.eidDialogTitle = `编辑礼物面板信息-华语区`;
    this.eidText = `华语区`;
    this.getData();
  },
  methods: {
    // 查询接口
    getData() {
      this.loading = true;
      list({
        partitionId: this.inquire.partitionId,
      }).then((res) => {
        this.tableData = res.data;
        this.loading = false;
      });
    },
    ediClick(val) {
      this.eidDialog = true;
      this.eidObj.type = val.name;
      this.eidObj.seq = val.seq;
      this.eidObj.value = val.enable;
      this.eidObjNew = val;
    },
    eidDialogClick() {
      update({
        enable: this.eidObj.value,
        id: this.eidObjNew.id,
        seq: this.eidObj.seq,
        partitionId: this.inquire.partitionId,
      }).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: "编辑成功",
            type: "success",
          });
          this.eidDialog = false;
          this.getData();
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    handleChange(val) {
      console.log(val);
      if (val == 1) {
        this.eidDialogTitle = `编辑礼物面板信息-英语区`;
        this.eidText = `英语区`;
      } else if (val == 2) {
        this.eidDialogTitle = `编辑礼物面板信息-阿拉伯区`;
        this.eidText = `阿拉伯区`;
      } else if (val == 4) {
        this.eidDialogTitle = `编辑礼物面板信息-华语区`;
        this.eidText = `华语区`;
      }
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;
  .inquire {
    display: inline-block;
    margin-right: 70px;
    span {
      margin-right: 10px;
    }
    .input {
      width: 180px;
      margin-right: 10px;
    }
  }
  .dialogTableVisibleBut {
    display: block;
    margin: 30px 0 0 830px;
  }
  .paginationClass {
    margin: 15px 0 5px 0px;
  }
}
</style>