pc-admin/src/views/AppController/index.vue

<template>
  <div class="body">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button
          type="primary"
          style="float: right"
          icon="el-icon-plus"
          @click="dialogFormVisible = true"
        >新建应用</el-button>
      </div>
      <div class="text item">
        <el-table stripe :data="tableData" border style="width: 100%">
          <el-table-column prop="appName" label="应用名称" min-width="100" />

          <el-table-column align="center" label="操作" min-width="100" width="500">
            <template slot-scope="scope">
              <el-link
                :underline="false"
                style="margin-right:1em"
                type="primary"
                @click="handeldialog(scope.row.appId)"
              >编辑</el-link>
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                title="确定要删除该配置吗？"
                @onConfirm="handleDelete(scope.row.appId)"
              >
                <el-link slot="reference" type="danger" :underline="false">删除</el-link>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="WxTotal!==0"
          style="float:right; margin:20px 0"
          :total="WxTotal"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[pageSize, 20, 35,40,50,80,100]"
          layout="total, prev, pager, next, sizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      :title="!APP_ID?'新建应用':'修改应用'"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="10vw"
        class="demo-ruleForm"
      >
        <el-form-item label="应用名称" prop="appName" style="width:30vw">
          <el-input v-model="ruleForm.appName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">{{ !APP_ID?'新建应用':'修改应用' }}</el-button>

        <el-button @click="closeDialog('ruleForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAppControllerList,
  DeleteAppController,
  saveAppController,
  detailsAppController,
  ChangeAppController
} from '@/api/AppControllerApi'

export default {
  data() {
    return {
      APP_ID: '',
      ruleForm: {
        appName: '',
        secret: ''
      },
      rules: {
        appName: [
          { required: true, message: '请输入应用名称', trigger: 'blur' }
        ]
      },
      appName: undefined,
      dialogFormVisible: false,
      tableData: [],
      //
      pageSize: 10,
      currentPage: 1,
      WxTotal: 0 // 条目总数
    }
  },
  // -----------模态框事件------------
  watch: {
    APP_ID: function (newAppID, oldVal) {
      detailsAppController(newAppID).then((res) => {
        this.ruleForm = res.data
      })
    }
  },
  mounted() {
    this.onSearch()
    if (this.APP_ID) {
      detailsAppController(this.APP_ID).then((res) => {
        this.ruleForm = res.data
      })
    }
  },
  methods: {
    // 取消
    closeDialog(formName) {
      this.APP_ID = ''
      this.$refs[formName].resetFields()

      this.dialogFormVisible = false
    },
    // 确定
    handeldialog(e) {
      this.APP_ID = e
      this.dialogFormVisible = true
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.APP_ID == '') {
            saveAppController(this.ruleForm)
              .then((e) => {
                this.$message.success('配置保存成功')
                this.dialogFormVisible = false
                this.$refs[formName].resetFields()
                this.onSearch()

                console.log('保存字段', e)
              })
              .catch((e) => {
                this.$message.error('保存失败', e)
              })
          } else {
            ChangeAppController(this.ruleForm, this.APP_ID).then((res) => {
              this.$message.success('配置修改成功')
              this.dialogFormVisible = false
              this.onSearch()
            })
          }
        } else {
          return false
        }
      })
    },

    // -----------模态框事件结束------------

    // 改变每页显示条数
    handleSizeChange(val) {
      this.pageSize = val
      this.changePagination()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.changePagination()
    },
    // 改变分页组件重新查询数据
    changePagination() {
      getAppControllerList({
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }).then((res) => {
        this.tableData = res.data.records
      })
    },

    handleAdd() {
      // this.$router.push({ path: 'AppController/Edit' });
      this.dialogFormVisible = true
    },

    handleDelete(APP_DELETE) {
      DeleteAppController(APP_DELETE).then(() => {
        this.onSearch()
      })
    },
    onSearch() {
      getAppControllerList({
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }).then((res) => {
        console.log('🚀 ~ file: index.vue ~ line 118 ~ onSearch ~ res', res)
        this.tableData = res.data.records
        this.WxTotal = res.data.total
      })
    },
    onReset() {
      this.appName = ''

      this.onSearch()
    }
  }
}
</script>