yubaitong-admin/src/view/business/business-type.vue

<template>
  <div class="page-box" v-loading="loading > 0">
    <Header :title="title"></Header>
    <div class="container">
      <div class="content">
        <!-- 表格 -->
        <div class="btn" @click="handleModal('add')">+添加商家类型</div>
        <el-table
          :data="list"
          class="table no-border-table"
          ref="table"
          :header-cell-style="{
            border: 'none',
            color: '#333',
            background: '#f6f6f6',
            borderBottom: '1px solid #E8E8E8',
            height: '54px',
          }"
          :row-style="{
            height: '54px',
          }"
        >
          <el-table-column
            type="index"
            :index="tableIndex"
            align="center"
            label="编号"
            width="120"
          ></el-table-column>
          <el-table-column prop="pic" align="center" label="商家类型图标">
            <div slot-scope="scope">
              <img class="table-img" :src="scope.row.pic" alt="" />
            </div>
          </el-table-column>
          <el-table-column prop="name" align="center" label="类型名称">
          </el-table-column>
          <el-table-column prop="orderBy" align="center" label="排序">
            <div slot-scope="scope" @click="changeSortModal(scope.row.id)">
              {{ scope.row.orderBy }}
            </div>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <div
              slot-scope="scope"
              style="display: flex; justify-content: center"
            >
              <div>
                <button
                  size="mini"
                  class="table-btn"
                  @click="handleModal('edit', scope.row)"
                >
                  编辑
                </button>
              </div>
              <div>
                <button
                  size="mini"
                  class="table-btn"
                  @click="handleDelete(scope.row.id)"
                >
                  删除
                </button>
              </div>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页按钮 -->
      <div class="footer">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          background
          layout="total, prev, pager, next, jumper"
          :page-size="size"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="addShow" class="dialog" width="560px" top="25vh">
      <div slot="title" class="dialog-title">
        {{ (type === "add" ? "新增" : "编辑") + "商家类型" }}
      </div>
      <el-form
        ref="form"
        :rules="rules"
        :model="addForm"
        class="form"
        label-width="auto"
      >
        <el-form-item label="商家类型名称：" prop="name" class="form-item">
          <el-input
            placeholder="请输入分类名称"
            class="add-renovation-input"
            style="width: 160px"
            v-model="addForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="sort" class="form-item">
          <el-input
            placeholder="请输入序号"
            class="add-renovation-input"
            style="width: 160px"
            v-model.number="addForm.orderBy"
            type="number"
            onkeypress="return( /[\d]/.test(String.fromCharCode(event.keyCode)))"
          ></el-input>
          <div class="sort-tip">数值越大，排序越靠前</div>
        </el-form-item>
        <el-form-item class="img_item" prop="pic" label="图片：">
          <div class="addImg">
            <div class="img-box">
              <img ref="img" :src="addForm.pic" v-if="addForm.pic" />
              <div class="icon" v-else>
                <p><i class="el-icon-plus" style="font-size: 32px"></i></p>
                <!-- <p>图片</p>
                <p class="tip">支持扩展名：.jpg .png</p> -->
              </div>
              <input
                type="file"
                class="file"
                ref="inputImg"
                @change="addChangeImg"
              />
            </div>
            <p class="tips">支持jpg、png格式</p>
          </div>
        </el-form-item>
        <el-form-item label="打赏上限比例：" prop="ratio" class="form-item">
          <el-input
            placeholder="请输入打赏上限比例"
            class="add-renovation-input"
            style="width: 160px"
            v-model.number="addForm.ratio"
            type="number"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel-btn btn" @click="addShow = false"
          >取 消</el-button
        >
        <el-button class="confirm-btn btn" @click="handleConfirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../../components/common/header';
