Skip to content

F
founder_vue
Commit 4e05999a by liyuhang19990520
Options

dialog表单组件封装、axios json格式封装、业务子系统页面搭建

parent 592c83b9
Showing with 555 additions and 25 deletions
src/components/Dialog_Form.vue 0 → 100644
<template>
<div id="dialogForm">
<el-dialog
:title="title"
:visible.sync="dialogFormVisible"
custom-class="tztgClass"
@closed="closed"
>
<SearchForm
ref="searchForm"
:formProps="newFormProps"
:form="newForm"
sceneType="form"
></SearchForm>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="affirm()" size="small"
>确 定</el-button
>
<el-button @click="callOff()">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import SearchForm from "./SearchForm.vue";
import utils from "@/utils/util.js";
export default {
name: "DialogForm",
components: {
SearchForm,
},
props: {
formProps: {
type: Array,
required: true,
default: () => [],
},
form: {
type: Object,
required: true,
default: () => {},
},
},
data() {
return {
newFormProps: utils.deepClone(this.formProps),
newForm: utils.deepClone(this.form),
dialogFormVisible: false,
type: "",
id: "",
title: "",
};
},
methods: {
affirm() {
console.log(22222222);
console.log(this.$refs.searchForm.formData);
this.dialogFormVisible = false;
},
closed() {
//关闭时回到初始化配置
this.newForm = utils.deepClone(this.form);
},
callOff() {
console.log(this.form);
this.dialogFormVisible = false;
},
init(type, id) {
this.dialogFormVisible = true;
this.type = type;
this.id = id;
if (this.type == "add") {
this.title = "增加";
// this.url = addUrl
} else if (this.type == "update") {
this.title = "修改";
} else if (this.type == "view") {
this.title = "查看";
}
},
},
};
</script>
<style lang="scss" scoped>
#dialogForm /deep/ {
.tztgClass {
.el-dialog__header {
border-bottom: 1px solid #cccccc !important;
.el-dialog__title {
font-size: 15px;
color: #222;
font-weight: bold;
}
.el-dialog__headerbtn {
top: 14px;
}
}
.el-dialog__body {
height: 388px;
padding: 0 10px !important;
}
.el-dialog__footer {
padding: 10px 10px;
border-top: 1px solid #ccc;
}
}
}
</style>
\ No newline at end of file
src/components/SearchForm.vue
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
</div> </div>
</el-form> </el-form>
<!--按钮--> <!--按钮-->
<div class="btm-btns"> <div class="btm-btns" v-show="sceneType !== 'form'">
<el-button <el-button
type="primary" type="primary"
size="small" size="small"
...@@ -229,6 +229,7 @@ export default { ...@@ -229,6 +229,7 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
sceneType: String,
}, },
methods: { methods: {
search() { search() {
...@@ -299,6 +300,7 @@ export default { ...@@ -299,6 +300,7 @@ export default {
}, },
form: { form: {
handler(val) { handler(val) {
console.log(111111111, this.formProps, this.form);
this.formData = val; this.formData = val;
}, },
deep: true, deep: true,
......
src/utils/http.js
import axios from "axios"; import axios from "axios";
// import { getToken } from "./auth.js"; // import { getToken } from "./auth.js";
import { Message,MessageBox } from "element-ui"; import { Message, MessageBox } from "element-ui";
// import store from "@/store"; // import store from "@/store";
// import router from "@/router"; // import router from "@/router";
import qs from "qs"; import qs from "qs";
...@@ -59,14 +59,14 @@ axios.interceptors.response.use( ...@@ -59,14 +59,14 @@ axios.interceptors.response.use(
type: "warning", type: "warning",
}) })
.then(() => { .then(() => {
if(relUrlIp =='47.92.225.109' ){ if (relUrlIp == '47.92.225.109') {
// window.open('http://47.92.225.109:8300/#/login', '_blank') // window.open('http://47.92.225.109:8300/#/login', '_blank')
window.location.href = 'http://47.92.225.109:8300/#/login'; window.location.href = 'http://47.92.225.109:8300/#/login';
}else if(relUrlIp =='26.3.13.120'){ } else if (relUrlIp == '26.3.13.120') {
window.location.href = 'http://26.3.13.120:8050/#/login'; window.location.href = 'http://26.3.13.120:8050/#/login';
}else if(relUrlIp =='10.142.16.177'){ } else if (relUrlIp == '10.142.16.177') {
window.location.href = 'http://10.142.16.177:8050/#/login'; window.location.href = 'http://10.142.16.177:8050/#/login';
} else{ } else {
// window.open('http://localhost:8080/#/login', '_blank') // window.open('http://localhost:8080/#/login', '_blank')
window.location.href = 'http://localhost:8080/#/login'; window.location.href = 'http://localhost:8080/#/login';
} }
...@@ -159,6 +159,21 @@ export function post(url, params) { ...@@ -159,6 +159,21 @@ export function post(url, params) {
}); });
}); });
} }
/**
* 封装post请求 json格式
* @param url
* @param data
* @returns {Promise}
*/
export function postJson(url, data) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(response => {
resolve(response);
});
}).catch(err => {
reject(err.data);
});
}
/** /**
* 封装post请求 multipart/form-data * 封装post请求 multipart/form-data
......
src/views/spjkyjzzyy/index.scss
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
overflow-y: auto; overflow-y: auto;
line-height: 1.8; line-height: 1.8;
text-align: left; text-align: left;
.export-btn {
float: right;
margin-top: 10px;
}
.topTitle { .topTitle {
width: 100%; width: 100%;
height: 56px; height: 56px;
...@@ -30,6 +34,34 @@ ...@@ -30,6 +34,34 @@
.el-pagination { .el-pagination {
margin-top: 15px; margin-top: 15px;
} }
.flTtitle {
margin: 16px 10px 14px 8px;
display: inline-block;
font-size: 15px;
font-weight: bold;
line-height: 20px;
color: #333333;
opacity: 1;
}
.total {
height: 16px;
background: #f1970f;
border-radius: 8px;
display: inline-block;
text-align: center;
line-height: 16px;
padding: 0 8px;
span {
width: 35px;
height: 16px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #ffffff;
opacity: 1;
}
}
/deep/ .el-pagination__sizes { /deep/ .el-pagination__sizes {
top: 12px; top: 12px;
right: 152px; right: 152px;
......
src/views/spjkyjzzyy/index.vue
...@@ -15,6 +15,15 @@ ...@@ -15,6 +15,15 @@
<!-- 表格内容 --> <!-- 表格内容 -->
<div class="Content paneDiv"> <div class="Content paneDiv">
<div class=""> <div class="">
<el-row style="width: 99%; margin: 0 auto">
<el-col :span="24">
<span class="flTtitle">查询结果</span>
<!--可配置化图标-->
<div class="total">
<span> {{ tableDataLength }} </span>
</div>
</el-col>
</el-row>
<!--表格--> <!--表格-->
<el-table <el-table
stripe stripe
...@@ -44,9 +53,9 @@ ...@@ -44,9 +53,9 @@
background background
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page.sync="currentPage1" :current-page.sync="form.page"
:page-sizes="[10, 20, 50, 100]" :page-sizes="[10, 20, 50, 100]"
:page-size="page_size" :page-size="form.pageSize"
layout="sizes,prev, pager, next" layout="sizes,prev, pager, next"
:total="tableDataLength" :total="tableDataLength"
> >
...@@ -68,7 +77,7 @@ ...@@ -68,7 +77,7 @@
<script> <script>
import SearchForm from "@c/SearchForm.vue"; import SearchForm from "@c/SearchForm.vue";
import { get } from "@/utils/http.js"; import { get, postJson } from "@/utils/http.js";
// 下拉框数据 // 下拉框数据
import { yjlx, zkdl, xb, yjjb } from "@/assets/jsData/selectData.js"; import { yjlx, zkdl, xb, yjjb } from "@/assets/jsData/selectData.js";
// 切换时查询表单数据格式以及form // 切换时查询表单数据格式以及form
...@@ -278,10 +287,6 @@ export default { ...@@ -278,10 +287,6 @@ export default {
clearData() { clearData() {
this.formData = {}; this.formData = {};
}, },
//字符串转数组
stringToArr(str) {
return str.split("-");
},
/** /**
* @description: 查询事件 * @description: 查询事件
* @param {*} form 表单 * @param {*} form 表单
...@@ -295,6 +300,17 @@ export default { ...@@ -295,6 +300,17 @@ export default {
this.selectTableTitle(this.key); this.selectTableTitle(this.key);
// 重置echarts图表 // 重置echarts图表
this.setPieDiagram(this.title, this.pieData); this.setPieDiagram(this.title, this.pieData);
// 获取表格内容
this.getTableList(form);
},
getTableList(form) {
// let formData = new FormData();
// for (let key in form) {
// formData.append(key, form[key]);
// }
postJson("/api/spjkyjzzyy/queryYjList", form).then((res) => {
console.log(res);
});
}, },
/** /**
* @description: 监听预警类别变化更换查询表单 * @description: 监听预警类别变化更换查询表单
...@@ -304,8 +320,10 @@ export default { ...@@ -304,8 +320,10 @@ export default {
selectChange(val) { selectChange(val) {
let search = searchFormData[val]; let search = searchFormData[val];
//必须深拷,不然会污染数据 //必须深拷,不然会污染数据
this.formProps = utils.deepClone(search.formProps); if (search) {
this.form = utils.deepClone(search.form); this.formProps = utils.deepClone(search.formProps);
this.form = utils.deepClone(search.form);
}
}, },
/** /**
* @description: 根据预警类型切换表头 * @description: 根据预警类型切换表头
...@@ -347,9 +365,22 @@ export default { ...@@ -347,9 +365,22 @@ export default {
break; break;
} }
}, },
// 分页 /**
handleSizeChange() {}, * @description: 每页条数
handleCurrentChange() {}, * @param {*} val 目标条数
* @return {*}
*/
handleSizeChange(val) {
this.$set(this.form, "pageSize", val);
},
/**
* @description: 第几页
* @param {*} val 当前页数
* @return {*}
*/
handleCurrentChange(val) {
this.$set(this.form, "page", val);
},
/** /**
* @description: 人员饼图封装 * @description: 人员饼图封装
* @param {*} data 饼图数据 * @param {*} data 饼图数据
......
src/views/ywxtddzxt/index.vue
<template> <template>
<!--业务协同调度子系统--> <div class="Content">
<div>121</div> <div class="rightContent">
<div class="topTitle">
<span>视频监控预警综治运用</span>
</div>
<!-- 查询表单 -->
<SearchForm
:formProps="formProps"
:form="form"
@searchEvent="searchEvent"
@clearEvent="searchEvent"
></SearchForm>
<!-- 表格内容 -->
<div class="Content paneDiv">
<div class="">
<el-row style="width: 99%; margin: 0 auto">
<el-col :span="24">
<span class="flTtitle">查询结果</span>
<!--可配置化图标-->
<div class="total">
<span> {{ tableDataLength }} </span>
</div>
<p class="export-btn">
<el-button
type="primary"
size="small"
@click="openDialogForm('add')"
>新增</el-button
>
</p>
</el-col>
</el-row>
<!--表格-->
<el-table
stripe
:key="key"
v-loading="tableLoading"
element-loading-text="拼命加载中"
ref="itsmDataTable"
tooltip-effect="dark"
max-height="550"
style="width: 99%; margin: 0 auto"
width="100%"
size="small"
:data="bztjDataList"
>
<el-table-column
align="center"
v-for="columnTitle in bztjFormThead"
:prop="columnTitle.prop"
:key="columnTitle.label"
:label="columnTitle.label"
:width="columnTitle.width"
>
</el-table-column>
<el-table-column
align="center"
key="caozuo"
label="操作"
width="auto"
>
<template slot-scope="scope">
<div>
<el-button
type="text"
size="mini"
@click="openDialogForm('update', scope.row)"
>修改</el-button
>
<el-button type="text" size="mini">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!--分页-->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="form.page"
:page-sizes="[10, 20, 50, 100]"
:page-size="form.pageSize"
layout="sizes,prev, pager, next"
:total="tableDataLength"
>
</el-pagination>
</div>
</div>
</div>
<DialogForm
ref="dialogForm"
:formProps="formProps"
:form="form"
></DialogForm>
</div>
</template> </template>
<script> <script>
import SearchForm from "@c/SearchForm.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 utils from "@/utils/util.js";
export default { export default {
name: 'index' name: "bztj",
} components: {
SearchForm,
DialogForm,
},
data() {
return {
key: "1",
// 多少条数据
tableDataLength: 30,
//表格loading
tableLoading: false,
//查询表单配置
formProps: [
{
name: "预警类别",
id: "yjlx",
type: "select",
selectData: yjlx,
placeholder: "请选择",
rules: [
{ required: true, message: "请输入预警类别", trigger: "blur" },
],
col: "3",
},
{
name: "特殊人员类型",
id: "zkdl",
type: "select",
selectData: zkdl,
placeholder: "请选择",
col: "3",
},
{
name: "姓名",
id: "xm",
type: "text",
placeholder: "请输入",
col: "3",
},
{
name: "性别",
id: "xb",
type: "select",
selectData: xb,
placeholder: "请选择",
col: "3",
},
{
name: "证件号码",
id: "zjhm",
type: "text",
placeholder: "请填写",
col: "3",
},
{
name: "预警级别",
id: "yjjb",
type: "select",
selectData: yjjb,
placeholder: "请选择",
col: "3",
},
],
//表单值
form: {
page: 1,
pageSize: 10,
yjlx: "1",
zkdl: "",
xm: "",
xb: "",
zjhm: "",
yjjb: "",
},
// 初始化表格表头
bztjFormThead: [
{
label: "立案单位",
prop: "dwmc",
width: "auto",
},
{
label: "盗窃",
prop: "dqwbz",
width: "auto",
},
{
/*table默认得表头*/
label: "诈骗案",
prop: "dqbz",
width: "auto",
},
{
label: "抢劫案",
prop: "zpawbz",
width: "auto",
},
{
label: "抢夺案",
prop: "qjawbz",
width: "auto",
},
{
label: "招摇撞骗案",
prop: "adabz",
width: "auto",
},
],
// 表格数据
bztjDataList: [
{
dwmc: "甘肃省公安厅",
dqwbz: "0",
dqbz: "1",
zpawbz: "0",
zpabz: "3",
qjawbz: "0",
qjabz: "4",
qdawbz: "0",
adabz: "2",
ayzpawbz: "0",
ayzpabz: "1",
dqyp: "1",
dqwp: "3",
},
{
dwmc: "青海省公安厅",
dqwbz: "0",
dqbz: "1",
zpawbz: "0",
zpabz: "3",
qjawbz: "0",
qjabz: "4",
qdawbz: "0",
adabz: "2",
ayzpawbz: "0",
ayzpabz: "1",
dqyp: "3",
dqwp: "2",
},
{
dwmc: "宁夏回族自治区公安厅",
dqwbz: "0",
dqbz: "1",
zpawbz: "0",
zpabz: "3",
qjawbz: "0",
qjabz: "4",
qdawbz: "0",
adabz: "2",
ayzpawbz: "0",
ayzpabz: "1",
dqyp: "0",
dqwp: "0",
},
{
dwmc: "新疆维尔吾自治区公安厅",
dqwbz: "0",
dqbz: "1",
zpawbz: "0",
zpabz: "3",
qjawbz: "0",
qjabz: "4",
qdawbz: "0",
adabz: "2",
ayzpawbz: "0",
ayzpabz: "1",
dqyp: "4",
dqwp: "1",
},
],
};
},
methods: {
// 清空按钮
clearData() {
this.formData = {};
},
/**
* @description: 查询事件
* @param {*} form 表单
* @return {*}
*/
searchEvent(form) {
// 获取表格内容
this.getTableList(form);
},
//打开dialog
openDialogForm(type, id) {
this.$refs.dialogForm.init(type, id);
},
//修改
updata(scope) {
console.log(scope.row);
},
//获取列表
getTableList(form) {
post("http://172.18.108.37/spjkyjzzyy/queryYjList", form).then(
(res) => {
console.log(res);
}
);
},
/**
* @description: 每页条数
* @param {*} val 目标条数
* @return {*}
*/
handleSizeChange(val) {
this.$set(this.form, "pageSize", val);
},
/**
* @description: 第几页
* @param {*} val 当前页数
* @return {*}
*/
handleCurrentChange(val) {
this.$set(this.form, "page", val);
},
},
};
</script> </script>
<style scoped> <style lang="scss" scoped>
/deep/.el-table thead {
font-weight: 500;
}
.pie1 {
height: 100%;
width: 100%;
}
@import "../spjkyjzzyy/index.scss";
</style> </style>
vue.config.js
/*
* @Author: your name
* @Date: 2021-07-30 16:59:37
* @LastEditTime: 2021-08-02 14:23:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\vue.config.js
*/
const path = require("path"); const path = require("path");
// const CompressionPlugin = require('compression-webpack-plugin'); // const CompressionPlugin = require('compression-webpack-plugin');
// const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
...@@ -50,7 +58,7 @@ module.exports = { ...@@ -50,7 +58,7 @@ module.exports = {
}, },
proxy: { proxy: {
"/api": { "/api": {
target: "http://192.168.0.137:8080/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/ target: "http://172.18.108.37:8030", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
ws: true, ws: true,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
......
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