部门管理

src/views/pcenter/department.vue

@@ -1,19 +1,114 @@
 <template>
   <div id="department">
-    <p>department</p>
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top"><el-button type="primary" size="mini" @click="add">添加</el-button></el-col>
+        <el-col :span="24">
+          <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="name" label="部门名称" align="center"> </el-table-column>
+            <el-table-column label="操作" align="center">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="view(scope.row.id)">查看</el-button>
+                <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <page :total="total" position="right" @query="search"></page>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog title="部门信息" :visible.sync="dialog" center>
+      <el-form :model="form">
+        <el-form-item label="部门名称" label-width="80px">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onSubmit">确 定</el-button>
+        <el-button @click="dialog = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import page from '@/components/pagination.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: department } = createNamespacedHelpers('department');
 export default {
   name: 'department',
   props: {},
-  components: {},
-  data: () => ({}),
-  created() {},
+  components: { page },
+  data: () => ({
+    dialog: false,
+    form: {},
+    tableData: [],
+    total: 0,
+  }),
+  created() {
+    this.search();
+  },
   computed: {},
-  methods: {},
+  methods: {
+    ...department(['create', 'update', 'query', 'fetch', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      this.$set(this, `tableData`, res.data);
+      this.$set(this, `total`, res.total);
+    },
+    async view(id) {
+      this.dialog = true;
+      const res = await this.fetch(id);
+      this.$set(this, `form`, res.data);
+    },
+    async add() {
+      this.dialog = true;
+      this.form = {};
+    },
+    async del(id) {
+      const res = await this.delete(id);
+      if (res.errcode === 0) {
+        this.$message({
+          message: '信息删除成功',
+          type: 'success',
+        });
+        this.search();
+      } else {
+        this.$message.error('信息删除失败');
+      }
+    },
+    async onSubmit() {
+      this.dialog = false;
+      let res = {};
+      let data = JSON.parse(JSON.stringify(this.form));
+      if (data.id) {
+        res = await this.update(data);
+      } else {
+        res = await this.create(data);
+      }
+      if (res.errcode === 0) {
+        this.$message({
+          message: '信息创建成功',
+          type: 'success',
+        });
+        this.display = true;
+        this.search();
+      } else {
+        this.$message.error('信息创建失败');
+      }
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.style {
+  width: 95%;
+  margin: 0 auto;
+  float: none;
+}
+.top {
+  text-align: right;
+  padding: 0 0 10px 0;
+}
+</style>