export default {
  components: {
    Header
  },
  name: 'banner',
  data() {
    return {
      loading: 0, // 加载中
      currentPage: 1, // 当前页码
      size: 20, // 每页条数
      total: 0, // 总页数
      title: {
        // 页面标题
        firstTitile: '商家管理',
        secondTitle: '商家类型'
      },
      list: [], // 轮播列表
      rules: {},
      addForm: {
        pic: '',
        name: '',
        orderBy: null,
        ratio: null
      },
      addShow: false,
      id: null,
      type: ''
    };
  },
  mounted() {
    // 获取列表
    this.getList();
  },
  computed: {},
  methods: {
    // 表格序号
    tableIndex(index) {
      return ++index;
    },
    // 切换页码
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    },
    // 获取轮播列表
    getList() {
      this.loading++;
      this.httpGet(this.$root.getBusinessTypeList, {}).then(
        (res) => {
          this.loading--;
          this.list = res.list;
          this.total = res.total;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    // 编辑轮播弹窗
    handleModal(type, rowData) {
      this.type = type;
      if (type === 'edit') {
        this.id = rowData.id;
        this.addForm = {
          pic: rowData.pic,
          name: rowData.name,
          orderBy: rowData.orderBy,
          ratio: rowData.ratio
        };
      } else {
        this.addForm = {
          pic: '',
          name: '',
          orderBy: null,
          ratio: null
        };
        this.$refs.form && this.$refs.form.clearValidate();
      }
      this.addShow = true;
    },
    // 删除
    handleDelete(id) {
      this.$confirm(
        `<p class='title'><i class='icon el-icon-question'></i>提醒</p><p class='text'>确定要删除该类型吗？</p>`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-btn',
          confirmButtonClass: 'confirm-btn',
          customClass: 'confirm-box',
          dangerouslyUseHTMLString: true,
          showClose: false,
          type: 'none'
        }
      ).then(() => {
        this.loading++;
        this.httpDelete(this.$root.deleteBusinessType, {
          id
        }).then(
          (res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.loading--;
            this.getList();
          },
          (res) => {
            this.loading--;
            this.$message.error(res);
          }
        );
      });
    },
    //
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let url =
            this.type === 'add'
              ? this.$root.addBusinessType
              : this.$root.updateBusinessType;
          let method = this.type === 'add' ? 'httpPost' : 'httpPut';
          let inputData =
            this.type === 'add'
              ? {
                  ...this.addForm
                }
              : {
                  ...this.addForm,
                  id: this.id
                };
          inputData.ratio = +inputData.ratio;
          this.loading++;
          this[method](url, inputData).then(
            (res) => {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.loading--;
              this.addShow = false;
              this.getList();
            },
            (res) => {
              this.loading--;
              this.$message.error(res);
            }
          );
        }
      });
    },
    // 图片改变
    addChangeImg(e) {
      this.upPic(e, (res) => {
        this.$set(this.addForm, 'pic', res);
        // 清空input value，解决重复图片不触发change
        this.$refs.inputImg.value = '';
        this.$refs.form.clearValidate(['pic']);
      });
    },
    // 上传图片
    upPic(e, fun) {
      // 上传图片
      let file = e.target.files[0];
      if (!file) {
        return;
      }
      this.request.upPic({ prefix: 'other', file: file }).then(
        (res) => {
          fun(res);
        },
        (res) => {}
      );
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~assets/public.styl';
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.page-box {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;

  .container {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    flex-y(flex-start, flex-start);
    padding: 24px;

    // content 表格
    .content {
      flex: 1;
      width: 100%;
      font-size: 14px;
      background: white;
      box-sizing: border-box;
      padding: 24px 32px;
      border-radius: 2px;

      // 按钮
      .btn {
        // width: 100px;
        display: inline-block;
        padding: 0 16px;
        height: 32px;
        line-height: 32px;
        confirm-btn();
        font-size: 14px;
        margin-bottom: 16px;
        // margin: 16px 0;
      }

      .tip {
        margin-left: 32px;
        color: #999;
      }

      // 表格按钮
      .table-btn {
        width: 65px;
        height: 24px;
        line-height: 24px;
        color: gray3;
        font-size: 12px;
        margin-right: 8px;
        cancel-btn();
      }

      .table-img {
        height: 36px;
        width: auto;
      }
    }
  }

  .dialog-content {
    flex-y();
  }

  .addImg {
    .icon {
      width: 80px;
      height: 80px;
      background: #E8E8E8;
      border-width: 0;

      i {
        color: #979797;
      }
    }
  }

  .form {
    margin-top: 16px;
    margin-bottom: 30px;
    padding-left: 80px;

    .form-item {
      margin-top: 24px;
    }

    .sort-tip {
      word(14px, #c8c8c8);
      line-height: 20px;
    }
  }
}
</style>