Skip to content

F
founder_vue
Commit b2376632 by liyuhang19990520
Options

组件封装

parent 37b6e69f
Showing with 307 additions and 158 deletions
package-lock.json
......@@ -1776,37 +1776,6 @@
"webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"debug": {
"version": "4.2.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-4.2.0.tgz?cache=0&sync_timestamp=1600502871403&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.2.0.tgz",
......@@ -1816,35 +1785,11 @@
"ms": "2.1.2"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz",
"integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
"dev": true
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.3.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.3.tgz",
"integrity": "sha512-/1GzCuQ6MRORbC+leKTKoTGtpQt60bYe0gDGEextSteA2OM+v201FPha5jzmjQzVhRcwieZeUvezAtG5a/e5cw==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
......@@ -11883,6 +11828,63 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.5.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
"integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
}
}
},
"vue-router": {
"version": "3.4.6",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.6.tgz?cache=0&sync_timestamp=1602077426782&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.6.tgz",
......
src/views/ywxtddzxt/Dialog_Tree.vue → src/components/Dialog_Tree.vue
<!--
* @Author: your name
* @Date: 2021-08-06 15:20:01
* @LastEditTime: 2021-08-06 17:59:45
* @LastEditTime: 2021-08-07 10:44:49
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\ywxtddzxt\Dialog_Tree.vue
......@@ -14,6 +14,7 @@
append-to-body
:visible.sync="dialogTreeVisible"
custom-class="treeClass"
@closed="closed"
>
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
</el-input>
......@@ -22,17 +23,18 @@
class="filter-tree"
:data="treeData"
show-checkbox
node-key="id"
:props="defaultProps"
default-expand-all
check-strictly
:filter-node-method="filterNode"
ref="tree"
@check-change="checkChange"
>
<template slot-scope="scope">
<p>
<i class="el-icon-user-solid" v-if="scope.data.type == 'user'"></i>
<i class="el-icon-user-solid" v-if="scope.data.zzjgdm"></i>
<i class="el-icon-folder" v-else></i>
<span @click="adata(scope.data)">{{ scope.data.name }}</span>
<span>{{ scope.data.userName }}</span>
</p>
</template>
</el-tree>
......@@ -55,13 +57,12 @@ export default {
filterText: "",
dialogTreeVisible: false,
diaLogLoading: false,
newTreeData: [],
treeData: [],
defaultProps: {
children: "children",
label: "label",
label: "name",
disabled: (res) => {
if (res.type == "user") {
if (res.zzjgdm) {
return false;
} else {
return true;
......@@ -76,9 +77,16 @@ export default {
},
},
methods: {
/**
* @description:
* @param {*} value 输入的值
* @param {*} data item的信息
* @return {*}
*/
filterNode(value, data) {
console.log(data);
if (!value) return true;
return data.label.indexOf(value) !== -1;
return data.userName.indexOf(value) !== -1;
},
/**
* @description: 点击确定以后传值
......@@ -89,11 +97,21 @@ export default {
this.$emit("commit", this.$refs.tree.getCheckedNodes());
this.dialogTreeVisible = false;
},
/**
* @description: 点击取消后的事件
* @param {*}
* @return {*}
*/
callOff() {
this.dialogTreeVisible = false;
},
adata(d) {
console.log(d);
/**
* @description: 关闭回调后
* @param {*}
* @return {*}
*/
closed(){
this.$refs.tree.setCheckedKeys([]);
},
/**
* @description: 获取树形数据
......@@ -113,14 +131,6 @@ export default {
}
});
},
/**
* @description:
* @param {*}
* @return {*}
*/
checkChange(obj, seleted, childenSelect) {
// console.log(obj, seleted, childenSelect);
},
//处理接口传出来的数据
disposeData(arr) {
arr.forEach((item) => {
......@@ -135,6 +145,11 @@ export default {
});
return arr;
},
/**
* @description: 打开树形结构框
* @param {*}
* @return {*}
*/
open() {
this.dialogTreeVisible = true;
if (!this.treeData || this.treeData.length <= 0) {
......
src/router/modules/index.js
/*
* @Author: your name
* @Date: 2021-08-06 14:39:51
* @LastEditTime: 2021-08-07 10:53:37
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\index.js
*/
export default [
{
path: '/',
......@@ -12,7 +20,7 @@ export default [
},
component: () => import('@/views/login.vue')
},{
}, {
path: '/jump',
name: 'jump',
meta: {
......@@ -39,7 +47,7 @@ export default [
auth: '5'
},
component: () => import('@/views/spjkyjzzyy/index.vue')
},{
}, {
path: '/spjkyjshyy',
name: 'spjkyjshyy',
meta: {
......@@ -47,15 +55,23 @@ export default [
auth: '5'
},
component: () => import('@/views/spjkyjshyy/index.vue')
},{
}, {
path: '/ywxtddzxt',
name: 'ywxtddzxt',
meta: {
title: '业务协同调度子系统',
title: '事件案例库',
auth: '5'
},
component: () => import('@/views/ywxtddzxt/index.vue')
}, {
path: '/ywxt',
name: 'ywxt',
meta: {
title: '业务协同',
auth: '5'
},
component: () => import('@/views/ywxtddzxt/ywxt.vue')
}, {
path: '/tjstzxt',
name: 'tjstzxt',
meta: {
......
src/views/Home.vue
......@@ -3,19 +3,24 @@
<el-container>
<el-header>
<div class="home_head">
<img class="home_head_img" src="@/assets/img/logo_zjw.png" alt="">
<img class="home_head_img" src="@/assets/img/logo_zjw.png" alt="" />
<span class="home_head_title">山南市社会治安综合治理平台</span>
</div>
</el-header>
<el-container class="contentBoX">
<el-aside width="220px">
<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
<!-- <el-radio-button :label="false">展开</el-radio-button>-->
<!-- <el-radio-button :label="true">收起</el-radio-button>-->
<!-- </el-radio-group>-->
<el-menu default-active="/spjkyjzzyy"
router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
:collapse="isCollapse">
<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
<!-- <el-radio-button :label="false">展开</el-radio-button>-->
<!-- <el-radio-button :label="true">收起</el-radio-button>-->
<!-- </el-radio-group>-->
<el-menu
default-active="/spjkyjzzyy"
router
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
>
<el-menu-item index="/spjkyjzzyy">
<i class="el-icon-location"></i>
<span slot="title">视频监控预警综治应用</span>
......@@ -24,10 +29,18 @@
<i class="el-icon-menu"></i>
<span slot="title">视频监控预警社会应用</span>
</el-menu-item>
<el-menu-item index="/ywxtddzxt">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-document"></i>
<span>业务协同调度子系统</span>
</template>
<el-menu-item index="/ywxtddzxt">事件案例库</el-menu-item>
<el-menu-item index="/ywxt">业务协同</el-menu-item>
</el-submenu>
<!-- <el-menu-item index="/ywxtddzxt">
<i class="el-icon-document"></i>
<span slot="title">业务协同调度子系统</span>
</el-menu-item>
</el-menu-item> -->
<el-menu-item index="/tjstzxt">
<i class="el-icon-setting"></i>
<span slot="title">统计视图子系统</span>
......@@ -51,71 +64,69 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { mapGetters } from "vuex";
export default {
data() {
return {
isCollapse: false
}
},
created() {
isCollapse: false,
};
},
created() {},
computed: {
...mapGetters(['defaultGoodsImage', 'userAuth'])
...mapGetters(["defaultGoodsImage", "userAuth"]),
},
methods: {
handleOpen(key, keyPath) {
debugger
console.log(key, keyPath)
debugger;
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath)
}
}
}
console.log(key, keyPath);
},
},
};
</script>
<style lang="scss" scoped>
.home {
.home_head {
background-color: #fff;
.home {
.home_head {
background-color: #fff;
.home_head_img {
width: 36px;
height: 40px;
margin: 8px;
}
.home_head_title {
vertical-align: middle;
margin-left: 5px;
height: 55px;
line-height: 55px;
font-weight: bold;
color: #23355e;
/*float: left;*/
cursor: pointer;
font-size: 30px;
}
.home_head_img {
width: 36px;
height: 40px;
margin: 8px;
}
.el-header {
padding: 0;
.home_head_title {
vertical-align: middle;
margin-left: 5px;
height: 55px;
line-height: 55px;
font-weight: bold;
color: #23355e;
/*float: left;*/
cursor: pointer;
font-size: 30px;
}
}
.el-aside {
color: #333;
text-align: center;
line-height: 200px;
}
.el-header {
padding: 0;
}
.el-main {
color: #333;
}
.el-aside {
color: #333;
text-align: center;
line-height: 200px;
}
.contentBoX{
display: flex;
.el-main {
color: #333;
}
}
.contentBoX {
display: flex;
}
</style>
src/views/spjkyjzzyy/index.vue
......@@ -53,9 +53,9 @@
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="form.page"
:current-page.sync="currentPage1"
:page-sizes="[10, 20, 50, 100]"
:page-size="form.pageSize"
:page-size="page_size"
layout="sizes,prev, pager, next"
:total="tableDataLength"
>
......@@ -102,6 +102,7 @@ export default {
pieSwitch: true, //是否重置饼图
currentPage1: 1, //表格页码
page_size: 10, //每页显示多少条
newForm: "",
key: "1",
title: "特殊人群分析预警",
// 多少条数据
......@@ -251,6 +252,8 @@ export default {
* @return {*}
*/
searchEvent(form) {
//查询或者重置后把配置拷贝一下
this.newForm = form;
this.key = form.yjlx;
// 改变表格表头
this.selectTableTitle(this.key);
......@@ -265,6 +268,7 @@ export default {
* @return {*}
*/
getTableList(form) {
this.page_size = form.pageSize;
this.tableLoading = true;
if (this.pieSwitch) {
this.pieDiagramLoading = true;
......@@ -326,6 +330,7 @@ export default {
* @return {*}
*/
handleSizeChange(val) {
this.currentPage1 = val;
this.$set(this.form, "pageSize", val);
this.getTableList(this.form);
},
......@@ -335,6 +340,7 @@ export default {
* @return {*}
*/
handleCurrentChange(val) {
this.page_size = val;
this.$set(this.form, "page", val);
this.getTableList(this.form);
},
......
src/views/ywxtddzxt/index.vue
......@@ -2,7 +2,7 @@
<div class="Content">
<div class="rightContent">
<div class="topTitle">
<span>视频监控预警综治运用</span>
<span>事件案例库</span>
</div>
<!-- 查询表单 -->
<SearchForm
......@@ -98,18 +98,22 @@
:formProps="dialogFormProps"
:form="dialogForm"
:tableProps="tableProps"
@success="success"
ctUrl="/api/ywxtddzxt/queryAlkList"
:btns="btns"
@commit="commit"
@tableOperation="tableOperation"
></DialogForm>
</div>
</template>
<script>
import SearchForm from "@c/SearchForm.vue";
import DialogForm from "./Dialog_Form.vue";
import DialogForm from "@c/Dialog_Form.vue";
import { get, post } from "@/utils/http.js";
// 下拉框数据
import { yjlx, zkdl, xb, yjjb } from "@/assets/jsData/selectData.js";
import { queryAlkList } from "@/api/ywxtdd";
import { queryAlkList, saveToAlk } from "@/api/ywxtdd";
// import { queryAlkList, saveToAlk } from "@/api/ywxtdd";
import utils from "@/utils/util.js";
export default {
name: "bztj",
......@@ -246,17 +250,11 @@ export default {
tableProps: [
{
title: "警力信息",
props: 'jlList',
props: "jlList",
tableLoading: false,
url: '/api/ywxtddzxt/queryJlxxByAlbh',
length: 2,
length: 0,
thead: [
{
label: "序号",
prop: "rn",
width: "auto",
},
{
label: "当前登录用户名",
prop: "userName",
width: "auto",
......@@ -277,20 +275,30 @@ export default {
width: "auto",
},
],
httpRequest: {
url: "/api/ywxtddzxt/queryJlxxByAlbh",
params: {
alid: "id",
},
type: "postJson",
},
tableData: [],
params: {},
btns: ["add", "del"],
},
{
title: "下发人员",
props: 'xfryList',
props: "xfryList",
tableLoading: false,
url: '/api/ywxtddzxt/queryXfryByAlbh',
length: 2,
thead: [
{
label: "序号",
prop: "rn",
width: "auto",
httpRequest: {
url: "/api/ywxtddzxt/queryXfryByAlbh",
params: {
alid: "id",
},
type: "postJson",
},
length: 0,
thead: [
{
label: "当前登录用户名",
prop: "userName",
......@@ -313,8 +321,11 @@ export default {
},
],
tableData: [],
btns: ["add", "del"],
},
],
//dialog按钮组
btns: ["save", "saveAndIssue"],
};
},
methods: {
......@@ -331,6 +342,86 @@ export default {
// 获取表格内容
this.getTableList(form);
},
/**
* @description: 点击保存或者保存并下发后的操作
* @param {*}obj 弹框的所有数据以及点击的基本信息
* @return {*}
*/
commit({ form, table, id, status, xfzt }) {
console.log(form, table, id, status, xfzt);
let obj = new Object();
if (id) {
obj.id = id;
obj.bcbz = "2";
} else {
obj.bcbz = "1";
}
obj.userId = sessionStorage.getItem("userid");
obj.xfzt = xfzt;
for (let key in form) {
if (key != "page" && key != "pageSize") {
obj[key] = form[key];
}
}
table.forEach((item) => {
let data;
if (item.props == "jlList") {
data = item.tableData.map((i) => {
return {
ryid: i.id,
username: i.userName,
lxfs: i.lxfs,
};
});
} else if (item.props == "xfryList") {
data = item.tableData.map((i) => {
return {
ryid: i.id,
username: i.userName,
};
});
}
obj[item.props] = data;
});
console.log(obj);
//配置完参数调用接口
this.$refs.dialogForm.diaLogLoading = true;
saveToAlk(obj).then((res) => {
if (res.status == "success") {
this.$message.success("操作成功");
this.$refs.dialogForm.diaLogLoading = false;
// this.dialogFormVisible = false;
this.$refs.dialogForm.callOff(); //关闭弹框
this.getTableList(this.form);
} else {
this.$message.error("操作失败");
this.$refs.dialogForm.diaLogLoading = false;
}
});
},
/**
* @description: dialog表格内部的操作
* @param {*} tableProps 配置表格的数据
* @param {*} type 操作类型
* @param {*} row 这一条数据的信息
* @param {*} item 这一表格的信息
* @return {*}
*/
tableOperation({ tableProps, row, type, item }) {
if (type == "add") {
this.$refs.dialogForm.openDialogTree(item.props);
} else if (type == "del") {
this.tableProps = utils.deepClone(tableProps);
let index = this.tableProps.findIndex((i) => i.title == item.title);
if (index >= 0) {
let obj = this.tableProps[index];
let dataIndex = obj.tableData.findIndex((i) => i.id == row.id);
obj.length -= 1;
obj.tableData.splice(dataIndex, 1);
this.$set(this.tableProps, index, obj);
}
}
},
//打开dialog
openDialogForm(type, id) {
this.$refs.dialogForm.init(type, id);
......@@ -339,10 +430,6 @@ export default {
updata(scope) {
console.log(scope.row);
},
//保存成功后
success(){
this.getTableList(this.form);
},
//获取列表
getTableList(form) {
this.tableLoading = true;
......
src/views/ywxtddzxt/ywxt.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-08-07 10:51:47
* @LastEditTime: 2021-08-07 10:54:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\ywxtddzxt\ywxt.vue
-->
<template>
<div>1</div>
</template>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment