SxsnPC/src/views/modules/supplier/organizer.vue

<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-home">
            <div class="page-title">{{ pageTitle }}</div>
            <div class="btns adf">
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增举办方</el-button>
            </div>
            <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无举办方" style="margin-top: 16px;">
                <el-table-column prop="channelName" label="举办方名称"></el-table-column>
                <el-table-column prop="contactName" label="联系人"></el-table-column>
                <el-table-column prop="contactPhone" label="联系方式"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog width="700px" :visible.sync="show" :title="title" @close="cancel">
          <el-form ref="formRef" :model="form" :rules="rules" label-width="110px" style="width: 80%;margin: 0 auto;">
            <el-form-item label="举办方名称" prop="channelName">
              <el-input v-model="form.channelName" placeholder="请输入举办方名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contactName">
              <el-input v-model="form.contactName" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="form.contactPhone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 200px;">
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
          </div>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
  data () {
    return {
      pageTitle: '',
      dataList: [],
      loading: false,
      show: false,
      title: '新增举办方',
      form: {
        id: '',
        channelName: '',
        contactName: '',
        contactPhone: '',
        type: 2
      },
      rules: {
        channelName: [
          { required: true, message: '请输入举办方名称', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ]
      },
      buttonLoading: false
    }
  },
  mounted () {
    this.pageTitle = this.$router.currentRoute.meta.title
    this.getDataList()
  },
  methods: {
    handleAdd () {
      this.title = '新增举办方'
      this.show = true
    },
    handleEdit (row) {
      this.title = '编辑举办方'
      this.$http.get('/core/channel/' + row.id).then(({ data: res }) => {
        this.form = { ...this.form, ...res.data }
        this.show = true
      })
    },
    handleDelete (row) {
      this.$confirm(`确定要删除举办方【${row.channelName}】吗？`, '提示', {
        type: 'warning'
      }).then(() => {
        this.$http.delete('/core/channel', { 'data': [row.id] }).then(res => {
          if (res.data.code !== 0) return this.$message.error(res.data.msg)
          this.$message.success('删除成功')
          this.getDataList()
        })
      })
    },
    getDataList () {
      const params = { page: 1, limit: -1, type: 2 }
      this.$http.get('/core/channel/page', { params }).then(({ data: res }) => {
        if (res.code !== 0) return this.$message.error(res.msg)
        this.dataList = res.data.list
      })
    },
    submitForm () {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.$http[this.form.id ? 'put' : 'post']('/core/channel', this.form).then(res => {
            if (res.data.code !== 0) {
              return this.$message.error(res.data.msg)
            }
            this.$message.success('保存成功')
            this.cancel()
            this.getDataList()
          })
        } else {
          return false
        }
      })
    },
    cancel () {
      this.form = {
        id: '',
        channelName: '',
        contactName: '',
        contactPhone: '',
        type: 2
      }
      this.$refs['formRef'].resetFields()
      this.show = false
    }
  }
}
</script>

<style scoped lang="scss">
.page-title{
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 16px;
    color: #252525;
    line-height: 22px;
}
.btns{
    justify-content: flex-end;
    margin-top: -10px;

}
</style>