服务分类

src/components/PopupTreeInput.vue

@@ -0,0 +1,209 @@
+<!--
+ 树状下拉选择框:
+ 1、加载树结构，实现树状下拉选择组件；
+ 2、可通过关键词实现本地和远程过滤；
+ 3、高亮选择行；
+ 4、设置默认选择行；
+ 5、可直接应用在form表单；
+-->
+<template>
+    <el-select ref="selectRef" clearable :filterable="filterableFor || remoteFor" :remote="filterableFor || remoteFor"
+        :remote-method="selectRemoteMethod" v-model="currentLabel" @visible-change="handleVisibleChange"
+        @clear="handleClear">
+        <el-option style="height: 100%; padding: 0" value="" v-loading="loading" element-loading-text="加载中..."
+            element-loading-spinner="el-icon-loading">
+            <el-tree ref="treeRef" :data="dataOfTree" :node-key="defaultProps.value" :props="defaultProps" highlight-current
+                default-expand-all :current-node-key="selectedNode.value" :expand-on-click-node="false"
+                @node-click="handleNodeClicked" :filter-node-method="filterNode">
+            </el-tree>
+        </el-option>
+
+    </el-select>
+</template>
+<script>
+
+export default {
+    name: 'SelectTree',
+    components: {},
+    model: {
+        prop: 'inputValue',
+        event: 'myInputEvent'
+    },
+    props: {
+        // 默认选中值
+        defaultValue: {
+            type: Number
+        },
+        // 是否支持搜索，本地搜索，与远程搜索配置互斥。
+        filterable: {
+            type: Boolean,
+            default: false
+        },
+        // 是否远程搜索，要设置远程搜索方法
+        remote: {
+            type: Boolean,
+            default: false
+        },
+        // 远程方法
+        remoteMethod: {
+            type: Function
+        },
+        treeOptions: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        defaultProps: {
+            type: Object,
+            default: () => {
+                return {
+                    children: 'children',
+                    label: 'label',
+                    value: 'value'
+                }
+            }
+        }
+    },
+    watch: {
+        treeOptions: {
+            handler(newValue) {
+                this.loading = false
+                this.dataOfTree = JSON.parse(JSON.stringify(newValue))
+                // 保留源数据；
+                this.dataSource = JSON.parse(JSON.stringify(newValue))
+            },
+            deep: true,
+            immediate: false
+        },
+        defaultValue: {
+            handler(newValue) {
+                this.selectedNode = {}
+                this.currentLabel = undefined
+                this.currentValue = newValue
+                this.$nextTick(() => {
+                    // 过滤方式是通过value还是label;
+                    this.isFilterWithValue = true
+                    if (this.dataOfTree) {
+                        this.$refs.treeRef.filter(newValue)
+                    }
+                })
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    computed: {
+        // 是否支持搜索，本地搜索，与远程搜索配置互斥。
+        filterableFor() {
+            return this.remote ? false : this.filterable
+        },
+        remoteFor() {
+            return this.filterable ? false : this.remote
+        }
+    },
+    data() {
+        return {
+            selectedNode: {},
+            loading: false,
+            currentValue: undefined,
+            currentLabel: undefined,
+            dataOfTree: []
+        }
+    },
+    created() {
+        this.dataOfTree = JSON.parse(JSON.stringify(this.treeOptions))
+        // 保留源数据；
+        this.dataSource = JSON.parse(JSON.stringify(this.treeOptions))
+    },
+    mounted() {
+    },
+    methods: {
+        selectRemoteMethod(val) {
+            this.isFilterWithValue = false
+            if (this.filterableFor) {
+                // 本地过滤
+                this.$refs.treeRef.filter(val)
+            } else if (this.remoteFor) {
+                // 远程搜索
+                this.loading = true
+                this.remoteMethod(val)
+            }
+        },
+        handleClear() {
+            // 如果内容被清空
+            this.selectedNode = {}
+            this.currentLabel = undefined
+            this.currentValue = undefined
+            const result = this.buildEmptyResult()
+            this.$emit('myInputEvent', result)
+            this.$emit('onNodeSelectEvent', result)
+        },
+        handleVisibleChange(visible) {
+            if (!visible) {
+                // 先移除所有数据；
+                this.dataOfTree.splice(0)
+                // 恢复原来的所有数据；
+                this.dataOfTree.splice(0, 0, ...this.dataSource)
+                // 本地过滤
+                this.$refs.treeRef.filter('')
+            }
+        },
+        filterNode(value, data) {
+            if (!value) {
+                return data
+            }
+            if (this.isFilterWithValue) {
+                if (data[this.defaultProps.value] === value) {
+                    this.selectedNode = data
+                    this.currentLabel = data[this.defaultProps.label]
+                    this.$refs.treeRef.setCurrentKey(this.selectedNode[this.defaultProps.value])
+                    const result = this.buildResultByNodeData(data)
+                    this.$emit('myInputEvent', result)
+                }
+            } else {
+                return data[this.defaultProps.label].indexOf(value) !== -1
+            }
+            return data
+        },
+        closeSelect() {
+            this.$refs.selectRef.blur()
+        },
+        /**
+         * @param data
+         * @param node
+         * @param comp
+         */
+        handleNodeClicked(data, node, comp) {
+            this.selectedNode = data
+            this.currentLabel = data[this.defaultProps.label]
+            this.currentValue = data[this.defaultProps.value]
+            const result = this.buildResultByNodeData(data)
+            this.$emit('myInputEvent', result)
+            this.$emit('onNodeSelectEvent', result)
+            this.closeSelect()
+        },
+        buildResultByNodeData(data) {
+            return {
+                node: data[this.defaultProps.value],
+                data: {
+                    label: data[this.defaultProps.label],
+                    value: data[this.defaultProps.value]
+                },
+                meta: data
+            }
+        },
+        buildEmptyResult() {
+            return {
+                node: undefined,
+                data: {
+                    label: undefined,
+                    value: undefined
+                },
+                meta: undefined
+            }
+        }
+    }
+}
+</script>
+   

src/components/button.vue

@@ -0,0 +1,78 @@
+<template>
+    <el-button :size="size" :type="type" :icon="icon" :class="disabled ? 'buttonCursor:' : ''" :plain="plain" :loading="loading"
+        :disabled="disabled" @click="handleClick" v-if="hasPerms(perms) || !perms">
+        <!-- :class="hasPerms(perms)?'buttonCursor:':''" :loading="loading" :disabled="!hasPerms(perms)" @click="handleClick"> -->
+        {{ label }}
+    </el-button>
+</template>
+  
+<script>
+// import { hasPermission } from '../permission/index'
+export default {
+    name: 'KtButton',
+    props: {
+        label: {  // 按钮显示文本
+            type: String,
+            default: 'Button'
+        },
+        icon: {  // 按钮显示图标
+            type: String,
+            default: ''
+        },
+        size: {  // 按钮尺寸
+            type: String,
+            default: 'small'
+        },
+        type: {  // 按钮类型
+            type: String,
+            default: null
+        },
+        loading: {  // 按钮加载标识
+            type: Boolean,
+            default: false
+        },
+        plain: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {  // 按钮是否禁用
+            type: Boolean,
+            default: false
+        },
+        perms: {  // 按钮权限标识，外部使用者传入
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
+        handleClick: function () {
+            // 按钮操作处理函数
+            this.$emit('click', {})
+        },
+        hasPerms: function (perms) {
+            // 根据权限标识和外部指示状态进行权限判断
+            // if (!hasPermission(perms)) {
+            //     return false
+            // }
+            // else {
+            //     return true
+            // }
+            return true
+
+        }
+    },
+    mounted() {
+    }
+}
+</script>
+  
+<style scoped="scoped">
+buttonCursor {
+    cursor: pointer;
+}
+</style>
+  

src/components/tableForm.vue

@@ -0,0 +1,391 @@
+<template>
+    <div ref="commonTable">
+        <!-- 搜索栏 -->
+        <el-form v-if="formList.length > 0" :inline="true" :model="searchDataClone" label-width="130px"
+            ref="searchDataClone" id="commonTable" class="device-wrapper">
+            <el-form-item v-for="f in formList" :key="f.prop" :label="f.label" :prop="f.prop">
+                    <template v-if="f.type === 'input'">
+                        <el-input clearable v-model.trim="searchDataClone[f.prop]" size="small"
+                            :placeholder="'请输入' + f.label"></el-input>
+                    </template>
+                    <template v-else-if="f.type === 'company'">
+                        <el-select size="small" clearable v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label"
+                            filterable>
+                            <el-option label="不限" value v-if="f.selectAuto"></el-option>
+                            <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name" :value="s.id"></el-option>
+                        </el-select>
+                    </template>
+                    <template v-else-if="f.type === 'companyCheck'">
+                        <el-select class="selectLength" multiple collapse-tags size="small"
+                            v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label">
+                            <el-option label="不限" value v-if="f.selectAuto"></el-option>
+                            <el-option v-for="(s, i) in InsCompanyList" :key="i" :label="s.name" :value="s.id"></el-option>
+                        </el-select>
+                    </template>
+                    <template v-else-if="f.type === 'select'">
+                        <el-select size="small" clearable filterable v-model="searchDataClone[f.prop]"
+                            :placeholder="'请输入' + f.label">
+                            <el-option label="不限" value v-if="f.selectAuto"></el-option>
+                            <el-option v-for="(s, i) in f.options" :key="i" :label="s.label || s.dictTag || s.name"
+                                :value="s.value || s.dictValue || s.id"></el-option>
+                        </el-select>
+                    </template>
+                    <template v-else-if="f.type === 'selectDept'">
+                        <el-select size="small" v-model="searchDataClone[f.prop]" filterable clearable
+                            :placeholder="'请选择' + f.label" @change="selectChange($event, f.prop)">
+                            <el-option v-for="(option, index) in f.options" :key="index"
+                                :label="f.optionsIabel ? option[f.optionsIabel] : option.name"
+                                :value="f.optionsValue ? option[f.optionsValue] : option.id"></el-option>
+                        </el-select>
+                    </template>
+                    <template v-else-if="f.type === 'selectCompany'">
+                        <el-select size="small" v-model="searchDataClone[f.prop]" filterable clearable
+                            :placeholder="'请选择' + f.label" @change="selectCompanyChange($event, f.prop)">
+                            <el-option v-for="(option, index) in f.options" :key="index"
+                                :label="f.optionsIabel ? option[f.optionsIabel] : option.name"
+                                :value="f.optionsValue ? option[f.optionsValue] : option.id"></el-option>
+                        </el-select>
+                    </template>
+                    <template v-else-if="f.type === 'datePicker'">
+                        <!-- 日期区间 -->
+                        <el-date-picker style="width: 215px" type="daterange" size="small" v-model="searchDataClone[f.prop]"
+                            align="right" unlink-panels range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"
+                            value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
+                            :clearable="true"></el-date-picker>
+                    </template>
+                    <template v-else-if="f.type === 'date'">
+                        <!-- 一天 -->
+                        <el-date-picker type="date" size="small" v-model="searchDataClone[f.prop]" placeholder="选择日期"
+                            value-format="yyyy-MM-dd"></el-date-picker>
+                    </template>
+                    <!-- 年份 -->
+                    <template v-else-if="f.type === 'year'">
+                        <el-date-picker type="year" size="small" v-model="searchDataClone[f.prop]" placeholder="选择年">
+                        </el-date-picker>
+                    </template>
+                    <template v-else-if="f.type === 'radio'">
+                        <el-radio-group v-model="searchDataClone[f.prop]" :placeholder="'请输入' + f.label">
+                            <el-radio v-for="(r, i) in f.radioList" :key="i" :label="r.value">{{ r.label }}</el-radio>
+                        </el-radio-group>
+                    </template>
+                    <template v-else-if="f.type === 'slot'">
+                        <slot show-overflow-tooltip :name="f.name"></slot>
+                    </template>
+            </el-form-item>
+
+            <el-form-item>
+                <el-button style="margin-left: 30px" size="small" @click="resetForm('searchDataClone')">重置</el-button>
+                <el-button type="primary" size="small" @click="handleSearchList()">查询</el-button>
+                <template v-if="btnGroup.length > 0">
+                    <span v-for="(val, idx) in btnGroup" :key="idx" style="margin-left: 10px">
+                        <slot v-if="val.slot" show-overflow-tooltip :name="val.name"></slot>
+                        <el-button v-else :disabled="false || (val.disabled && val.disabled())"
+                            :type="val.type || 'primary'" size="small" @click="val.click()">{{ val.name }}</el-button>
+                    </span>
+                </template>
+            </el-form-item>
+            <!-- <el-form-item v-if="btnGroup.length>0" >
+              <el-button v-for="(val, idx) in btnGroup" :key="idx" :type="val.type || 'primary'" size="small" @click="tabFun(val)">{{ val.name }}</el-button>
+        </el-form-item> -->
+        </el-form>
+
+        <slot v-if="custom" show-overflow-tooltip></slot>
+
+        <el-table ref="table" :show-summary="tableConfig.showSummary || false" :data="data" border size="small"
+            style="width: 100%" :height="tableConfig.tableHeight || tableHeight" v-loading="tableConfig.loading"
+            element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" @selection-change="handleSelectionChange"
+            @select-all="selectAll" :row-style="{ height: '55px' }" :cell-style="{ padding: 'padding: 4px 0' }"
+            @current-change="handleCurrentTableChange"  :cell-class-name="rowClass">
+            <el-table-column type="selection" :width="tableConfig.selectionWidth || '50'" v-if="tableConfig.isCheckBox"
+                align="center" />
+            <el-table-column type="index" :width="tableConfig.indexWidth || '50'" v-if="tableConfig.isShowIndex"
+                align="center" label="序号" />
+            <template v-for="(item, index) in tableConfig.columns">
+                <!-- 日期内容 -->
+                <el-table-column v-if="item.type === 'date'" :align="'center'" :fixed="item.fixed"
+                    :width="item.width || 150" show-overflow-tooltip :label="item.label" :key="item.prop">
+                    <template  #default="scope">
+                        <div>{{ scope.row[item.prop] | formateDate }}</div>
+                    </template>
+                </el-table-column>
+                <!-- 字典项 -->
+                <el-table-column v-if="item.type === 'dic'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
+                    show-overflow-tooltip :label="item.label" :key="item.prop" :prop="item.prop">
+                    <template  #default="scope">
+                        <span>{{
+                            selectDictLabel(dictData[item.dic], scope.row[item.prop])
+                        }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column v-if="item.type === 'statMap'" :align="'center'" :width="item.width || ''"
+                    :fixed="item.fixed" show-overflow-tooltip :label="item.label" :key="item.prop" :prop="item.prop">
+                    <template  #default="scope">
+                        <span>
+                            {{ statMaps(item.options)[scope.row[item.prop]] }}</span>
+                    </template>
+                </el-table-column>
+                <!-- 自定义内容 -->
+                <el-table-column v-if="item.type === 'slot'" :align="'center'" show-overflow-tooltip :name="item.name"
+                    :label="item.label" :key="item.prop" :prop="item.prop" :width="item.width || ''">
+                    <template  #default="scope">
+                        <slot show-overflow-tooltip v-bind="scope" :name="item.name"></slot>
+                    </template>
+                </el-table-column>
+                <!-- 常规文本内容 -->
+                <el-table-column v-if="item.type === 'text'" :align="'center'" :width="item.width || ''" :fixed="item.fixed"
+                    :label="item.label" :key="item.prop" :prop="item.prop"></el-table-column>
+            </template>
+            <!-- <slot name="operate" :row="scope.row"></slot> -->
+            <!-- 自定义操作栏 -->
+            <el-table-column v-if="tableConfig.operateShow" label="操作" align="center"
+                :min-width="tableConfig.operationWidth || '100'" fixed="right">
+                <template  #default="scope">
+                    <slot name="operate" :row="scope.row"></slot>
+                </template>
+            </el-table-column>
+            <!-- 数组形式的操作栏，用于普通按钮 -->
+            <!-- // optBtns:[
+              //   {
+              //     type:'primary',
+              //     label:'修改',
+              //     hide:(row) => {
+              //      return row.importStatus == 1?true:false
+              //     },
+              //     click:(row, index) => {return this.modifyFun(row)},
+              //   }
+              // ] -->
+            <el-table-column v-if="tableConfig.optBtns" :min-width="tableConfig.operationWidth || '100'" label="操作"
+                fixed="right" header-align="center" align="center">
+                <template  #default="scope">
+                    <span v-for="(btn, index) in tableConfig.optBtns" :key="index">
+                        <!-- <el-button style="margin:0 10px" v-if="!btn.hide || (btn.hide && btn.hide(scope.row))" v-permission="btn.perm"
+                @click="btn.click(scope.row, index)" :type="btn.type || 'primary'" :icon="btn.icon" size="small">{{
+                  btn.label
+                }} </el-button> -->
+                        <kt-button style="margin: 0 10px" v-if="!btn.hide || (btn.hide && btn.hide(scope.row))"
+                            :icon="btn.icon" :label="btn.label" :type="btn.type || 'primary'" size="medium" :perms="btn.perm"
+                            @click="btn.click(scope.row, index)" />
+                    </span>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <div class="block" ref="bottomFixed">
+            <el-pagination v-if="tableConfig.isPaginationShow && pagination.totalSize" style="margin-top: 10px"
+                :page-size="pagination.pageSize" :current-page.sync="pagination.pageNum" :total="pagination.totalSize"
+                layout="total, sizes,prev, pager, next,jumper" :page-sizes="[10, 20, 50, 100]"
+                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
+    </div>
+</template>
+  
+<script type="text/ecmascript-6">
+import KtButton from "./button.vue";
+export default {
+    components: {
+        KtButton,
+    },
+    props: {
+        custom: {
+            type: Boolean,
+            default: () => {
+                return false;
+            },
+        },
+        formList: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+        btnGroup: {
+            type: Array,
+            default: () => {
+                return [];
+            },
+        },
+        tableConfig: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+        // searchDataClone: {
+        //   type: Object,
+        //   default: () => {
+        //     return {};
+        //   }
+        // },
+        pagination: {
+            type: Object,
+            default: () => ({
+                pageNum: 1,
+                pageSize: 20,
+                totalSize: 0,
+            }),
+        },
+        rowClass: {
+            type: Function,
+            default: () => "",
+        },
+        data: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            tableHeight: 0,
+            InsCompanyList: [],
+            searchDataClone: {},
+        };
+    },
+    created() {
+        if (
+            this.formList.length > 0 &&
+            this.formList.find(
+                (val) => val.type == "company" || val.type == "companyCheck"
+            )
+        ) {
+            this.companyFun();
+        }
+    },
+    mounted() {
+        setTimeout(() => {
+            var divHg = 0;
+            if (document.getElementById("commonTable") != null) {
+                divHg = document.getElementById("commonTable").clientHeight;
+            } else {
+                divHg = 100;
+            }
+            let bottomTop = this.$refs.bottomFixed.offsetTop;
+            //160??待调整
+            this.tableHeight = window.innerHeight - divHg - 210 + "px";
+        }, 10);
+    },
+    filters: {
+        formateDate(val) {
+            return formatDateTime(val);
+        },
+    },
+
+    methods: {
+        selectChange(id, filed) {
+            switch (filed) {
+                case "provinceId":
+                    break;
+                case "cityId":
+                    break;
+                case "countyId":
+                    break;
+
+                default:
+                    break;
+            }
+            if (id) {
+                this.$emit("areaSelectChange", { id, filed });
+            }
+        },
+        selectCompanyChange(id, filed) {
+            if (id) {
+                this.$emit("companySelectChange", { id, filed });
+            }
+        },
+        formatDateTime(date) {
+            let d = new Date(date),
+                month = "" + (d.getMonth() + 1),
+                day = "" + d.getDate(),
+                year = d.getFullYear();
+            if (month.length < 2) month = "0" + month;
+            if (day.length < 2) day = "0" + day;
+            return [year, month, day].join("-");
+        },
+        companyFun() {
+            this.$api.cost.gainTopList({ type: 1 }).then((res) => {
+                if (res.data) {
+                    this.InsCompanyList = res.data;
+                }
+            });
+        },
+        statMaps(list) {
+            if (!list) return;
+            let obj = {};
+            list.forEach((item) => {
+                obj[item.value || item.id || item.dictValue] = item.label || item.value || item.dictTag;
+            });
+            return obj;
+        },
+
+        selectDictLabel(dicts, value) {
+            if (value === undefined) {
+                return "";
+            }
+            if (dicts === undefined) {
+                return "";
+            }
+            const actions = [];
+            Object.keys(dicts).some((key) => {
+                if (dicts[key].value === `${value}`) {
+                    actions.push(dicts[key].label);
+                    return true;
+                }
+            });
+            if (actions.length === 0) {
+                actions.push(value);
+            }
+            return actions.join("");
+        },
+        // 表格多选
+        handleSelectionChange(currentRow) {
+            this.$emit("selectionChange", currentRow, this.$refs.table);
+        },
+        selectAll(currentRow) {
+            this.$emit("selectAll", currentRow, this.$refs.table);
+        },
+        handleSizeChange(value) {
+            this.pagination.pageSize = value;
+            this.pagination.pageNum = 1;
+            this.$emit("getList", { ...this.pagination, ...this.searchDataClone });
+        },
+        handleCurrentChange(val) {
+            this.pagination.pageNum = val;
+            this.$emit("getList", { ...this.pagination, ...this.searchDataClone });
+        },
+        handleCurrentTableChange(val) {
+            this.$emit("handleCurrentTableChange", val);
+        },
+        // 搜索
+        handleSearchList() {
+            // 更新父组件searchData
+            this.pagination.pageNum = 1;
+            this.pagination.pageSize = 10; //查询添加默认每页20条
+            this.$emit("handleSearchList", this.searchDataClone);
+        },
+        // 重置
+        resetForm(formName) {
+            this.$emit("handleResetForm");
+            this.searchDataClone = {};
+            console.log(this.searchDataClone);
+            // this.$refs[formName].resetFields();
+            this.handleSearchList();
+        },
+        handleOpt(row, index) {
+            this.$emit("handleOpt", row, index);
+        },
+    },
+};
+</script>
+<style scoped="scoped">
+.selectLength /deep/ .el-select__tags-text {
+    display: inline-block;
+    max-width: 110px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.device-wrapper /deep/ .el-form-item {
+    margin-bottom: 12px;
+}
+</style>
+  

src/main.js

@@ -82,17 +82,15 @@ app.config.globalProperties.$echarts = echarts //设置全局变量$echarts
 
 
 //后端项目的URL根路径
-let baseUrl = "http://localhost:8201/hxds-mis-api/"
+// let baseUrl = "http://localhost:8201/hxds-mis-api/"
+let baseUrl = "http://192.168.0.55:8201/"
 
 app.config.globalProperties.$baseUrl = baseUrl //设置全局变量$baseUrl
 
 //封装全局Ajax公共函数
 app.config.globalProperties.$http = function(url, method, data, async, fun) {
-	if(!url.includes("http://localhost:8201/")){
-		url = baseUrl + url;
-	}
 	$.ajax({
-		url: url,
+		url: baseUrl+url,
 		type: method,
 		dataType: 'json',
 		contentType: "application/json",
@@ -138,11 +136,8 @@ app.config.globalProperties.$http = function(url, method, data, async, fun) {
 	})
 }
 app.config.globalProperties.$httpData = function(url, method, data, fun) {
-	if(!url.includes("http://localhost:8201/")){
-		url = baseUrl + url;
-	}
 	$.ajax({
-		url: url,
+		url: baseUrl+url,
 		type: method,
 		// 下面这两个参数
 		processData: false,

src/permission/index.js

@@ -0,0 +1,19 @@
+// import store from '@/store'
+// /**
+//  * 判断用户是否拥有操作权限
+//  * 根据传入的权限标识，查看是否存在用户权限标识集合
+//  * @param perms
+//  */
+// export function hasPermission (perms) {
+//     let hasPermission = false
+//     let permissions = store.state.user.perms
+//     for(let i=0, len=permissions.length; i<len; i++) {
+//         if(permissions[i] === perms) {
+//             hasPermission = true;
+//             break
+//         }
+//     }
+//     return hasPermission
+// }
+  
+  

src/router/index.js

@@ -20,6 +20,7 @@ import Monitoring from "../views/monitoring.vue"
 import Service from "../views/service.vue"
 import ServiceUser from "../views/service-user.vue"
 import ServicePackage from "../views/service-package.vue"
+import ServiceClassification from "../views/service/service-classification.vue"
 import NotFound from "../views/404.vue"
 
 
@@ -166,7 +167,16 @@ const routes = [{
 					isTab: true
 				}
 			},
-
+			{
+				path: '/service-classification',
+				name: 'ServiceClassification',
+				component: ServiceClassification,
+				meta: {
+					title: '服务分类',
+					isTab: true
+				}
+			},
+			
 		]
 	},
 	{

src/views/login.vue

@@ -88,7 +88,7 @@ export default {
             } else {
                 let data = { username: that.username, password: that.password };
                 //发送登陆请求
-                that.$http('user/login', 'POST', data, true, function(resp) {
+                that.$http('hxds-mis-api/user/login', 'POST', data, true, function(resp) {
                     if (resp.result) {
                         //在浏览器的storage中存储用户权限列表，这样其他页面也可使用storage中的数据，实现共享
                         let permissions = resp.permissions;

src/views/main.vue

@@ -108,6 +108,13 @@
               <SvgIcon name="company_fill" class="icon-svg" />
               <span slot="title">服务包管理</span>
             </el-menu-item>
+            <el-menu-item
+                index="service-package"
+                @click="$router.push({ name: 'ServiceClassification' })"
+            >
+              <SvgIcon name="company_fill" class="icon-svg" />
+              <span slot="title">服务分类</span>
+            </el-menu-item>
           </el-submenu>
           <el-submenu index="司机管理" :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
             <template #title>
@@ -410,7 +417,7 @@ export default {
   mounted: function() {
     let that = this;
     //加载用户数据
-    that.$http('user/loadUserInfo', 'GET', null, true, function(resp) {
+    that.$http('hxds-mis-api/user/loadUserInfo', 'GET', null, true, function(resp) {
       let json = resp;
       let name = json.name;
       let photo = json.photo;

src/views/service-user-add-or-update.vue

@@ -1,31 +1,21 @@
 <template>
-	<el-dialog :title="!dataForm.id ? '新增' : '修改'"  :close-on-click-modal="false" v-model="visible" width="600px">
-		<el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="100px">
-			<el-form-item label="商户名称" prop="name"><el-input v-model="dataForm.name" size="medium" style="width:100%" clearable /></el-form-item>
-			<el-form-item label="商户地址" prop="address"><el-input v-model="dataForm.address" size="medium" style="width:100%" clearable /></el-form-item>
-			<el-form-item label="商户图片" prop="imageUrl">
-        <el-upload
-            class="avatar-uploader"
-            action="#"
-            :limit="1"
-            :show-file-list="false"
-            :http-request="handleUpload"
-            :before-upload="handleChange"
-            accept=".png,.jpe,.jpeg"
-            ref="uploadBanner"
-        >
-          <img v-if="dataForm.imageUrl" :src="dataForm.imageUrl" class="avatar" />
-          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-          <el-icon
-              v-if="dataForm.imageUrl"
-              class="logoDelete"
-              @click.stop="clearUploadImg"
-          ><CircleCloseFilled/>
-          </el-icon>
+  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" v-model="visible" width="600px">
+    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="120px">
+      <el-form-item label="商户名称" prop="name"><el-input v-model="dataForm.name" size="medium" style="width:100%"
+          clearable /></el-form-item>
+      <el-form-item label="商户地址" prop="address"><el-input v-model="dataForm.address" size="medium" style="width:100%"
+          clearable /></el-form-item>
+      <el-form-item label="商户图片" prop="imageUrl">
+        <el-upload class="avatar-uploader"  list-type="picture-card" action="#" :auto-upload="false" accept=".png, .jpg, .jpeg"
+          :show-file-list="false" :on-change="handleUpload">
+          <img v-if="dataForm.imageUrl" :src="dataForm.imageUrl" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
-       </el-form-item>
-			<el-form-item label="商户营业时间" prop="merchHours"><el-input v-model="dataForm.merchHours" style="width:100%" size="medium" maxlength="20" clearable /></el-form-item>
-      <el-form-item label="商户评分" prop="rating"><el-input v-model="dataForm.rating" style="width:100%" size="medium" maxlength="20" clearable /></el-form-item>
+      </el-form-item>
+      <el-form-item label="商户营业时间" prop="merchHours"><el-input v-model="dataForm.merchHours" style="width:100%"
+          size="medium" maxlength="20" clearable /></el-form-item>
+      <el-form-item label="商户评分" prop="rating"><el-input v-model="dataForm.rating" style="width:100%" size="medium"
+          maxlength="20" clearable /></el-form-item>
       <el-form-item label="商户类型" prop="type">
         <el-select v-model="dataForm.type" class="input" placeholder="商户类型" size="medium" clearable="clearable">
           <el-option label="洗车" value="1" />
@@ -34,75 +24,90 @@
           <el-option label="道路救援" value="4" />
         </el-select>
       </el-form-item>
-      <el-form-item label="商户联系电话" prop="phoneNumber"><el-input v-model="dataForm.phoneNumber" style="width:100%" size="medium" maxlength="20" clearable /></el-form-item>
+      <el-form-item label="商户联系电话" prop="phoneNumber"><el-input v-model="dataForm.phoneNumber" style="width:100%"
+          size="medium" maxlength="20" clearable /></el-form-item>
       <el-form-item label="是否合作商户" prop="isPartner">
         <el-select v-model="dataForm.isPartner" class="input" placeholder="是否合作商户" size="medium" clearable="clearable">
           <el-option label="是" value="1" />
           <el-option label="否" value="0" />
         </el-select>
       </el-form-item>
-      <el-form-item label="商户简介" prop="description"><el-input v-model="dataForm.description" style="width:100%" size="medium" maxlength="2000" type="textarea"  clearable /></el-form-item>
+      <el-form-item label="商户简介" prop="description"><el-input v-model="dataForm.description" style="width:100%"
+          size="medium" maxlength="2000" type="textarea" clearable /></el-form-item>
     </el-form>
-		<template #footer>
-			<span class="dialog-footer">
-				<el-button size="medium" @click="visible = false">取消</el-button>
-				<el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
-			</span>
-		</template>
-	</el-dialog>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button size="medium" @click="visible = false">取消</el-button>
+        <el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script>
-import {Plus} from "@element-plus/icons";
-import { ElMessage } from 'element-plus';
 export default {
-  components: {Plus},
-	data: function() {
-		return {
-			visible: false,
-			dataForm: {
-				id: null,
-				name: null,
-        imageUrl: "123",
-        merchHours: null,
-        rating: null,
-        type: null,
-        phoneNumber: null,
-        isPartner: null,
-        description: null,
-        address: null,
-			},
-			dataRule: {
-
-			}
-		};
-	},
+  data(){
+    return {
+      visible: false,
+      dataForm: {
+        imageUrl:''
+      },
+      dataRule: {
+        name: [
+            { required: true, message: '请输入商户名称', trigger: 'blur' },
+          ],
+          address: [
+            { required: true, message: '请输入商户地址', trigger: 'blur' },
+          ],
+          imageUrl: [
+            { required: true, message: '请上传商户图片', trigger: 'blur' },
+          ],
+          address: [
+            { required: true, message: '请输入商户地址', trigger: 'blur' },
+          ],
+          merchHours: [
+            {type: 'date',  required: true, message: '请选择商户营业时间', trigger: 'change' },
+          ],
+          rating: [
+            { required: true, message: '请输入商户评分', trigger: 'blur' },
+          ],
+          type: [
+            { required: true, message: '请选择商户类型', trigger: 'change' },
+          ],
+          phoneNumber: [
+            { required: true, message: '请输入商户联系电话', trigger: 'blur' },
+            { min: 11, max: 11, message: "请输入11位联系电话", trigger: "blur" },
+          {
+            pattern:
+              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
+            message: "请输入正确的手机号",
+            trigger: "blur",
+          },
+          ],
+          isPartner: [
+            { required: true, message: '请选择是否合作商户', trigger: 'change' },
+          ],
+      },
+    };
+  },
 
-	methods: {
-		init: function(id) {
-			let that = this;
-			that.dataForm.id = id || 0;
-			that.visible = true;
-			that.$nextTick(() => {
-				that.$refs['dataForm'].resetFields();
-				if (id) {
-					that.$http('http://localhost:8201/wash-car/merchant/searchById', 'POST', { id: id }, true, function(resp) {
-            console.log(resp.rows)
-            that.dataForm.id = resp.rows.id;
-            that.dataForm.name = resp.rows.name;
-            that.dataForm.imageUrl = resp.rows.imageUrl;
-						that.dataForm.merchHours = resp.rows.merchHours;
-						that.dataForm.rating = resp.rows.rating;
+  methods: {
+    init: function (id) {
+      let that = this;
+      that.dataForm.id = id || 0;
+      that.visible = true;
+      that.$nextTick(() => {
+        that.$refs['dataForm'].resetFields();
+        if (id) {
+          that.$http('hxds-wash-car/merchant/searchById', 'POST', { id: id }, true, function (resp) {
+            that.dataForm=resp.rows
             that.dataForm.type = String(resp.rows.type);
-            that.dataForm.phoneNumber = resp.rows.phoneNumber;
             that.dataForm.isPartner = String(resp.rows.isPartner);
-            that.dataForm.description = resp.rows.description;
-            that.dataForm.address  =resp.rows.address;
-					});
-				}
-			});
-		},
-    handleChange: function(rawFile) {
+          });
+        }
+      });
+    },
+    handleChange: function (rawFile) {
       if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
         ElMessage.error("只能上传jpeg/jpg/png图片");
         return false;
@@ -113,80 +118,77 @@ export default {
       return true;
     },
     //上传
-    handleUpload: function(file) {
+    handleUpload: function (file) {
+      let that = this;
+      let fileRaw = file.raw;
       let fd = new FormData();
-      fd.append("file", file.file);
-      // 这里是请求上传接口
-      this.$httpData('http://localhost:8201/wash-car/oss/upload', 'POST', fd,  function(resp) {
-        console.log(resp)
-        this.dataForm.imageUrl = resp;
-        //uploadBanner.value.handleRemove(file);
+      fd.append("file", fileRaw);
+      // 这里是请求上传接口w
+      this.$httpData('hxds-wash-car/oss/upload', 'POST', fd, function (resp) {
+
+        that.dataForm.imageUrl = resp.url;
       });
     },
-    clearUploadImg: function(file) {
-      this.dataForm.imageUrl = "";
-      //uploadBanner.value.clearFiles();
-    },
-		dataFormSubmit: function() {
-			let that = this;
-			this.$refs['dataForm'].validate(valid => {
-				if (valid) {
-          var url="";
-          if(that.dataForm.id ==null || that.dataForm.id ==""){
-            url="http://localhost:8201/wash-car/merchant/insert";
-          }else{
-            url="http://localhost:8201/wash-car/merchant/update";
+    dataFormSubmit: function () {
+      let that = this;  
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          var url = "";
+          if (that.dataForm.id == null || that.dataForm.id == "") {
+            url = "hxds-wash-car/merchant/insert";
+          } else {
+            url = "hxds-wash-car/merchant/update";
           }
-					that.$http(url, 'POST', that.dataForm, true, function(resp) {
-						if (resp.rows == 1) {
-							that.$message({
-								message: '操作成功',
-								type: 'success',
-								duration: 1200
-							});
-							that.visible = false;
-							that.$emit('refreshDataList');
-						} else {
-							that.$message({
-								message: '操作失败',
-								type: 'error',
-								duration: 1200
-							});
-						}
-					});
-				}
-			});
-		},
-	}
+          that.$http(url, 'POST', that.dataForm, true, function (resp) {
+            if (resp.rows == 1) {
+              that.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1200
+              });
+              that.visible = false;
+              that.$emit('refreshDataList');
+            } else {
+              that.$message({
+                message: '操作失败',
+                type: 'error',
+                duration: 1200
+              });
+            }
+          });
+        }
+      });
+    },
+  }
 };
 </script>
 
 <style lang="less" scoped="scoped">
-.avatar-uploader .avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-</style>
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: var(--el-transition-duration-fast);
-}
+/deep/.avatar-uploader .avatar {
+    width: 148px;
+    height: 148px;
+    display: block;
+  }
+
+  /deep/.avatar-uploader .el-upload {
+    border: 1px dashed  #c0ccda;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    // transition: var(--el-transition-duration-fast);
+  }
 
-.avatar-uploader .el-upload:hover {
-  border-color: var(--el-color-primary);
-}
+  .avatar-uploader .el-upload:hover {
+    border-color: var(--el-color-primary);
+  }
 
-.el-icon.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  text-align: center;
-}
-</style>
+  /deep/ .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    border: 1px dashed #d9d9d9;
+}</style>

src/views/service-user.vue

@@ -74,7 +74,7 @@ export default {
         length: that.pageSize
       };
 
-      that.$http('http://localhost:8201/wash-car/merchant/searchMerchantByPage', 'POST', data, true, function(resp) {
+      that.$http('hxds-wash-car/merchant/searchMerchantByPage', 'POST', data, true, function(resp) {
         // console.log(resp.page);
         let page = resp.page;
         that.dataList = page.list;
@@ -135,7 +135,7 @@ export default {
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          that.$http('http://localhost:8201/wash-car/merchant/deleteDeptByIds', 'POST', { ids: ids }, true, function(resp) {
+          that.$http('hxds-wash-car/merchant/deleteDeptByIds', 'POST', { ids: ids }, true, function(resp) {
             if (resp.rows > 0) {
               that.$message({
                 message: '操作成功',

src/views/service/service-classification.vue

@@ -0,0 +1,242 @@
+<template>
+    <div>
+        <!-- <table-form :formList="formList" :tableConfig="tableConfig" :data="tableData" :pagination="queryFrom"
+            @getList="getList" :btnGroup="btnGroup" @handleSearchList="getList"></table-form> -->
+            <el-form :inline="true" :model="dataForm"  ref="dataForm">
+                <el-form-item prop="name" label="分类名称">
+                    <el-input v-model="dataForm.name" placeholder="分类名称" size="medium" class="input" clearable="clearable" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button size="small" type="primary" @click="getList()">查询</el-button>
+                    <el-button size="small" type="primary"  @click="add()">新增</el-button>
+                </el-form-item>
+            </el-form>
+       
+            <el-table  :data="tableData" border v-loading="loading"
+            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+            row-key="id"
+            default-expand-all
+             cell-style="padding: 4px 0" size="medium" >
+                <el-table-column prop="name"  label="分类名称" />
+                <el-table-column prop="level" header-align="center" align="center"  label="分类级别" />
+                <!-- <el-table-column prop="parentId" header-align="center" align="center" label="上级编号" /> -->
+                <el-table-column prop="sort" header-align="center" align="center" label="排序" />
+                <el-table-column prop="showStatus" header-align="center" align="center"  label="状态" :formatter="formatter" />
+                <el-table-column header-align="center" align="center" width="150" label="操作">
+                    <template #default="scope">
+                    <el-button type="text" size="medium"  @click="update(scope.row)">修改</el-button>
+                    <el-button type="text" size="medium"  @click="deleteRow(scope.row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        <el-dialog :title="dialogTitle" :close-on-click-modal="false" v-model="dialogVisible" width="50%"
+            :before-close="handleClose">
+            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+                <el-form-item label="分类名称" prop="name">
+                    <el-input v-model="ruleForm.name"></el-input>
+                </el-form-item>
+                <el-form-item label="上级编号" prop="parentName">
+                    <!-- <popupTree
+                    ref="popupTree"
+                    :data="tableData" :props="popupTreeProps" 
+                    :nodeKey="''+ruleForm.parentId" :currentChangeHandle="handleTreeSelectChange">
+                    </popupTree> -->
+                    <popupTree
+                        v-model="ruleForm.parentName"
+                        filterable
+                        :tree-options="tableData"
+                        :default-props="{  
+                                    children: 'children',
+                                    label: 'name',
+                                    value: 'id'}"
+                                @onNodeSelectEvent="handleNodeSelectEvent($event)"
+                        />
+
+                </el-form-item>
+                <el-form-item label="显示状态" prop="showStatus">
+                    <el-select v-model="ruleForm.showStatus" placeholder="请选择显示状态" clearable="clearable">
+                        <el-option label="不显示" value="0" />
+                        <el-option label="显示" value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="排序" prop="sort">
+                    <el-input-number v-model="ruleForm.sort" controls-position="right" :min="0"></el-input-number>
+                </el-form-item>
+                <!-- <el-form-item label="商户图片" prop="icon">
+                    <el-upload class="avatar-uploader"  list-type="picture-card" action="#" :auto-upload="false" accept=".png, .jpg, .jpeg"
+                    :show-file-list="false" :on-change="handleUpload">
+                    <img v-if="ruleForm.icon" :src="ruleForm.icon" class="avatar">
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    </el-upload>
+                </el-form-item> -->
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import popupTree from "../../components/PopupTreeInput.vue"
+// import tableForm from '../../components/tableForm.vue'
+export default {
+    name: 'serviceClassification',
+    components: {
+        // tableForm,
+        popupTree
+    },
+    data() {
+        return {
+            popupTreeProps: {
+                label: "name",
+                children: "children"
+            },
+            dataForm:{},
+            ruleForm: {},
+            rules: {
+                name: [
+                    { required: true, message: '请输入分类名称', trigger: 'blur' },
+                ],
+                showStatus: [
+                    { required: true, message: '请选择显示状态', trigger: 'change' },
+                ],
+            },
+            dialogTitle: '新增',
+            dialogVisible: false,
+            tableData: [],
+            loading:false
+        }
+    },
+    mounted: function() {
+        this.getList();
+    },
+    methods: {
+        formatter(row){
+            return row.showStatus=='1'?'显示':'不显示'
+        },
+        handleUpload: function (file) {
+            let that = this;
+            let fileRaw = file.raw;
+            let fd = new FormData();
+            fd.append("file", fileRaw);
+            // 这里是请求上传接口
+            this.$httpData('hxds-wash-car/oss/upload', 'POST', fd, function (resp) {
+                that.ruleForm.icon = resp.url;
+            });
+        },
+        add() {
+            let that = this;
+            that.dialogTitle = '新增'
+            that.ruleForm = {}
+            that.dialogVisible = true
+        },  
+        update(row) {
+            let that = this;
+            that.$http('hxds-wash-car/category/searchById', 'POST', { id: row.id }, true, function (res) {
+                if (res.code == 200) {
+                    that.dialogTitle = '修改'
+                    that.ruleForm = res.data
+                    that.dialogVisible = true
+                }
+                else {
+                    this.$message.error(res.msg)
+                }
+            });
+        },
+        deleteRow(row) {
+            let that = this;
+            that.$confirm(`确定要删除选中的记录？`, '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                that.$http('hxds-wash-car/category/deleteServeByIds', 'POST', { ids: [row.id] }, true, function (resp) {
+                    if (resp.code == 200) {
+                        that.$message({
+                            message: '操作成功',
+                            type: 'success',
+                            duration: 1200,
+                            onClose: () => {
+                                that.getList();
+                            }
+                        });
+                    }
+                });
+            })
+        },
+        submitForm(formName) {
+            let that = this;
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    if(!this.ruleForm.parentId){
+                        this.ruleForm.parentId='0'
+                        this.ruleForm.level=1
+                    }
+                    if (this.dialogTitle == '新增') {
+                        this.$http('hxds-wash-car/category/insert', 'POST', this.ruleForm, true, function (res) {
+                            if (res.code == 200) {
+                                that.$message({
+                                    message: res.msg || '操作成功',
+                                    type: 'success'
+                                });
+                                that.dialogVisible = false
+                                that.getList();
+                            }
+                            else {
+                                that.$message.error(res.msg)
+                            }
+                        });
+                    }
+                    else {
+                        this.$http('hxds-wash-car/category/update', 'POST', this.ruleForm, true, function (res) {
+                            if (res.code == 200) {
+                                that.$message({
+                                    message: res.msg || '操作成功',
+                                    type: 'success'
+                                });
+                                that.getList();
+                                that.dialogVisible = false
+                            }
+                            else {
+                                that.$message.error(res.msg)
+                            }
+                        });
+                    }
+
+                } else {
+                    return false;
+                }
+            });
+        },
+        handleClose(done) {
+            this.dialogVisible = false
+        },
+        handleNodeSelectEvent(data) {
+            console.log(data,8888);
+            this.ruleForm.parentId = data.node;
+            this.ruleForm.parentName = data.data.label;
+            this.ruleForm.level=data.meta.level+1
+        },
+        getList() {
+            let that = this;
+            that.loading = true;
+            that.$http('hxds-wash-car/category/searchAllCategory', 'POST',  that.dataForm , true, function (resp) {
+
+                if (resp.code == 200) {
+                    
+                    resp.data.forEach(val=>{
+                        val.showStatus=val.showStatus=='1'?'显示':'不显示'
+                    })
+                    that.tableData = resp.data;
+                    // that.queryFrom = Number(page.totalCount);
+                    that.loading = false;
+                }
+                else {
+                    that.loading = false;
+                }
+            });
+        },
+    }
+}
+</script>