sasp-admin 0.2.57

package/src/views/data/sysData.vue

@@ -0,0 +1,292 @@
+<template>
+    <el-container style="height: 100%">
+        <el-header style="height: auto;">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" :model="crud.searchForm" size="small" class="demo-form-inline"
+                         @keyup.enter.native="doSearch()" onSubmit="return false;">
+                    <el-form-item label="类型名称">
+                        <el-input v-model="crud.searchForm.typeNamePinYin" placeholder="类型名称"></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="是否启用">
+                        <el-select v-model="crud.searchForm.sfqy" placeholder="请选择">
+                            <el-option
+                                    v-for="item in sfqyOptions"
+                                    :key="item.id"
+                                    :label="item.name"
+                                    :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search" @click="doSearch()">查询</el-button>
+                        <el-button icon="el-icon-close" @click="resetSearch()">清空</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-header>
+
+        <el-main id="tableMain" style="height: 100%">
+            <el-container style="height:100%" class="table-list-container">
+                <el-header style="height: auto;" size="medium">
+                    <el-button type="primary" size="small" round icon="el-icon-circle-plus" @click="dataTypeAdd">新增
+                    </el-button>
+                    <el-button type="danger" size="small" round icon="el-icon-delete" @click="remove()">删除
+                    </el-button>
+                    <el-button type="danger" size="small" round icon="el-icon-refresh-right" @click="resreshCache()">
+                        刷新缓存
+                    </el-button>
+                </el-header>
+                <el-main style="height: 100%;" ref="tableMain">
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef" @row-dblclick="beginRowEdit" stripe border height="100%" header-row-class-name="list-default-row"
+                              style="width: 100%;">
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+                        <el-table-column label="类型名称" prop="typeName">
+                            <template slot-scope="scope">
+                                <div v-if="scope.row.caseEdit">
+                                    <el-input v-model="scope.row.typeName" style="width: 70%"></el-input>
+                                </div>
+                                <div v-else @click="showId(scope.row)">
+                                    {{scope.row.typeName}}
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="是否启用" prop="sfqy">
+                            <template slot-scope="scope">
+                                <div v-if="scope.row.caseEdit">
+                                    <el-switch
+                                            v-model="scope.row.sfqy"
+                                            active-text="启用"
+                                            inactive-text="禁用"
+                                            active-value="Y"
+                                            inactive-value="N">
+                                    </el-switch>
+                                </div>
+                                <div v-else>
+                                    <el-tag :type="scope.row.sfqy != 'Y' ? 'info' : 'success'">
+                                        {{scope.row.sfqy!='Y'?'禁用':'启用'}}
+                                    </el-tag>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" width="200">
+                            <template slot-scope="scope">
+                                <div v-if="scope.row.caseEdit">
+                                    <el-button size="small" icon="el-icon-success" type="primary"
+                                               @click="saveDataType(scope.row)">
+                                        保存
+                                    </el-button>
+                                    <el-button size="small" icon="el-icon-error" type="primary"
+                                               @click="cancelAdd(scope.row)">
+                                        取消
+                                    </el-button>
+                                </div>
+                                <div v-else>
+                                    <el-button size="small" icon="el-icon-edit" type="primary"
+                                               @click="dataManage(scope.row)">
+                                        字典管理
+                                    </el-button>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-main>
+            </el-container>
+
+            <el-dialog :close-on-click-modal=false title="数据字典类型" :visible.sync="crud.dialogVisible" lock-scroll>
+                <el-form :ref="crud.addFormRef" :model="crud.formData" label-width="120px" style="width:95%;">
+                    <el-form-item label="类型名称" prop="typeName" :rules="[
+            { required: true, message: '请输入类型名称', trigger: 'blur' }
+          ]">
+                        <el-input v-model="crud.formData.typeName"></el-input>
+                    </el-form-item>
+                    <el-form-item label="是否启用" prop="sfqy">
+                        <el-switch
+                                v-model="crud.formData.sfqy"
+                                active-text="启用"
+                                inactive-text="禁用"
+                                active-value="Y"
+                                inactive-value="N">
+                        </el-switch>
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="crud.formSubmit()" size="small" icon="el-icon-success">确 定</el-button>
+                    <el-button @click="crud.dialogVisible = false" size="small" icon="el-icon-error">取 消</el-button>
+                </div>
+            </el-dialog>
+        </el-main>
+
+        <el-footer>
+            <el-pagination
+                    :ref="crud.pageRef"
+                    :page-sizes="crud.pageSizes"
+                    :page-size="crud.pageSize"
+                    :current-page="crud.page"
+                    :total="crud.dataStore.total"
+                    @size-change="sizeChange()"
+                    @current-change="currentPage()"
+                    layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+        <el-dialog :close-on-click-modal=false title="数据字典管理   (右键节点查看更多操作,shift或ctrl + 左键点击节点文字对节点进行快捷选择)"
+                   width="60%" height="80%" top="10vh" class="dataManage_dialog" :visible.sync="dataManageDialog" append-to-body destroy-on-close>
+            <data-manage :typeId="typeId" :typeName="typeName"></data-manage>
+        </el-dialog>
+    </el-container>
+</template>
+
+<script>
+    import DataManage from "./dataManage";
+    export default {
+        name: "sys-data",
+        components: {
+            DataManage,
+        },
+        data() {
+            return {
+                crud: new this.CrudUtil({
+                    vue: this,
+                    entityName: "dataType",
+                    url: this.api.dataType.url,
+                    methodSymbol:'/',
+                    searchForm:{"order":"CREATE_TIME desc"},
+                    addDefaultData:{sfqy:"Y"},
+                    noClearSearchColumns:["order"]
+                }),
+                sfqyOptions: [{id: "Y", name: "是"}, {id: "N", name: "否"}],
+                typeId:"",
+                typeName:"",
+                dataManageDialog:false, // 数据字典管理对话框
+                doingAdd:false, // 只能同时添加一个
+            };
+        },
+        methods: {
+            showId(row){
+                this.$alert(row.typeName+":"+row.id, '数据类型ID');
+            },
+            dataTypeAdd(){
+                let vm = this;
+                if(vm.doingAdd){
+                    vm.$message('请先完成当前的数据添加！');
+                    return;
+                }
+                let newRow = {
+                    "typeName":"",
+                    "sfqy":"Y",
+                    "caseEdit":true
+                };
+                vm.crud.dataStore.records.unshift((newRow));
+                vm.doingAdd = true;
+            },
+            beginRowEdit(row){ // 双击开启编辑
+                this.$set(row,"caseEdit",true);
+            },
+            cancelAdd(row){
+                let vm = this;
+                let rows = vm.crud.dataStore.records;
+                if(row.hasOwnProperty("id")){
+                    row.caseEdit = false;
+                }else{
+                    rows.splice(rows.indexOf(row),1);
+                }
+                vm.doingAdd = false;
+            },
+            saveDataType(row){ // 保存dataType
+                let vm = this;
+                if(!row["typeName"]){
+                    vm.$message({
+                        message:"名称不能为空！",
+                        duration:1000
+                    });
+                    return;
+                }
+                let obj = {};
+                let arr = ["id","typeName","sfqy"];
+                for(let elem of arr){
+                    if(row[elem]){
+                        obj[elem] = row[elem];
+                    }
+                }
+                if(row.id){//update
+                    vm.axios.post(vm.api.dataType.update,obj).then(function (res) {
+                        vm.$message({
+                            duration: 1000,
+                            type: 'success',
+                            message: res.data.operateMessage
+                        });
+                    })
+                }else{//add
+                    vm.axios.post(vm.api.dataType.add,row).then(function (res) {
+                        vm.$message({
+                            type: 'success',
+                            duration: 1000,
+                            message: res.data.operateMessage
+                        });
+                        vm.crud.search();
+                    });
+                    vm.doingAdd = false; // 完成添加
+                }
+                vm.$set(row,"caseEdit",false);
+            },
+            dataManage(row){ // 打开对话框管理数据字典
+                let vm = this;
+                if(row["id"]){
+                    vm.typeId = row["id"];
+                    vm.typeName = row["typeName"];
+                    vm.dataManageDialog = true;
+                }
+            },
+            remove(){ // 删除时去除添加状态，防止删除正在添加的数据
+                let vm = this;
+                vm.crud.remove();
+                vm.doingAdd = false; // 完成添加
+            },
+            resreshCache() {
+                let vm = this;
+                const loading = this.$loading({
+                  lock: true,
+                  text: '缓存刷新中。。。',
+                  spinner: 'el-icon-loading',
+                  background: 'rgba(0, 0, 0, 0.7)'
+                });
+                vm.axios.post(vm.api.dataType.initData).then(function (res) {
+                    loading.close();
+                    vm.$message({
+                        type: 'success',
+                        duration: 1000,
+                        message: res.data.operateMessage
+                    });
+                });
+            },
+            doSearch() {
+                let vm = this;
+                vm.crud.doSearch();
+                vm.doingAdd = false; // 完成添加
+            },
+            resetSearch(){
+                let vm = this;
+                vm.crud.resetSearch();
+                vm.doingAdd = false; // 完成添加
+            },
+            sizeChange(){
+                this.doingAdd = false; // 完成添加
+                this.crud.sizeChange();
+            },
+            currentPage(){
+                this.doingAdd = false; // 完成添加
+                this.crud.currentPage();
+            }
+        }
+    }
+</script>
+
+<style>
+    .list-default-row{
+        background-color:#eee;
+    }
+    .dataManage_dialog .el-dialog__body{
+        height: calc(100% - 90px);
+    }
+</style>