dvcp_v2_webapp/packages/extra/AppModConfig/AppModConfig.vue

<template>
  <section class="AppModConfig">
    <ai-list>
      <ai-title slot="title" :title="menuName" isShowBottomBorder/>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" @click="drawer=true">新增</el-button>
          </template>
          <template #right>
            <el-input size="small" v-model="search.name" clearable placeholder="应用名称" @change="page.current=1,getTableData()"/>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" @getList="getTableData" :total="page.total" :current.sync="search.current" :size.sync="search.size"
                  :colConfigs="colConfigs" :dict="dict" class="w100">
          <el-table-column label="操作" slot="options" align="center" width="140px">
            <template slot-scope="{row}">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <el-drawer title="定制配置" :visible.sync="drawer" @close="form={config:''}" custom-class="drawer">
      <div flex class="column h100 pad-b8 w100">
        <el-form size="small" ref="DrawerForm" :model="form" :rules="rules" class="fill w100 pad-r16 pad-l16" label-position="top">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="应用类型" prop="app">
            <ai-select v-model="form.app" :selectList="dict.getDict('systemType')"/>
          </el-form-item>
          <el-form-item label="配置" prop="config">
            <el-alert title="使用F7可以格式化json" center show-icon/>
            <code-editor v-model="form.config" auto-format :lint="false"/>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center" class="footer">
          <el-button @click="drawer=false">取消</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-row>
      </div>
    </el-drawer>
  </section>
</template>

<script>
import CodeEditor from 'bin-ace-editor'
import 'brace/mode/json'
import 'brace/snippets/json';
import 'brace/theme/github';
import 'brace/theme/monokai';

const label = "应用定制配置";
export default {
  name: "AppModConfig",
  label,
  components: {CodeEditor},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    menuName: {default: label}
  },
  data() {
    return {
      page: {current: 1, size: 10, total: 0},
      search: {con: ""},
      tableData: [],
      colConfigs: [
        {label: "应用名称", prop: "name"},
        {label: "应用类型", prop: "app", dict: "systemType"},
      ],
      form: {config: ""},
      drawer: false,
      rules: {
        name: [{required: true, message: "请设置应用名称"}],
        app: [{required: true, message: "请设置应用模块名"}],
        config: [{required: true, message: "请设置定制配置"}],
      }
    }
  },
  methods: {
    getTableData() {
      this.instance.post("/app/appmodconfig/list", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    handleEdit(row) {
      this.form = this.$copy(row)
      this.drawer = true
    },
    handleDelete(ids) {
      this.$confirm("是否要进行删除?").then(() => {
        this.instance.post("/app/appmodconfig/delete", null, {
          params: {ids}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getTableData()
          }
        })
      }).catch(() => 0)
    },
    submit() {
      this.$refs.DrawerForm.validate(v => {
        if (v) {
          this.instance.post("/app/appmodconfig/addOrUpdate", this.form).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.drawer = false
              this.getTableData()
            }
          })
        }
      })
    }
  },
  created() {
    this.dict.load('systemType')
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.AppModConfig {
  height: 100%;

  .h100 {
    height: 100%;
  }

  .w100 {
    width: 100%;
  }

  :deep(.drawer) {
    width: 1000px !important;

    .el-alert__content {
      line-height: normal;
    }

    .footer {
      .el-button {
        min-width: 90px;
      }
    }
  }
}
</style>