新增模块配置

src/views/operation/module/index.vue

@@ -1,57 +1,73 @@
 <template>
   <div class="app-container">
-    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog('新增')">新增</el-button>
+    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog('新增')"
+      v-hasPermi="['operation:module:add']">新增</el-button>
     <!-- 列表 -->
-    <el-table>
+    <el-table :data="tableData">
       <el-table-column label="序号" type="index" align="center"></el-table-column>
-      <el-table-column label="模块类型" align="center"></el-table-column>
-      <el-table-column label="模块组件" align="center"></el-table-column>
+      <el-table-column label="模块类型" prop="typeName" align="center"></el-table-column>
+      <el-table-column label="模块组件" align="center" :formatter="elementIdsFormatter" />
       <el-table-column label="操作" align="center">
-        <template>
-          <el-button type="text" @click="getDialog('查看')">查看</el-button>
-          <el-button type="text" @click="getDialog('编辑')">编辑</el-button>
-          <el-button type="delete">删除</el-button>
+        <template slot-scope="scope">
+          <el-button type="text" @click="getDialog('查看', scope.row.typeId, true)">查看</el-button>
+          <el-button type="text" @click="getDialog('编辑', scope.row.typeId)"
+            v-hasPermi="['operation:module:edit']">编辑</el-button>
+          <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['operation:module:delete']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+      @pagination="getList" />
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" :title="title" width="500px">
-      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px">
-        <el-form-item label="模块类型：" prop="name">
-          <el-input v-model="dialogForm.name" placeholder="请输入模块类型名称" />
+    <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" :before-close="cancel">
+      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px" :disabled="disabled">
+        <el-form-item label="模块类型：" prop="typeName">
+          <el-input v-model="dialogForm.typeName" placeholder="请输入模块类型名称" />
         </el-form-item>
-        <el-form-item label="模块组件：" prop="type">
-          <el-select v-model="dialogForm.type" multiple placeholder="请选择模块组件">
-            <el-option v-for="item in mouldOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-form-item label="模块组件：" prop="elementIds">
+          <el-select v-model="dialogForm.elementIds" multiple placeholder="请选择模块组件">
+            <el-option v-for="item in mouldOptions" :key="item.value" :value="item.value.toString()"
+              :label="item.label" />
           </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="getSubmit">确定</el-button>
+        <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { list, submit, detail, remove } from '@/api/operation/module'
 export default {
   data() {
     return {
+      // 遮罩层
+      loading: false,
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 列表
+      tableData: [],
+      // 总数据
+      total: 0,
       // 弹窗
       dialogVisible: false,
       // 弹窗标题
       title: '新增',
       // 弹窗表单
-      dialogForm: {},
+      dialogForm: {
+        elementIds: []
+      },
       // 模块选择
       mouldOptions: [{
         value: 1,
         label: '标题'
       }, {
-        value: 2,
-        label: '模式'
-      }, {
         value: 3,
         label: '简介'
       }, {
@@ -75,41 +91,88 @@ export default {
       }],
       // 校验
       rules: {
-        name: [{
+        typeName: [{
           required: true, message: '请输入模块类型名称', trigger: 'blur'
         }],
-        type: [{
-          required: true, type: Array, message: '请选择模块组件', trigger: 'change'
+        elementIds: [{
+          required: true, message: '请选择模块组件', trigger: 'change'
         }]
-      }
+      },
+      // 只读
+      disabled: false
     }
   },
   mounted() {
-
+    this.getList()
   },
   methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      list(this.form).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
+        }
+      })
+    },
+
     // 弹窗
-    getDialog(title) {
+    getDialog(title, id, boolean) {
       this.dialogVisible = true
       this.title = title
+      if (id) {
+        detail(id).then(res => {
+          if (res.code === 0) {
+            this.dialogForm = res.data
+          }
+        })
+      }
+      this.disabled = boolean
     },
 
     // 取消
     cancel() {
       this.dialogVisible = false
       this.$refs.dialogForm.resetFields()
+      this.dialogForm = {}
     },
 
     // 提交
     getSubmit() {
       this.$refs.dialogForm.validate((valid) => {
         if (valid) {
-          this.$message.success(`${this.title}成功！`)
-          this.cancel()
+          submit(this.dialogForm).then(res => {
+            if (res.code === 0) {
+              this.getList()
+              this.$message.success(`${this.title}成功！`)
+              this.cancel()
+            }
+          })
         } else {
           return false
         }
       })
+    },
+
+    // 删除
+    getDelete(row) {
+      this.$confirm(`是否删除${row.typeName}?`, '提示', {
+        type: 'warning'
+      }).then(() => {
+        remove(row.typeId).then(res => {
+          if (res.code === 0) {
+            this.$message.success('删除成功！')
+            this.getList()
+          }
+        })
+      }).catch(() => { })
+    },
+
+    // 字典翻译
+    elementIdsFormatter(row) {
+      return row.elementIds.map(i => this.selectDictLabel(this.mouldOptions, i)).join('，')
     }
   }
 }