duoji-frontend/src/views/application/web/list.vue

<template>
    <content-view>
        <div class="roleList">
            <reset-search ref="form" :form.sync="searchObj">
                <table class="table-form">
                    <tr>
                        <td width="78">应用名称：</td>
                        <td>
                            <a-input placeholder="请输入应用名称" v-model="searchObj.name"></a-input>
                        </td>

                        <td width="70">应用KEY：</td>
                        <td>
                            <a-input placeholder="请输入应用KEY" v-model="searchObj.key"></a-input>
                        </td>

                        <td>
                            <a-button type="primary" class="mr8" @click="query">查询</a-button>
                            <a-button @click="reset">重置</a-button>
                        </td>
                    </tr>
                </table>
            </reset-search>

            <p class="mt24 mb16">
                <a-button type="primary" @click="add" :disabled="addAuth">
                    <a-icon type="plus"></a-icon>
                    <span>新增</span>
                </a-button>
            </p>

            <!-- modal -->
            <a-modal
                v-model="visible"
                title="新增应用"
                @ok="modalOk"
                @cancel="modalCancel"
                cancelText="取消"
                okText="确定"
            >
                <a-form :form="formModal" :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }">
                    <a-form-item label="应用名">
                        <a-input
                            autocomplete="off"
                            placeholder="请输入应用名"
                            v-decorator="['name', { rules: [{ required: true, min:2, max: 10, message: '请输入2-10位应用名称' }] }]"
                        ></a-input>
                    </a-form-item>
                </a-form>
            </a-modal>

            <!-- table -->
            <a-table :columns="columns" :dataSource="dataSource">
                <template slot="action" slot-scope="text, record">
                    <a
                        :disabled="detailAuth"
                        href="javascript:;"
                        class="mr8"
                        @click="$router.push({name: 'appDetailIndex', query: {id: record.id}})"
                    >查看详情</a>
                    <a-popconfirm
                        title="确认是否删除该应用"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="deleteConfirm(record)"
                        @cancel="deleteCancel(record)"
                    >
                        <a-icon slot="icon" type="close-circle" style="color: red" />
                        <a href="#" :disabled="removeAuth">删除</a>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>
    </content-view>
</template>

<script>
export default {
    name: "appList",
    data() {
        return {
            searchObj: {
                name: "",
                key: ""
            },
            // add
            visible: false,
            formModal: this.$form.createForm(this),
            // table
            columns: [
                {
                    title: "序号",
                    customRender: (text, record, index) => {
                        return index + 1;
                    }
                },
                {
                    title: "应用名",
                    dataIndex: "name"
                },
                {
                    title: "应用KEY",
                    dataIndex: "key"
                },
                {
                    title: "应用secret",
                    dataIndex: "secret"
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    scopedSlots: {
                        customRender: "action"
                    }
                }
            ],
            dataSource: []
        };
    },
    computed: {
        addAuth() {
            return this.$store.state.userInfo.permissionList.some(
                item => item.rights === "addApp"
            )
                ? false
                : true;
        },
        detailAuth() {
            return this.$store.state.userInfo.permissionList.some(
                item => item.rights === "appDetailIndex"
            )
                ? false
                : true;
        },
        removeAuth() {
            return this.$store.state.userInfo.permissionList.some(
                item => item.rights === "removeApp"
            )
                ? false
                : true;
        }
    },
    methods: {
        query() {
            this.getList();
        },
        reset() {
            this.searchObj = this.$utils.cleanData(this.searchObj);
            this.query();
        },
        // 应用列表
        getList() {
            this.$api.appApi
                .appList({
                    data: {
                        ...this.searchObj
                    }
                })
                .then(res => {
                    this.dataSource = res.data;
                });
        },
        // 新增
        add() {
            this.visible = true;
        },
        modalOk() {
            this.formModal.validateFields((err, values) => {
                console.log(err, values);
                if (!err) {
                    this.$api.appApi
                        .addApp({
                            data: values
                        })
                        .then(res => {
                            console.log(res);
                            this.$message.success("新增成功");
                            this.query();
                            this.modalCancel();
                        });
                }
            });
        },
        modalCancel() {
            this.formModal.resetFields();
            this.visible = false;
        },
        // 是否删除
        deleteConfirm(record) {
            console.log(record);
            this.$api.appApi
                .removeApp({
                    path: {
                        id: record.id
                    }
                })
                .then(res => {
                    console.log(res);
                    this.$message.success("操作成功");
                    this.reset();
                });
        },
        deleteCancel(record) {
            console.log(record);
        }
    },
    mounted() {
        this.getList();
    }
};
</script>

<style lang="scss"></style>