CloseReasonManagement.vue

<template>
  <div class="close-reason-management">
    <div class="toolbar">
      <p class="description">管理商机关闭时可选择的原因</p>
      <el-button @click="addReason" type="primary" size="small">
        <i class="el-icon-plus"></i>
        添加原因
      </el-button>
    </div>

    <div class="reason-table">
      <el-table :data="reasonsList" style="width: 100%" border>
        <el-table-column prop="closeReason" label="关闭原因" width="300"></el-table-column>
        <el-table-column prop="category" label="分类" width="200">
          <template slot-scope="scope">
            <el-tag size="mini">{{ scope.row.category }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button 
              type="text" 
              size="small" 
              @click="editReason(scope.row)"
            >
              编辑
            </el-button>
            <el-button 
              type="text" 
              size="small" 
              @click="deleteReason(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageStore.currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="pageStore.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageStore.total"
      >
      </el-pagination>
    </div>

    <!-- 添加/编辑原因对话框 -->
    <el-dialog
      :title="editingReason ? '编辑关闭原因' : '添加关闭原因'"
      :visible.sync="isAddDialogOpen"
      width="500px"
    >
      <el-form :model="reasonForm" :rules="reasonRules" ref="reasonForm" label-width="100px">
        <el-form-item label="关闭原因" prop="closeReason">
          <el-input 
            v-model="reasonForm.closeReason" 
            placeholder="请输入关闭原因"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="分类" prop="category">
          <el-input 
            v-model="reasonForm.category" 
            placeholder="请输入分类"
          ></el-input>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddDialogOpen = false">取消</el-button>
        <el-button type="primary" @click="submitReasonForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'CloseReasonManagement',
  data() {
    return {
      reasonsList: [],
      pageStore:{
        currentPage: 1,
        pageSize: 20,
        total: 0
      },

      isAddDialogOpen: false,
      editingReason: null,
      reasonForm: {
        reason: '',
        category: ''
      },
      reasonRules: {
        closeReason: [
          { required: true, message: '请输入关闭原因', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请输入分类', trigger: 'blur' }
        ]
      }
    }
  },
  created(){
    this.handleFilter()
  },
  methods: {
    handleSizeChange(size) {
      this.pageStore.pageSize = size
      
      this.handleFilter()
    },
    handleCurrentChange(page) {
      this.pageStore.currentPage = page

      this.queryCloseList()
    },
    handleFilter(){
      this.pageStore.currentPage = 1

      this.queryCloseList()
    },
    queryCloseList(){
      this.apiReq.queryBusiCloseReansonList({
        pageNum: this.pageStore.currentPage,
        pageSize: this.pageStore.pageSize
      }).then(res=>{
        if(res.code == 200){
          this.reasonsList = res.data.records

          this.pageStore.total = res.data.total
        }
      })
    },
    addReason(){
      this.editingReason =  null
      this.reasonForm = {
       category: '',
       closeReason: ''
      }

      this.isAddDialogOpen = true
    },
    editReason(reason) {
      this.editingReason = reason
      this.reasonForm = { ...reason }
      this.isAddDialogOpen = true
    },
    deleteReason(id) {
      this.$confirm('确定要删除该原因吗？此操作不可撤销。', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.apiReq.busiCloseReasonDel({
          id,
        }).then(res=>{
          if(res.code == 200){
            let __this = this
            this.$alert('删除成功', '温馨提示', {
              confirmButtonText: '确定',
              callback: () => {
                __this.handleFilter()
              }
            });
          }else{
            this.$message.error(res.message)
          }
        })
      })
    },
    submitReasonForm() {
      this.$refs.reasonForm.validate((valid) => {
        if (valid) {
          this.apiReq.busiCloseReasonUpdate({
            id: this.editingReason?this.editingReason.id: '',
            category: this.reasonForm.category,
            closeReason: this.reasonForm.closeReason
          }).then(res=>{
            if(res.code == '200'){
              let __this = this
              this.$alert(this.editingReason?'修改成功':'添加成功', '温馨提示', {
                confirmButtonText: '确定',
                callback: () => {
                  __this.handleFilter()
                  __this.isAddDialogOpen = false
                }
              });
            }else{
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.close-reason-management {
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .description {
      color: #909399;
      margin: 0;
    }
  }
  
  .reason-table {
    margin-bottom: 20px;
  }
}
</style>