应用配置完成

packages/extra/AppModConfig/AppModConfig.vue

@@ -1,20 +1,128 @@
 <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-code-editor'
+import 'bin-code-editor/lib/styles/index.css'
 
+const label = "应用定制配置";
 export default {
   name: "AppModConfig",
-  label: "应用定制配置",
+  label,
+  components: {CodeEditor},
   props: {
     instance: Function,
     dict: Object,
-    permissions: Function
+    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('yesOrNo')
+    this.dict.load('systemType')
+    this.getTableData()
   }
 }
 </script>
@@ -22,5 +130,27 @@ export default {
 <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>