ohplay_system/src/views/operation/piano/index.vue

<!-- 运营管理 上传壁纸 -->
<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          plain
          @click="getDialog(0, null)"
          v-hasPermi="['operation:piano:add']"
          >新增</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading">
      <!-- <el-table-column
        label="排序"
        align="center"
        type="index"
        show-overflow-tooltip
      /> -->

      <el-table-column label="排序" align="center" width="200px" prop="sort" />

      <el-table-column label="图片" align="center" width="100px">
        <template slot-scope="scope">
          <el-image :src="scope.row.pic" />
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="createTimeStr" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <span style="margin: 0 10px">
            <el-button
              type="text"
              @click="getDialog(1, scope.row)"
              v-hasPermi="['operation:piano:edit']"
              >编辑</el-button
            >

            <el-button
              type="delete"
              @click="getDelete(scope.row)"
              v-hasPermi="['operation:piano:delete']"
              >删除</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="500px"
      :before-close="getDialogClose"
    >
      <el-form
        :model="dialogData"
        ref="dialogData"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item label="上传：" prop="pic">
          <Upload
            listType="picture-card"
            width="480"
            height="480"
            :url="dialogData.pic"
            @upload="uploadCode($event, 'pic')"
          />
        </el-form-item>

        <el-form-item label="排序：" prop="sort">
          <el-input-number v-model="dialogData.sort" :min="1" />
        </el-form-item>

        <el-form-item label="应用类型：" prop="applicationType">
          <input type="checkbox" v-model="isChecked1" /> 小程序
          <input
            type="checkbox"
            style="margin-left: 30px"
            v-model="isChecked2"
          />
          APP
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="getDialogClose">取消</el-button>
        <!-- <el-button @click="getDialogClose">取消</el-button> -->
        <el-button type="primary" @click="getDialogSubmit">确定</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="form.pageNum"
      :limit.sync="form.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { add, deletes, edit, list } from "@/api/operation/piano";
import { currentMixin, devMixin, disabledMixin } from "@/mixin/index";
import { dialogCallBack } from "@/utils/DialogUtil";
export default {
  mixins: [devMixin, currentMixin, disabledMixin],
  data() {
    return {
      isChecked1: false,
      isChecked2: false,

      // 遮罩层
      loading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10,
      },
      // 总数据
      total: 0,
      // 列表
      tableData: [],
      // 弹窗
      dialogVisible: false,
      dialogTitle: "新增",
      picTemp: "",
      dialogData: {
        sort: 1,
      },
      ///弹窗类型
      dialogStatus: 0,

      // 表单验证
      rules: {
        pic: [{ required: true, message: "请上传图片", trigger: "change" }],
        sort: [{ required: true, message: "请选择排序", trigger: "blur" }],
        applicationType: [
          { required: true, message: "请选择应用类型", trigger: "blur" },
        ],
      },
    };
  },

  watch: {},
  mounted() {
    this.getList();
  },

  methods: {
    addData() {},
    // 列表
    getList() {
      this.loading = true;
      list(this.form).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },

    // 弹窗
    async getDialog(status, row) {
      this.dialogVisible = true;
      this.dialogStatus = status;
      ///新增
      if (status == 0) {
        this.dialogData = { sort: 1 };
      }
      ///编辑
      else {
        this.dialogData = row;
        this.picTemp = this.dialogData.pic;
        var applicationType = this.dialogData.applicationType;
        this.isChecked1 = false;
        this.isChecked2 = false;
        if (applicationType != null && applicationType != "") {
          applicationType = applicationType.replace(/[\[\]]/g, "");
          // 使用split按逗号分割字符串
          let result = applicationType.split(",");
          if (result != null && result != "" && result.length > 0) {
            if (result.length == 2) {
              this.isChecked1 = true;
              this.isChecked2 = true;
            } else {
              if (result[0] == "0") {
                this.isChecked1 = true;
              } else {
                this.isChecked2 = true;
              }
            }
          } else {
            if (applicationType == 0) {
              this.isChecked1 = true;
            } else if (applicationType == 1) {
              this.isChecked2 = true;
            }
          }
        }
      }
    },

    // 删除
    getDelete(row) {
      var that = this;
      dialogCallBack(that, function () {
        that
          .$confirm(`是否删除?`, "提示：", {
            type: "warning",
          })
          .then(() => {
            deletes(row.id, 2).then((res) => {
              if (res.code === 0) {
                that.$message.success("删除成功！");
                that.getList();
              }
            });
          });
      });
    },
    // 取消
    getDialogClose() {
      this.dialogVisible = false;
      this.dialogData = { sort: 1 };
      // this.$refs.dialogData.resetFields();
    },

    // 上传
    uploadCode(e) {
      this.picTemp = e.file;
      if (e != null && e.file != "") {
        this.dialogData.pic = e.file;
      }
    },

    // 提交分类表单
    getDialogSubmit() {
      var that = this;
      var pic = this.picTemp;
      // var pic = that.dialogData.pic;
      if (pic == null || pic == "") {
        that.$message.success("请上传图片");
        return;
      }

      var sort = that.dialogData.sort;
      if (sort == null || sort == "") {
        that.$message.success("请选择排序");
        return;
      }

      if (!that.isChecked1 && !that.isChecked2) {
        that.$message.success("请选择应用类型");
        return;
      }

      if (that.isChecked1 && that.isChecked2) {
        that.dialogData.applicationType = "[0,1]";
      } else if (that.isChecked2) {
        that.dialogData.applicationType = "[1]";
      } else {
        that.dialogData.applicationType = "[0]";
      }

      ///新增
      if (that.dialogStatus == 0) {
        add(that.dialogData).then((res) => {
          if (res.code === 0) {
            that.$message.success("添加成功！");
            that.getDialogClose();
            that.getList();
          }
        });
      } else {
        edit(that.dialogData).then((res) => {
          if (res.code === 0) {
            that.$message.success("修改成功！");
            that.getDialogClose();
            that.getList();
          }
        });
      }
    },
  },
};
</script>