Skip to content

F
fhjw-vue
Commit 4330a84c authored by feiwenli's avatar feiwenli
Browse files
Options

end

parent 0026c269
Hide whitespace changes
Inline Side-by-side
Showing with 3492 additions and 926 deletions
fhjw.rar 0 → 100644
View file @ 4330a84c
File added
jwPC.rar 0 → 100644
View file @ 4330a84c
File added
package-lock.json
View file @ 4330a84c
...@@ -10128,9 +10128,9 @@ ...@@ -10128,9 +10128,9 @@
"dev": true "dev": true
}, },
"js-base64": { "js-base64": {
"version": "2.5.1", "version": "3.6.1",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.6.1.tgz",
"integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==" "integrity": "sha512-Frdq2+tRRGLQUIQOgsIGSCd1VePCS2fsddTG5dTCqR0JHgltXWfsxnY0gIXPoMeRmdom6Oyq+UMOFg5suduOjQ=="
}, },
"js-cookie": { "js-cookie": {
"version": "2.2.0", "version": "2.2.0",
...@@ -10143,6 +10143,11 @@ ...@@ -10143,6 +10143,11 @@
"integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==", "integrity": "sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==",
"dev": true "dev": true
}, },
"js-md5": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
"integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ=="
},
"js-message": { "js-message": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz", "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",
...@@ -15592,6 +15597,11 @@ ...@@ -15592,6 +15597,11 @@
"source-map": "^0.4.2" "source-map": "^0.4.2"
}, },
"dependencies": { "dependencies": {
"js-base64": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
},
"source-map": { "source-map": {
"version": "0.4.4", "version": "0.4.4",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
...@@ -16779,6 +16789,13 @@ ...@@ -16779,6 +16789,13 @@
"js-base64": "^2.1.9", "js-base64": "^2.1.9",
"source-map": "^0.5.6", "source-map": "^0.5.6",
"supports-color": "^3.2.3" "supports-color": "^3.2.3"
},
"dependencies": {
"js-base64": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
"integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
}
} }
}, },
"supports-color": { "supports-color": {
......
package.json
View file @ 4330a84c
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
"gulp-load-plugins": "^2.0.0", "gulp-load-plugins": "^2.0.0",
"gulp-rename": "^1.4.0", "gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2", "gulp-sass": "^4.0.2",
"js-base64": "^3.6.1",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
"js-md5": "^0.7.3",
"less": "^3.0.4", "less": "^3.0.4",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
......
public/index.html
View file @ 4330a84c
...@@ -10,8 +10,9 @@ ...@@ -10,8 +10,9 @@
window.SITE_CONFIG = {}; window.SITE_CONFIG = {};
window.SITE_CONFIG['version'] = 'v1.0.0'; window.SITE_CONFIG['version'] = 'v1.0.0';
window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>'; window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
///window.SITE_CONFIG['apiURL'] = 'http://192.168.10.129:8080/hmit-admin'; window.SITE_CONFIG['apiURL'] = 'http://10.55.125.88:8080/hmit-admin';
window.SITE_CONFIG['apiURL'] = 'http://119.3.50.187:8011/hmit-admin'; // api请求地址 //window.SITE_CONFIG['apiURL'] = 'http://119.3.50.187:8011/hmit-admin';
//window.SITE_CONFIG['apiURL'] = 'http://192.168.10.125:8080/hmit-admin'; // api请求地址
window.SITE_CONFIG['storeState'] = {}; // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态） window.SITE_CONFIG['storeState'] = {}; // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
window.SITE_CONFIG['contentTabDefault'] = { // 内容标签页默认属性对象 window.SITE_CONFIG['contentTabDefault'] = { // 内容标签页默认属性对象
'name': '', // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径） 'name': '', // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径）
......
src/components/echarts.vue
View file @ 4330a84c
...@@ -15,20 +15,22 @@ export default { ...@@ -15,20 +15,22 @@ export default {
options: Object, options: Object,
height: String, height: String,
width: String, width: String,
// bage: String,
}, },
data() { data() {
return {}; return {
myChart: "",
};
}, },
methods: { methods: {
getEchart() { getEchart() {
const chart = this.$refs.chartpie; const chart = this.$refs.chartpie;
if (chart) { if (chart) {
const myChart = this.$echarts.init(chart); let myChart = this.$echarts.init(chart);
this.myChart = myChart;
console.log("aaaa", myChart);
//const myChart = echarts.init(chart, null, { renderer: "svg" }); //const myChart = echarts.init(chart, null, { renderer: "svg" });
const option = this.options; const option = this.options;
myChart.setOption(option); myChart.setOption(option, true);
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
...@@ -39,11 +41,23 @@ export default { ...@@ -39,11 +41,23 @@ export default {
}); });
}); });
}, },
resize() {
this.myChart.resize();
},
rerender() {
this.myChart.setOption(this.options, true);
},
}, },
created() {}, created() {},
mounted() { mounted() {
// console.log("子组件接受到的", this.options);
this.getEchart(); this.getEchart();
}, },
watch: {
options(newval, oldval) {
this.myChart.setOption(newval, true);
},
},
}; };
</script> </script>
......
src/main.js
View file @ 4330a84c
...@@ -20,6 +20,8 @@ import { hasPermission, getDictLabel } from '@/utils' ...@@ -20,6 +20,8 @@ import { hasPermission, getDictLabel } from '@/utils'
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
Vue.config.productionTip = false Vue.config.productionTip = false
......
src/utils/validate.js
View file @ 4330a84c
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* 邮箱 * 邮箱
* @param {*} s * @param {*} s
*/ */
export function isEmail (s) { export function isEmail(s) {
return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s) return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
} }
...@@ -10,15 +10,38 @@ export function isEmail (s) { ...@@ -10,15 +10,38 @@ export function isEmail (s) {
* 手机号码 * 手机号码
* @param {*} s * @param {*} s
*/ */
export function isMobile (s) { export function isMobile(s) {
return /^1[0-9]{10}$/.test(s) return /^1[0-9]{10}$/.test(s)
} }
/**
* shuzi
* @param {*} s
*/
export function isSpecial(s) {
// return /^(?!<script>){0,50}*$/.test(s)
return /^((?!<script>).){0,50}$/.test(s)
}
export function isSpecial2(s) {
return /^((?!<script>).){0,10}$/.test(s)
}
/**
* shuzi----
* @param {*} s
*/
export function isNumber(s) {
return /^[0-9]{0,11}$/.test(s)
}
/** /**
* 电话号码 * 电话号码
* @param {*} s * @param {*} s
*/ */
export function isPhone (s) { export function isPhone(s) {
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s) return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
} }
...@@ -26,6 +49,6 @@ export function isPhone (s) { ...@@ -26,6 +49,6 @@ export function isPhone (s) {
* URL地址 * URL地址
* @param {*} s * @param {*} s
*/ */
export function isURL (s) { export function isURL(s) {
return /^http[s]?:\/\/.*/.test(s) return /^http[s]?:\/\/.*/.test(s)
} }
src/views/main-navbar-update-password.vue
View file @ 4330a84c
...@@ -4,94 +4,158 @@ ...@@ -4,94 +4,158 @@
:title="$t('updatePassword.title')" :title="$t('updatePassword.title')"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
:append-to-body="true"> :append-to-body="true"
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px"> >
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
label-width="120px"
>
<el-form-item :label="$t('updatePassword.username')"> <el-form-item :label="$t('updatePassword.username')">
<span>{{ $store.state.user.name }}</span> <span>{{ $store.state.user.name }}</span>
</el-form-item> </el-form-item>
<el-form-item prop="password" :label="$t('updatePassword.password')"> <el-form-item
<el-input v-model="dataForm.password" type="password" :placeholder="$t('updatePassword.password')"></el-input> prop="password"
:label="$t('updatePassword.password')"
>
<el-input
v-model="dataForm.password"
type="password"
:placeholder="$t('updatePassword.password')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="newPassword" :label="$t('updatePassword.newPassword')"> <el-form-item
<el-input v-model="dataForm.newPassword" type="password" :placeholder="$t('updatePassword.newPassword')"></el-input> prop="newPassword"
:label="$t('updatePassword.newPassword')"
>
<el-input
v-model="dataForm.newPassword"
type="password"
:placeholder="$t('updatePassword.newPassword')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="confirmPassword" :label="$t('updatePassword.confirmPassword')"> <el-form-item
<el-input v-model="dataForm.confirmPassword" type="password" :placeholder="$t('updatePassword.confirmPassword')"></el-input> prop="confirmPassword"
:label="$t('updatePassword.confirmPassword')"
>
<el-input
v-model="dataForm.confirmPassword"
type="password"
:placeholder="$t('updatePassword.confirmPassword')"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template slot="footer"> <template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> <el-button
type="primary"
@click="dataFormSubmitHandle()"
>{{ $t('confirm') }}</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import debounce from 'lodash/debounce' import debounce from "lodash/debounce";
import { clearLoginInfo } from '@/utils' import { clearLoginInfo } from "@/utils";
export default { export default {
data () { data() {
return { return {
visible: false, visible: false,
dataForm: { dataForm: {
password: '', password: "",
newPassword: '', newPassword: "",
confirmPassword: '' confirmPassword: "",
} },
} };
}, },
computed: { computed: {
dataRule () { dataRule() {
var validateConfirmPassword = (rule, value, callback) => { var validateConfirmPassword = (rule, value, callback) => {
if (this.dataForm.newPassword !== value) { if (this.dataForm.newPassword !== value) {
return callback(new Error(this.$t('updatePassword.validate.confirmPassword'))) return callback(
new Error(this.$t("updatePassword.validate.confirmPassword"))
);
} }
callback() callback();
} };
var validateNewPass = (rule, value, callback) => {
const reg =
/(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[\W])(?=.*[\S])^[0-9A-Za-z\S]{8,18}$/g;
if (!reg.test(value)) {
callback(new Error("密码应该为8-18位大小字母、数字、特殊字符组合"));
} else {
callback();
}
};
return { return {
password: [ password: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
], ],
newPassword: [ newPassword: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
{ validator: validateNewPass, trigger: "blur" },
], ],
confirmPassword: [ confirmPassword: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, {
{ validator: validateConfirmPassword, trigger: 'blur' } required: true,
] message: this.$t("validate.required"),
} trigger: "blur",
} },
{ validator: validateConfirmPassword, trigger: "blur" },
],
};
},
}, },
methods: { methods: {
init () { init() {
this.visible = true this.visible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs["dataForm"].resetFields();
}) });
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce(function () { dataFormSubmitHandle: debounce(
this.$refs['dataForm'].validate((valid) => { function () {
if (!valid) { this.$refs["dataForm"].validate((valid) => {
return false if (!valid) {
} return false;
this.$http.put('/sys/user/password', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} }
this.$message({ this.$http
message: this.$t('prompt.success'), .put("/sys/user/password", this.dataForm)
type: 'success', .then(({ data: res }) => {
duration: 500, if (res.code !== 0) {
onClose: () => { return this.$message.error(res.msg);
this.visible = false }
clearLoginInfo() this.$message({
this.$router.replace({ name: 'login' }) message: this.$t("prompt.success"),
} type: "success",
}) duration: 500,
}).catch(() => {}) onClose: () => {
}) this.visible = false;
}, 1000, { 'leading': true, 'trailing': false }) clearLoginInfo();
} this.$router.replace({ name: "login" });
} },
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</script> </script>
src/views/main-navbar.vue
View file @ 4330a84c
...@@ -5,20 +5,26 @@ ...@@ -5,20 +5,26 @@
> >
<div <div
class="aui-navbar__header" class="aui-navbar__header"
style="width:460px" style="width:375px"
> >
<h1 <h1
class="aui-navbar__brand" class="aui-navbar__brand"
@click="$router.push({ name: 'home' })" @click="$router.push({ name: 'home' })"
> >
<!-- <a <img
src="../assets/img/logo_icon.png"
alt=""
style="margin-right:5px;width:35px;height:39px;"
>
<a
style="letter-spacing:1px"
class="aui-navbar__brand-lg" class="aui-navbar__brand-lg"
href="javascript:;" href="javascript:;"
>{{ $t('brand.lg') }}</a> --> >{{ $t('brand.lg') }}</a>
<img <!-- <img
src="../assets/img/logo.png" src="../assets/img/logo.png"
alt="" alt=""
> > -->
<a <a
class="aui-navbar__brand-mini" class="aui-navbar__brand-mini"
......
src/views/modules/fhjw/fhiwfunction-add-or-update.vue
View file @ 4330a84c
<template> <template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"> :visible.sync="visible"
<el-form-item label="评价模块名字" prop="name"> :title="!dataForm.id ? $t('add') : $t('update')"
<el-input v-model="dataForm.name" placeholder="评价模块名字"></el-input> :close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
>
<el-form-item
label="评价模块名字"
prop="name"
>
<el-input
v-model="dataForm.name"
placeholder="评价模块名字"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="更新者" prop="updater"> <!-- <el-form-item label="更新者" prop="updater">
<el-input v-model="dataForm.updater" placeholder="更新者"></el-input> <el-input v-model="dataForm.updater" placeholder="更新者"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="更新时间" prop="updateDate"> <el-form-item label="更新时间" prop="updateDate">
<el-input v-model="dataForm.updateDate" placeholder="更新时间"></el-input> <el-input v-model="dataForm.updateDate" placeholder="更新时间"></el-input>
</el-form-item> </el-form-item> -->
</el-form> </el-form>
<template slot="footer"> <template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> <el-button
type="primary"
@click="dataFormSubmitHandle()"
>{{ $t('confirm') }}</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import debounce from 'lodash/debounce' import debounce from "lodash/debounce";
export default { export default {
data () { data() {
return { return {
visible: false, visible: false,
dataForm: { dataForm: {
id: '', id: "",
name: '', name: "",
creator: '', creator: "",
createDate: '', createDate: "",
updater: '', updater: "",
updateDate: '' updateDate: "",
} },
} };
}, },
computed: { computed: {
dataRule () { dataRule() {
return { return {
name: [ name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
], ],
updater: [ /* updater: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
], ],
updateDate: [ updateDate: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
] required: true,
} message: this.$t("validate.required"),
} trigger: "blur",
},
], */
};
},
}, },
methods: { methods: {
init () { init() {
this.visible = true this.visible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs["dataForm"].resetFields();
if (this.dataForm.id) { if (this.dataForm.id) {
this.getInfo() this.getInfo();
} }
}) });
}, },
// 获取信息 // 获取信息
getInfo () { getInfo() {
this.$http.get(`/fhjw/fhiwfunction/${this.dataForm.id}`).then(({ data: res }) => { this.$http
if (res.code !== 0) { .get(`/fhjw/fhiwfunction/${this.dataForm.id}`)
return this.$message.error(res.msg) .then(({ data: res }) => {
} if (res.code !== 0) {
this.dataForm = { return this.$message.error(res.msg);
...this.dataForm, }
...res.data this.dataForm = {
} ...this.dataForm,
}).catch(() => {}) ...res.data,
};
})
.catch(() => {});
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce(function () { dataFormSubmitHandle: debounce(
this.$refs['dataForm'].validate((valid) => { function () {
if (!valid) { this.$refs["dataForm"].validate((valid) => {
return false if (!valid) {
} return false;
this.$http[!this.dataForm.id ? 'post' : 'put']('/fhjw/fhiwfunction/', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} }
this.$message({ this.$http[!this.dataForm.id ? "post" : "put"](
message: this.$t('prompt.success'), "/fhjw/fhiwfunction/",
type: 'success', this.dataForm
duration: 500, )
onClose: () => { .then(({ data: res }) => {
this.visible = false if (res.code !== 0) {
this.$emit('refreshDataList') return this.$message.error(res.msg);
} }
}) this.$message({
}).catch(() => {}) message: this.$t("prompt.success"),
}) type: "success",
}, 1000, { 'leading': true, 'trailing': false }) duration: 500,
} onClose: () => {
} this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</script> </script>
src/views/modules/fhjw/fhiwfunction.vue
View file @ 4330a84c
<template> <template>
<el-card shadow="never" class="aui-card--fill"> <el-card
shadow="never"
class="aui-card--fill"
>
<div class="mod-fhjw__fhiwfunction}"> <div class="mod-fhjw__fhiwfunction}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form
<el-form-item> :inline="true"
<el-input v-model="dataForm.id" placeholder="id" clearable></el-input> :model="dataForm"
@keyup.enter.native="getDataList()"
>
<!-- <el-form-item>
<el-input
v-model="dataForm.id"
placeholder="id"
clearable
></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item> -->
<el-form-item> <!-- <el-form-item>
<el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button> <el-button
</el-form-item> type="info"
@click="exportHandle()"
>{{ $t('export') }}</el-button>
</el-form-item> -->
<el-form-item> <el-form-item>
<el-button v-if="$hasPermission('fhjw:fhiwfunction:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> <el-button
v-if="$hasPermission('fhjw:fhiwfunction:save')"
type="primary"
@click="addOrUpdateHandle()"
>{{ $t('add') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button v-if="$hasPermission('fhjw:fhiwfunction:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> <el-button
v-if="$hasPermission('fhjw:fhiwfunction:delete')"
type="danger"
@click="deleteHandle()"
>{{ $t('deleteBatch') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> <el-table
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> v-loading="dataListLoading"
<el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> :data="dataList"
<el-table-column prop="name" label="评价模块名字" header-align="center" align="center"></el-table-column> border
<el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column> @selection-change="dataListSelectionChangeHandle"
<el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column> style="width: 100%;"
<el-table-column prop="updater" label="更新者" header-align="center" align="center"></el-table-column> >
<el-table-column prop="updateDate" label="更新时间" header-align="center" align="center"></el-table-column> <el-table-column
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column
prop="name"
label="评价模块名字"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="createDate"
label="创建时间"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-if="$hasPermission('fhjw:fhiwfunction:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> <el-button
<el-button v-if="$hasPermission('fhjw:fhiwfunction:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> v-if="$hasPermission('fhjw:fhiwfunction:update')"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>{{ $t('update') }}</el-button>
<el-button
v-if="$hasPermission('fhjw:fhiwfunction:delete')"
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t('delete') }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -40,35 +96,40 @@ ...@@ -40,35 +96,40 @@
:total="total" :total="total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle" @size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"> @current-change="pageCurrentChangeHandle"
>
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div> </div>
</el-card> </el-card>
</template> </template>
<script> <script>
import mixinViewModule from '@/mixins/view-module' import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from './fhiwfunction-add-or-update' import AddOrUpdate from "./fhiwfunction-add-or-update";
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data () { data() {
return { return {
mixinViewModuleOptions: { mixinViewModuleOptions: {
getDataListURL: '/fhjw/fhiwfunction/page', getDataListURL: "/fhjw/fhiwfunction/page",
getDataListIsPage: true, getDataListIsPage: true,
exportURL: '/fhjw/fhiwfunction/export', exportURL: "/fhjw/fhiwfunction/export",
deleteURL: '/fhjw/fhiwfunction', deleteURL: "/fhjw/fhiwfunction",
deleteIsBatch: true deleteIsBatch: true,
}, },
dataForm: { dataForm: {
id: '' id: "",
} },
} };
}, },
components: { components: {
AddOrUpdate AddOrUpdate,
} },
} };
</script> </script>
src/views/modules/fhjw/fhjwcase-detail.vue
View file @ 4330a84c
...@@ -13,26 +13,26 @@ ...@@ -13,26 +13,26 @@
:label-width="$i18n.locale === 'en-US' ? '140px' : '100px'" :label-width="$i18n.locale === 'en-US' ? '140px' : '100px'"
> >
<el-row :gutter="30"> <el-row :gutter="30">
<el-col :span="13"> <el-col :span="12">
<el-form-item <el-form-item
label="受案号" label="受案号"
prop="caseNum" prop="caseNum"
> >
<el-input <el-input
v-model="dataForm.caseNum" v-model="dataForm.caseNum"
placeholder="受案号" placeholder="暂无"
readonly readonly
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<el-form-item <el-form-item
label="案件名称" label="案件名称"
prop="caseName" prop="caseName"
> >
<el-input <el-input
v-model="dataForm.caseName" v-model="dataForm.caseName"
placeholder="案件名称" placeholder="暂无"
readonly readonly
></el-input> ></el-input>
</el-form-item> </el-form-item>
...@@ -40,61 +40,76 @@ ...@@ -40,61 +40,76 @@
</el-row> </el-row>
<el-row :gutter="30"> <el-row :gutter="30">
<el-col :span="13">
<el-col :span="12">
<el-form-item <el-form-item
label="案件比" label="受理日期"
prop="caseQuality" prop="acceptanceDate"
> >
<el-input <el-input
v-model="dataForm.caseQuality" v-model="dataForm.acceptanceDate"
placeholder="案件比"
readonly readonly
placeholder="暂无"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<el-form-item <el-form-item
label="受理日期" label="审结日期"
prop="acceptanceDate" prop="completeDate"
> >
<el-input <el-input
v-model="dataForm.acceptanceDate" v-model="dataForm.completeDate"
placeholder="暂无"
readonly readonly
placeholder="受理日期"
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="30"> <el-row :gutter="30">
<el-col :span="13">
<el-col :span="8">
<el-form-item <el-form-item
label="强制措施" label="当事人"
prop="coerciveMeasures" prop="peopleName"
> >
<el-input <el-input
v-model="dataForm.coerciveMeasures" v-model="dataForm.peopleName"
placeholder="强制措施" placeholder="暂无"
readonly readonly
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="8">
<el-form-item <el-form-item
label="审结日期" label="代理人"
prop="completeDate" prop="agentName"
> >
<el-input <el-input
v-model="dataForm.completeDate" v-model="dataForm.agentName"
placeholder="审结日期" placeholder="暂无"
readonly readonly
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8">
<el-form-item
label="承办人"
prop="undertaker"
>
<el-input
v-model="dataForm.undertaker"
placeholder="暂无"
readonly
></el-input>
</el-form-item>
</el-col>
</el-row> </el-row>
<el-form-item <!-- <el-form-item
label="办理期限" label="办理期限"
prop="deadline" prop="deadline"
> >
...@@ -103,7 +118,7 @@ ...@@ -103,7 +118,7 @@
placeholder="办理期限" placeholder="办理期限"
readonly readonly
></el-input> ></el-input>
</el-form-item> </el-form-item> -->
<el-row <el-row
:gutter="30" :gutter="30"
class="user" class="user"
...@@ -121,7 +136,7 @@ ...@@ -121,7 +136,7 @@
<el-input <el-input
v-model="item.detail" v-model="item.detail"
placeholder="案件相关人员" placeholder="暂无"
readonly readonly
></el-input> ></el-input>
...@@ -136,7 +151,7 @@ ...@@ -136,7 +151,7 @@
<el-input <el-input
type="textarea" type="textarea"
v-model="dataForm.caseDetail" v-model="dataForm.caseDetail"
placeholder="案件详情" placeholder="暂无"
rows="3" rows="3"
readonly readonly
></el-input> ></el-input>
...@@ -171,6 +186,7 @@ export default { ...@@ -171,6 +186,7 @@ export default {
caseDetail: "", caseDetail: "",
creator: "", creator: "",
createDate: "", createDate: "",
agentName: "",
}, },
list: [], list: [],
}; };
......
src/views/modules/fhjw/fhjwcase.vue
View file @ 4330a84c
...@@ -7,24 +7,27 @@ ...@@ -7,24 +7,27 @@
<el-form <el-form
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"
@keyup.enter.native="getDataList()" :rules="dataRule"
@keyup.enter.native="getCheck()"
> >
<el-form-item> <el-form-item prop="caseName">
<el-input <el-input
v-model="dataForm.caseName" v-model="dataForm.caseName"
placeholder="案件名称" placeholder="案件名称"
clearable clearable
:maxlength="50"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item prop="caseNum">
<el-input <el-input
v-model="dataForm.caseNum" v-model="caseNum"
placeholder="受案号" placeholder="受案号"
:maxlength="50"
clearable clearable
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getCheck()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
...@@ -73,12 +76,12 @@ ...@@ -73,12 +76,12 @@
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <!-- <el-table-column
prop="deadline" prop="deadline"
label="办理期限" label="办理期限"
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> ></el-table-column> -->
<el-table-column <el-table-column
prop="acceptanceDate" prop="acceptanceDate"
label="受理日期" label="受理日期"
...@@ -91,7 +94,7 @@ ...@@ -91,7 +94,7 @@
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <!-- <el-table-column
prop="coerciveMeasures" prop="coerciveMeasures"
label="强制措施" label="强制措施"
header-align="center" header-align="center"
...@@ -112,13 +115,31 @@ ...@@ -112,13 +115,31 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div class="caseDetail">{{scope.row.caseDetail}}</div> <div class="caseDetail">{{scope.row.caseDetail}}</div>
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column <el-table-column
prop="userName" prop="undertaker"
label="承办人" label="承办人"
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column
prop="peopleName"
label="当事人"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="agentName"
label="代理人"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="userName"
label="录入人"
header-align="center"
align="center"
></el-table-column>
<el-table-column <el-table-column
prop="createDate" prop="createDate"
label="创建时间" label="创建时间"
...@@ -182,6 +203,7 @@ ...@@ -182,6 +203,7 @@
import mixinViewModule from "@/mixins/view-module"; import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./fhjwcase-add-or-update"; import AddOrUpdate from "./fhjwcase-add-or-update";
import Detail from "./fhjwcase-detail"; import Detail from "./fhjwcase-detail";
import { isSpecial } from "@/utils/validate";
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data() {
...@@ -193,15 +215,77 @@ export default { ...@@ -193,15 +215,77 @@ export default {
deleteURL: "/fhjw/fhjwcase", deleteURL: "/fhjw/fhjwcase",
deleteIsBatch: true, deleteIsBatch: true,
}, },
flag: true,
flag2: true,
dataForm: { dataForm: {
id: "", id: "",
caseName: "", caseName: "",
caseNum: "", caseNum: "",
}, },
caseNum: "",
detailVisible: false, detailVisible: false,
}; };
}, },
computed: {
dataRule() {
var validateCaseName = (rule, value, callback) => {
this.flag = true;
/* this.dataForm.caseName = this.dataForm.caseName.replace(
/[^u4e00-u9fa5w]/g,
""
); */
if (value && !isSpecial(value)) {
console.log("88888");
this.flag = false;
return callback(
new Error(this.$t("validate.format", { attr: "不能带特殊字符" }))
);
} else {
console.log("99999");
}
callback();
};
var validateCaseNum = (rule, value, callback) => {
this.flag2 = true;
/* this.dataForm.caseName = this.dataForm.caseName.replace(
/[^u4e00-u9fa5w]/g,
""
); */
if (value && !isSpecial(value)) {
console.log("88888");
this.flag2 = false;
return callback(
new Error(this.$t("validate.format", { attr: "不能带特殊字符" }))
);
} else {
console.log("99999");
}
callback();
};
return {
caseName: [
{ required: true, validator: validateCaseName, trigger: "blur" },
],
caseNum: [
{ required: true, validator: validateCaseNum, trigger: "blur" },
],
};
},
},
methods: { methods: {
filter(value) {
//转义字符方法
value = value.replace("[", "%5B").replace("]", "%5D");
return value;
},
getCheck() {
this.dataForm.caseNum = this.filter(this.caseNum);
if (this.flag && this.flag2) {
this.getDataList();
}
},
detailHandle(id) { detailHandle(id) {
console.log(id); console.log(id);
this.detailVisible = true; this.detailVisible = true;
......
src/views/modules/fhjw/fhjwcomment-detail.vue
View file @ 4330a84c
...@@ -56,34 +56,13 @@ ...@@ -56,34 +56,13 @@
prop="userName" prop="userName"
> >
<el-input <el-input
v-model="dataForm.role" v-model="dataForm.userRole"
placeholder="角色" placeholder="角色"
readonly readonly
></el-input> ></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- <el-form-item
label="问题"
prop="questionName"
>
<el-input
v-model="dataForm.questionName"
placeholder="问题"
readonly
></el-input>
</el-form-item>
<el-form-item
label="答案"
prop="answer"
readonly
>
<el-input
v-model="dataForm.answer"
placeholder="答案"
></el-input>
</el-form-item> -->
<el-form-item <el-form-item
label="问题及答案" label="问题及答案"
prop="userName" prop="userName"
......
src/views/modules/fhjw/fhjwcomment.vue
View file @ 4330a84c
...@@ -7,17 +7,19 @@ ...@@ -7,17 +7,19 @@
<el-form <el-form
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"
@keyup.enter.native="getDataList()" :rules="dataRule"
@keyup.enter.native="getCheck()"
> >
<el-form-item> <el-form-item prop="caseName">
<el-input <el-input
v-model="dataForm.caseName" v-model="dataForm.caseName"
placeholder="案件名称" placeholder="案件名称"
clearable clearable
:maxlength="50"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getCheck()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
...@@ -53,45 +55,58 @@ ...@@ -53,45 +55,58 @@
align="center" align="center"
width="50" width="50"
></el-table-column> ></el-table-column>
<!-- <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> --> <el-table-column
prop="deptName"
label="部门"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="undertaker"
label="承办人"
header-align="center"
align="center"
></el-table-column>
<el-table-column <el-table-column
prop="caseName" prop="caseName"
label="案件名称" label="案件名称"
header-align="center" header-align="center"
align="center" align="center"
> >
<template slot-scope="scope"> <!-- <template slot-scope="scope">
<el-button <el-button
type="text" type="text"
@click="childHandle(scope.row)" @click="childHandle(scope.row)"
>{{ scope.row.caseName }}</el-button> >{{ scope.row.caseName }}</el-button>
</template> </template> -->
</el-table-column> </el-table-column>
<el-table-column
<!-- <el-table-column prop="peopleName"
prop="tempName" label="当事人"
label="模板"
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> --> ></el-table-column>
<!-- <el-table-column <el-table-column
prop="questionName" prop="caseNum"
label="问题" label="受案号"
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> ></el-table-column>
<!-- <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> -->
<el-table-column <el-table-column
prop="answer" prop="userName"
label="答案" label="评价人"
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> --> ></el-table-column>
<!-- <el-table-column <el-table-column
prop="userName" prop="userRole"
label="用户" label="身份"
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> --> ></el-table-column>
<!-- -->
<el-table-column <el-table-column
prop="createDate" prop="createDate"
label="创建时间" label="创建时间"
...@@ -106,11 +121,11 @@ ...@@ -106,11 +121,11 @@
width="150" width="150"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <el-button <el-button
type="text" type="text"
size="small" size="small"
@click="detailHandle(scope.row.caseId)" @click="detailHandle(scope.row)"
>详情</el-button> --> >详情</el-button>
<el-button <el-button
v-if="$hasPermission('fhjw:fhjwcomment:delete')" v-if="$hasPermission('fhjw:fhjwcomment:delete')"
type="text" type="text"
...@@ -151,6 +166,7 @@ import mixinViewModule from "@/mixins/view-module"; ...@@ -151,6 +166,7 @@ import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./fhjwcomment-add-or-update"; import AddOrUpdate from "./fhjwcomment-add-or-update";
import Detail from "./fhjwcomment-detail"; import Detail from "./fhjwcomment-detail";
import { addDynamicRoute } from "@/router"; import { addDynamicRoute } from "@/router";
import { isSpecial } from "@/utils/validate";
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data() {
...@@ -166,6 +182,7 @@ export default { ...@@ -166,6 +182,7 @@ export default {
detailVisible: false, detailVisible: false,
showpop: false, showpop: false,
showpop2: false, showpop2: false,
flag: true,
dataForm: { dataForm: {
id: "", id: "",
caseName: "", caseName: "",
...@@ -174,7 +191,39 @@ export default { ...@@ -174,7 +191,39 @@ export default {
dataListSelections2: "", dataListSelections2: "",
}; };
}, },
computed: {
dataRule() {
var validateCaseName = (rule, value, callback) => {
this.flag = true;
/* this.dataForm.caseName = this.dataForm.caseName.replace(
/[^u4e00-u9fa5w]/g,
""
); */
if (value && !isSpecial(value)) {
console.log("88888");
this.flag = false;
return callback(
new Error(this.$t("validate.format", { attr: "不能带特殊字符" }))
);
} else {
console.log("99999");
}
callback();
};
return {
caseName: [
{ required: true, validator: validateCaseName, trigger: "blur" },
],
};
},
},
methods: { methods: {
getCheck() {
if (this.flag) {
this.getDataList();
}
},
// 多选 // 多选
dataListSelectionChangeHandle2(val) { dataListSelectionChangeHandle2(val) {
this.dataListSelections2 = val; this.dataListSelections2 = val;
...@@ -232,11 +281,13 @@ export default { ...@@ -232,11 +281,13 @@ export default {
}) })
.catch(() => {}); .catch(() => {});
}, },
detailHandle(id) { detailHandle(row) {
console.log(id); console.log(row.id);
this.detailVisible = true; this.detailVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.detail.dataForm.caseId = id; this.$refs.detail.dataForm.caseId = row.caseId;
this.$refs.detail.dataForm.userId = row.userId;
this.$refs.detail.dataForm.role = row.role;
this.$refs.detail.init(); this.$refs.detail.init();
}); });
}, },
......
src/views/modules/fhjw/fhjwcommentstatistical.vue
View file @ 4330a84c
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
shadow="never" shadow="never"
class="aui-card--fill" class="aui-card--fill"
> >
<!-- 查询区域 -->
<el-form <el-form
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"
@keyup.enter.native="getDataList()" @keyup.enter.native="getCheck()"
> >
<el-form-item prop="dateVal">
<el-form-item>
<el-date-picker <el-date-picker
class="date-val" class="date-val"
v-model="dataForm.dateVal" v-model="dataForm.dateVal"
...@@ -18,43 +18,93 @@ ...@@ -18,43 +18,93 @@
range-separator="至" range-separator="至"
start-placeholder="开始月份" start-placeholder="开始月份"
end-placeholder="结束月份" end-placeholder="结束月份"
value-format="yyyy-MM-dd"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getCheck()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="top">
<!-- <div
ref="chartpie"
style="height:450px;width:100%"
></div> -->
<!-- 顶部柱状图 -->
<!-- <div class="top">
<div class="titleline">
<div class="left">
<img
src="../../../assets/img/logo_tj.png"
alt=""
style="width:20px;height:20px"
>
评价统计
</div>
</div>
<Echarts <Echarts
:options="optionsAll" :options="optionsAll"
height="450px" height="450px"
width="100%" width="100%"
ref="chart"
/> />
</div> -->
<!-- 顶部两个饼图区域 -->
<div class="bottom1">
<div style="flex:1;transform: translate3d(0, -10%, 0);height:400px">
<div class="left">
<img
src="../../../assets/img/logo_tj.png"
style="width:20px;height:20px"
>
评价统计
</div>
<Echarts
:options="optionsAll"
height="400px"
width="100%"
ref="chart"
/>
</div>
<div style="flex:1;transform: translate3d(0, -10%, 0);height:400px">
<div class="right">
<img
src="../../../assets/img/logo_tj.png"
style="width:20px;height:20px"
>
评价人员好差评统计
</div>
<Echarts
:options="optionsDaibiao"
height="400px"
width="100%"
ref="chartDaibiao"
/>
</div>
</div> </div>
<!-- 底部遍历出来的饼图区域 -->
<!-- <input
type="text"
:value="options[0]"
> -->
<div class="bottom"> <div class="bottom">
<div <div
class="item-pie" class="item-pie"
v-for="(item,index) in list" v-for="(item,index) in listTop"
:key="item.id" :key="item.id"
> >
<!-- <Echarts <!-- 遍历饼图 -->
:options="optionsDepart[index]"
height="450px"
width="100%"
/> -->
<div <div
v-if="flag2"
:id="forId(index)" :id="forId(index)"
style="height:300px;width:100%;" style="height:300px;width:100%;"
:ref="'chart'+index"
></div> ></div>
<!-- <Echarts
:options="options[index]"
height="300px"
width="100%"
:ref="'chart'+index"
/> -->
</div> </div>
</div> </div>
...@@ -65,6 +115,7 @@ ...@@ -65,6 +115,7 @@
<script> <script>
import Echarts from "../../../components/echarts.vue"; import Echarts from "../../../components/echarts.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { isSpecial } from "@/utils/validate";
export default { export default {
name: "fhjwcommentstatistical", name: "fhjwcommentstatistical",
components: { Echarts }, components: { Echarts },
...@@ -75,37 +126,246 @@ export default { ...@@ -75,37 +126,246 @@ export default {
}, },
chartList: [], // chartList: [], //
getId: [], //用来生成echarts getId: [], //用来生成echarts
getIDBack: [],
chartList_values: [], //取其值 chartList_values: [], //取其值
optionsAll: {}, optionsAll: {},
optionsDepart: {}, optionsDepart: {},
list: [ optionsDaibiao: {},
options: [],
data: [],
flag2: false,
flag: false,
flag3: true,
listTop: [
{
id: 9,
title: "院领导",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{ {
id: 1, id: 1,
title: "第一检察部", title: "第一检察部",
goodnum: 500, goodnum: 0,
middlenum: 20, middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 2,
title: "第二检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 3,
title: "第三检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 4,
title: "第四检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 5,
title: "第五检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 6,
title: "第六检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 7,
title: "第七检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 8,
title: "溪口检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0, bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
],
listTopTemp: [
{
id: 9,
title: "院领导",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 1,
title: "第一检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
}, },
{ {
id: 2, id: 2,
title: "第二检察部", title: "第二检察部",
goodnum: 800, goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 3,
title: "第三检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 4,
title: "第四检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 5,
title: "第五检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 6,
title: "第六检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 7,
title: "第七检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 8,
title: "溪口检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
],
list2: [
{
id: 1,
title: "第一检察部",
goodnum: 400,
middlenum: 100,
bandnum: 3,
},
{
id: 2,
title: "第二检察部",
goodnum: 400,
middlenum: 50, middlenum: 50,
bandnum: 1, bandnum: 2,
}, },
{ {
id: 3, id: 3,
title: "第三检察部", title: "第三检察部",
goodnum: 200, goodnum: 350,
middlenum: 5, middlenum: 5,
bandnum: 0, bandnum: 5,
}, },
{ {
id: 4, id: 4,
title: "第四检察部", title: "第四检察部",
goodnum: 100, goodnum: 333,
middlenum: 1, middlenum: 1,
bandnum: 1, bandnum: 6,
}, },
{ {
id: 5, id: 5,
...@@ -136,24 +396,157 @@ export default { ...@@ -136,24 +396,157 @@ export default {
bandnum: 0, bandnum: 0,
}, },
], ],
listTypeOfMan: [],
}; };
}, },
computed: {
dataRule() {
/* var validateCaseName = (rule, value, callback) => {
this.flag3 = true;
if (value && !isSpecial(value)) {
console.log("88888", value);
this.flag3 = false;
return callback(
new Error(this.$t("validate.format", { attr: "不能带特殊字符" }))
);
} else {
console.log("99999");
}
callback();
}; */
return {
dateVal: [
{
required: !this.flag3,
message: this.$t("validate.required"),
trigger: "blur",
},
],
};
},
},
methods: { methods: {
getCheck() {
console.log("kkk", this.dataForm.dateVal);
if (this.dataForm.dateVal instanceof Array) {
this.flag3 = true;
this.getAll();
} else {
this.flag3 = false;
}
},
forId(index) { forId(index) {
return "geo_" + index; return "geo_" + index;
}, },
/* show(option) { getInfoQuery() {
console.log(option.level_incite_user_list, '每个等级的占比情况11'); this.$http
this.chartList = option.level_incite_user_list; .get(
this.mapTree(); "/fhjw/fhjwfeedback/getCount?startDate=" +
}, */ this.dataForm.dateVal[0] +
"&endDate=" +
this.dataForm.dateVal[1]
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.listTop = this.listTopTemp;
this.listTop.forEach((ele) => {
res.data.forEach((eles) => {
if (ele.title === eles.deptName) {
ele.goodnum = eles.committeeCountDTO.good;
ele.middlenum = eles.committeeCountDTO.medium;
ele.bandnum = eles.committeeCountDTO.bad;
ele.totle = eles.committeeCountDTO.totalCount;
}
});
});
console.log("this.list", this.listTop);
})
.then(() => {
//this.init();
this.flag2 = true;
this.getComment();
this.mapTree();
})
.catch(() => {});
this.$http
.get(
"/fhjw/fhjwcomment/getCountByUserRole?startDate=" +
this.dataForm.dateVal[0] +
"&endDate=" +
this.dataForm.dateVal[1]
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.listTypeOfMan = [...res.data];
//console.log("llll", ...res.data);
})
.then(() => {
//this.init();
this.flag = true;
this.getTypeOfMan();
})
.catch(() => {});
},
// 获取信息
getInfo() {
console.log("aaaa");
this.$http
.get("/fhjw/fhjwcomment/getCountByDept")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.listTop.forEach((ele) => {
res.data.forEach((eles) => {
if (ele.title === eles.deptName) {
ele.goodnum = eles.committeeCountDTO.good;
ele.middlenum = eles.committeeCountDTO.medium;
ele.bandnum = eles.committeeCountDTO.bad;
ele.totle = eles.committeeCountDTO.totalCount;
}
});
});
console.log("this.list", this.listTop);
})
.then(() => {
//this.init();
this.flag2 = true;
this.getComment();
this.mapTree();
})
.catch(() => {});
this.$http
.get("/fhjw/fhjwcomment/getCountByUserRole")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.listTypeOfMan = [...res.data];
})
.then(() => {
//this.init();
console.log("listTypeOfMan", this.listTypeOfMan);
this.flag = true;
this.getTypeOfMan();
})
.catch(() => {});
},
mapTree() { mapTree() {
//遍历画饼图
this.getId = []; this.getId = [];
this.chartList_values = Object.values(this.list); this.chartList_values = Object.values(this.listTop);
this.$nextTick(function () { this.$nextTick(function () {
for (var i = 0; i < this.chartList_values.length; i++) { for (var i = 0; i < this.chartList_values.length; i++) {
let arr = []; let arr = [];
arr.push( arr.push(
{ {
value: this.chartList_values[i].goodnum, value: this.chartList_values[i].goodnum,
...@@ -169,71 +562,119 @@ export default { ...@@ -169,71 +562,119 @@ export default {
} }
); );
console.log(arr, "arr========"); //console.log(arr, "arr========");
//拿到channel_grade_name作为变量key //拿到channel_grade_name作为变量key
this.getId.push(echarts.init(document.getElementById("geo_" + i))); this.getId.push(echarts.init(document.getElementById("geo_" + i)));
this.getId[i].setOption({ this.getIDBack = this.getId;
title: { // console.log("ooooo", this.getId);
text: this.chartList_values[i].title, //this.getId = getIDBack;
left: "center",
}, this.getId[i].setOption(
color: ["#91cc75", "#FFDC60", "#FF7070"], {
tooltip: { title: {
trigger: "item", text: this.chartList_values[i].title,
formatter: "{a} <br/>{b} : {c} ({d}%)", left: "center",
}, },
legend: { color: ["#40B27D", "#FFDC60", "#FF7070"],
bottom: 0, tooltip: {
left: "center", trigger: "item",
data: ["好", "中", "差"], formatter: "{b} : {c}个({d}%)",
}, },
series: [ legend: {
{ bottom: 0,
name: "占比", left: "center",
type: "pie", data: ["好", "中", "差"],
radius: "60%", },
center: ["50%", "50%"], series: [
selectedMode: "single", {
data: arr, name: "占比",
emphasis: { type: "pie",
itemStyle: { radius: "60%",
shadowBlur: 10, center: ["50%", "50%"],
shadowOffsetX: 0, selectedMode: "single",
shadowColor: "rgba(0, 0, 0, 0.5)", data: arr,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
normal: {
show: true,
formatter: "{b}: {c}个({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
},
}, },
}, },
}, ],
], },
true
);
/* window.addEventListener("resize", function () {
this.getId[i].resize();
}); });
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
this.getId[i].resize();
});
}); */
} }
console.log("uuuu", this.options);
/* window.addEventListener("resize", function () {
this.getId[0].resize();
});
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
this.getId[0].resize();
});
}); */
}); });
}, },
getPie() { getComment() {
//const myChart = echarts.init(chart, null, { renderer: "svg" }); //const myChart = echarts.init(chart, null, { renderer: "svg" });
let legendData = []; let legendData = [];
let goodData = []; let goodData = [];
let middleData = []; let middleData = [];
let badData = []; let badData = [];
this.list.forEach((ele) => {
this.listTop.forEach((ele) => {
legendData.push(ele.title); legendData.push(ele.title);
goodData.push(ele.goodnum); goodData.push(ele.goodnum);
middleData.push(ele.middlenum); middleData.push(ele.middlenum);
badData.push(ele.bandnum); badData.push(ele.bandnum);
}); });
console.log("middleData", middleData);
this.optionsAll = { this.optionsAll = {
color: ["#91cc75", "#FFDC60", "#FF7070"], color: ["#40B27D", "#FFDC60", "#FF7070"],
title: { text: "评价统计", left: "center" }, //title: { text: "评价统计", left: "center" },
legend: { legend: {
bottom: 0, bottom: 0,
data: ["好", "中", "差"], data: ["好", "中", "差"],
}, },
grid: {
left: 60,
right: 60,
},
xAxis: { xAxis: {
type: "category", type: "category",
data: legendData, data: legendData,
axisLabel: {
interval: 0, //强制文字产生间隔
rotate: 45, //文字逆时针旋转45°
textStyle: {
//文字样式
color: "black",
fontSize: 10,
fontFamily: "Microsoft YaHei",
},
},
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "数量（个）",
}, },
series: [ series: [
{ {
...@@ -266,12 +707,110 @@ export default { ...@@ -266,12 +707,110 @@ export default {
], ],
}; };
}, },
getTypeOfMan() {
//const myChart = echarts.init(chart, null, { renderer: "svg" });
let legendData = [];
let goodData = [];
let middleData = [];
let badData = [];
this.listTypeOfMan.forEach((ele) => {
legendData.push(ele.userRole);
goodData.push(ele.good);
middleData.push(ele.medium);
badData.push(ele.bad);
});
this.optionsDaibiao = {
color: ["#40B27D", "#FFDC60", "#FF7070"],
//title: { text: "评价统计", left: "center" },
legend: {
bottom: 0,
data: ["好", "中", "差"],
},
grid: {
left: 60,
right: 60,
},
xAxis: {
type: "category",
data: legendData,
},
yAxis: {
type: "value",
name: "数量（个）",
},
series: [
{
name: "好",
data: goodData,
type: "bar",
label: {
show: true,
position: "top",
},
},
{
name: "中",
data: middleData,
type: "bar",
label: {
show: true,
position: "top",
},
},
{
name: "差",
data: badData,
type: "bar",
label: {
show: true,
position: "top",
},
},
],
};
},
/* getAll() {
this.listTop = this.list2;
this.getComment();
this.mapTree();
this.getTypeOfMan();
this.$nextTick(() => {
this.$refs.chart.getEchart();
});
}, */
getAll() {
this.flag2 = false;
this.flag = false;
if (this.dataForm.dateVal) {
this.getInfoQuery();
} else {
this.getInfo();
}
},
}, },
created() { created() {
this.getPie(); this.getInfo();
//this.getTypeOfMan();
}, },
mounted() { mounted() {},
this.mapTree(); activated() {
//this.getTypeOfMan();
if (this.flag2 && this.flag) {
this.$refs.chartDaibiao.resize();
this.$refs.chart.resize();
}
/* for (let i = 0; i < this.getIDBack.length; i++) {
window.addEventListener("resize", function () {
this.getIDBack[i].resize();
});
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
this.getIDBack[i].resize();
});
});
} */
}, },
}; };
</script> </script>
...@@ -280,10 +819,18 @@ export default { ...@@ -280,10 +819,18 @@ export default {
.fhjwcommentstatistical { .fhjwcommentstatistical {
width: 100%; width: 100%;
.top { .top {
width: 100%; width: 60%;
margin: 0 auto;
display: flex; display: flex;
} }
} }
.titleline {
width: 100%;
display: flex;
line-height: 50px;
font-size: 18px;
border-bottom: 1px solid #eee;
}
.bottom { .bottom {
width: 100%; width: 100%;
...@@ -299,4 +846,19 @@ export default { ...@@ -299,4 +846,19 @@ export default {
//display: flex; //display: flex;
} }
} }
.bottom1 {
display: flex;
margin-top: 40px;
font-size: 18px;
line-height: 50px;
.left {
width: calc(100% - 20px);
border-bottom: 1px solid #eee;
margin-right: 20px;
}
.right {
width: calc(100% - 2px);
border-bottom: 1px solid #eee;
}
}
</style> </style>
\ No newline at end of file
src/views/modules/fhjw/fhjwfeedback-detail.vue
View file @ 4330a84c
...@@ -11,15 +11,42 @@ ...@@ -11,15 +11,42 @@
@keyup.enter.native="dataFormSubmitHandle()" @keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : '120px'" :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"
> >
<el-row :gutter="30">
<el-col :span="12">
<el-form-item
label="案件名"
prop="caseName"
>
<el-input
v-model="dataForm.caseName"
placeholder="案件名"
readonly
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="意见类别"
prop="optionStatus"
>
<el-input
v-model="dataForm.optionStatus"
readonly
placeholder="意见类别"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="30"> <el-row :gutter="30">
<el-col :span="12"> <el-col :span="12">
<el-form-item <el-form-item
label="用户" label="用户"
prop="userId" prop="userName"
> >
<el-input <el-input
v-model="dataForm.userId" v-model="dataForm.userName"
placeholder="用户" placeholder="用户"
readonly readonly
></el-input> ></el-input>
...@@ -44,16 +71,6 @@ ...@@ -44,16 +71,6 @@
</el-col> </el-col>
</el-row> </el-row>
<el-form-item
label="意见类别"
prop="optionStatus"
>
<el-input
v-model="dataForm.optionStatus"
readonly
placeholder="意见类别"
></el-input>
</el-form-item>
<el-form-item <el-form-item
label="意见、申诉内容" label="意见、申诉内容"
prop="content" prop="content"
......
src/views/modules/fhjw/fhjwfeedback.vue
View file @ 4330a84c
...@@ -7,13 +7,14 @@ ...@@ -7,13 +7,14 @@
<el-form <el-form
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"
@keyup.enter.native="getDataList()" @keyup.enter.native="getCheck()"
> >
<el-form-item> <el-form-item prop="content">
<el-input <el-input
v-model="dataForm.content" v-model="dataForm.content"
placeholder="意见、申诉内容" placeholder="意见、申诉内容"
clearable clearable
:maxlength="50"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -37,7 +38,7 @@ ...@@ -37,7 +38,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getCheck()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
...@@ -73,6 +74,39 @@ ...@@ -73,6 +74,39 @@
align="center" align="center"
width="50" width="50"
></el-table-column> ></el-table-column>
<el-table-column
prop="deptName"
label="部门"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="undertaker"
label="承办人"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="caseName"
label="案件名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="peopleName"
label="当事人"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="caseNum"
label="受案号"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> --> <!-- <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column> -->
<el-table-column <el-table-column
prop="content" prop="content"
...@@ -105,6 +139,12 @@ ...@@ -105,6 +139,12 @@
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column
prop="userRole"
label="身份"
header-align="center"
align="center"
></el-table-column>
<el-table-column <el-table-column
prop="createDate" prop="createDate"
label="创建时间" label="创建时间"
...@@ -162,6 +202,7 @@ ...@@ -162,6 +202,7 @@
import mixinViewModule from "@/mixins/view-module"; import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./fhjwfeedback-add-or-update"; import AddOrUpdate from "./fhjwfeedback-add-or-update";
import Detail from "./fhjwfeedback-detail"; import Detail from "./fhjwfeedback-detail";
import { isEmail, isSpecial } from "@/utils/validate";
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data() {
...@@ -179,6 +220,7 @@ export default { ...@@ -179,6 +220,7 @@ export default {
content: "", content: "",
feedbackType: "", feedbackType: "",
}, },
flag: true,
options: [ options: [
{ {
value: 1, value: 1,
...@@ -196,7 +238,40 @@ export default { ...@@ -196,7 +238,40 @@ export default {
value: "", value: "",
}; };
}, },
computed: {
dataRule() {
var validateCaseName = (rule, value, callback) => {
this.flag = true;
/* this.dataForm.caseName = this.dataForm.caseName.replace(
/[^u4e00-u9fa5w]/g,
""
); */
if (value && !isSpecial(value)) {
console.log("88888");
this.flag = false;
return callback(
new Error(this.$t("validate.format", { attr: "不能带特殊字符" }))
);
} else {
console.log("99999");
}
callback();
};
return {
content: [
{ required: true, validator: validateCaseName, trigger: "blur" },
],
};
},
},
methods: { methods: {
getCheck() {
this.dataForm.caseNum = this.filter(this.caseNum);
if (this.flag) {
this.getDataList();
}
},
detailHandle(id) { detailHandle(id) {
console.log(id); console.log(id);
this.detailVisible = true; this.detailVisible = true;
......
src/views/modules/fhjw/fhjwstatistical.vue
View file @ 4330a84c
...@@ -3,30 +3,18 @@ ...@@ -3,30 +3,18 @@
shadow="never" shadow="never"
class="aui-card--fill" class="aui-card--fill"
> >
<!-- <span class="label">筛选</span> <!-- 查询区域 -->
<el-date-picker
class="date-val"
v-model="dateVal"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
>
</el-date-picker>
<el-button>查询</el-button> -->
<el-form <el-form
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"
@keyup.enter.native="getDataList()"
> >
<el-form-item> <!-- <el-form-item>
<el-input <el-input
v-model="dataForm.department" v-model="dataForm.department"
placeholder="部门名称" placeholder="部门名称"
clearable clearable
></el-input> ></el-input>
</el-form-item> </el-form-item> -->
<el-form-item> <el-form-item>
<el-date-picker <el-date-picker
class="date-val" class="date-val"
...@@ -35,66 +23,70 @@ ...@@ -35,66 +23,70 @@
range-separator="至" range-separator="至"
start-placeholder="开始月份" start-placeholder="开始月份"
end-placeholder="结束月份" end-placeholder="结束月份"
value-format="yyyy-MM-dd"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getAll()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="titleline"> <!-- 顶部两个饼图区域 -->
<div class="left">
<img
src="../../../assets/img/logo_tj.png"
alt=""
style="width:20px;height:20px"
>
意见统计
</div>
<div class="right">
<img
src="../../../assets/img/logo_tj.png"
alt=""
style="width:20px;height:20px"
>
代表委员意见统计
</div>
</div>
<div class="bottom"> <div class="bottom">
<!-- <div <div style="flex:1;transform: translate3d(0, -10%, 0);height:400px">
ref="chartpie1" <div class="left">
style="width:50%;height:250px;" <img
></div> --> src="../../../assets/img/logo_tj.png"
<div style="flex:1;transform: translate3d(0, -10%, 0);"> style="width:20px;height:20px"
>
意见统计
</div>
<Echarts <Echarts
:options="optionsComment" :options="optionsComment"
height="300px" id="chartComment"
height="400px"
width="100%" width="100%"
ref="chartComment"
/> />
</div> </div>
<div style="flex:1;transform: translate3d(0, -10%, 0);"> <div style="flex:1;transform: translate3d(0, -10%, 0);height:400px">
<div class="right">
<img
src="../../../assets/img/logo_tj.png"
style="width:20px;height:20px"
>
代表委员意见统计
</div>
<Echarts <Echarts
:options="optionsDaibiao" :options="optionsDaibiao"
height="300px" height="400px"
width="100%" width="100%"
ref="chartDaibiao"
/> />
</div> </div>
<!-- <div
ref="chartpie2"
style="width:50%;height:250px"
></div> -->
</div> </div>
<div class="bottom"> <!-- 标题 -->
<!-- <div <div
ref="chartzhuzhuang" class="titleline"
style="width:100%;height:375px;" style="margin-top:30px"
></div> --> >
<div class="left">
<img
src="../../../assets/img/logo_tj.png"
style="width:20px;height:20px"
>
反馈统计
</div>
</div>
<!-- 底部折线图区域 -->
<div class="bottom-zhu">
<Echarts <Echarts
:options="optionsAll" :options="optionsAll"
height="375px" height="375px"
width="100%" width="100%"
ref="chartAll"
/> />
</div> </div>
...@@ -106,6 +98,7 @@ ...@@ -106,6 +98,7 @@
import Echarts from "../../../components/echarts.vue"; import Echarts from "../../../components/echarts.vue";
export default { export default {
name: "fhjwstatistical", name: "fhjwstatistical",
inject: ["refresh"],
components: { Echarts }, components: { Echarts },
data() { data() {
return { return {
...@@ -116,45 +109,86 @@ export default { ...@@ -116,45 +109,86 @@ export default {
optionsComment: {}, optionsComment: {},
optionsDaibiao: {}, optionsDaibiao: {},
optionsAll: {}, optionsAll: {},
flag: false,
}; };
}, },
methods: { methods: {
getPie1() { // 获取信息
getInfo() {
this.$http
.get("/fhjw/fhjwfeedback/getCount")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.flag = true;
this.getPieDaibiao(res.data[1].feedbackCount);
this.getZhuzhuang(res.data[2].feedbackCount);
this.getPieComment(res.data[0].feedbackCount);
})
.catch(() => {});
},
getInfoQuery() {
this.$http
.get(
"/fhjw/fhjwfeedback/getCount?startDate=" +
this.dataForm.dateVal[0] +
"&endDate=" +
this.dataForm.dateVal[1]
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.flag = true;
this.getPieDaibiao(res.data[1].feedbackCount);
this.getZhuzhuang(res.data[2].feedbackCount);
this.getPieComment(res.data[0].feedbackCount);
})
.catch(() => {});
},
//意见统计
getPieComment(feedbackCount) {
let data = [
{ value: feedbackCount.delayCount, name: "反映拖延消极办案" },
{ value: feedbackCount.illegalCount, name: "反映违规不当办案" },
{
value: feedbackCount.dishonestyCount,
name: "反映办案不廉或作风不正",
},
{
value: feedbackCount.interveneCount,
name: "反映存在插手干预案件办理",
},
{ value: feedbackCount.otherProblemCount, name: "反映其他方面问题" },
];
let legendData = [
"反映拖延消极办案",
"反映违规不当办案",
"反映办案不廉或作风不正",
"反映存在插手干预案件办理",
"反映其他方面问题",
];
this.optionsComment = { this.optionsComment = {
/* title: {
text: "天气情况统计",
subtext: "虚构数据",
left: "center",
}, */
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{a} <br/>{b} : {c}件 ({d}%)",
}, },
legend: { legend: {
bottom: 0, bottom: 0,
left: "center", left: "center",
data: legendData,
data: [
"反映拖延消极办案",
"反映违规不当办案",
"反映办案不廉或作风不正",
"反映存在插手干预案件办理",
"反映其他方面问题",
],
}, },
series: [ series: [
{ {
name: "占比",
type: "pie", type: "pie",
radius: "70%", radius: "60%",
center: ["50%", "50%"], center: ["50%", "50%"],
selectedMode: "single", selectedMode: "single",
data: [ data: data,
{ value: 1548, name: "反映拖延消极办案" },
{ value: 735, name: "反映违规不当办案" },
{ value: 510, name: "反映办案不廉或作风不正" },
{ value: 434, name: "反映存在插手干预案件办理" },
{ value: 335, name: "反映其他方面问题" },
],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
...@@ -162,46 +196,61 @@ export default { ...@@ -162,46 +196,61 @@ export default {
shadowColor: "rgba(0, 0, 0, 0.5)", shadowColor: "rgba(0, 0, 0, 0.5)",
}, },
}, },
label: {
normal: {
show: true,
formatter: "{b}: {c}件({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
},
},
}, },
], ],
}; };
}, },
getPie2() {
//代表委员
getPieDaibiao(feedbackCount) {
let data = [
{ value: feedbackCount.delayCount, name: "反映拖延消极办案" },
{ value: feedbackCount.illegalCount, name: "反映违规不当办案" },
{
value: feedbackCount.dishonestyCount,
name: "反映办案不廉或作风不正",
},
{
value: feedbackCount.interveneCount,
name: "反映存在插手干预案件办理",
},
{ value: feedbackCount.otherProblemCount, name: "反映其他方面问题" },
];
let legendData = [
"反映拖延消极办案",
"反映违规不当办案",
"反映办案不廉或作风不正",
"反映存在插手干预案件办理",
"反映其他方面问题",
];
this.optionsDaibiao = { this.optionsDaibiao = {
/* title: {
text: "天气情况统计",
subtext: "虚构数据",
left: "center",
}, */
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{b} : {c}件({d}%)",
}, },
legend: { legend: {
bottom: 0, bottom: 0,
left: "center", left: "center",
data: legendData,
data: [ formatter: function (name) {
"反映拖延消极办案", //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
"反映违规不当办案", return `${name}`;
"反映办案不廉或作风不正", },
"反映存在插手干预案件办理",
"反映其他方面问题",
],
}, },
series: [ series: [
{ {
name: "占比",
type: "pie", type: "pie",
radius: "70%", radius: "60%",
center: ["50%", "50%"], center: ["50%", "50%"],
selectedMode: "single", selectedMode: "single",
data: [ data: data,
{ value: 1548, name: "反映拖延消极办案" },
{ value: 735, name: "反映违规不当办案" },
{ value: 510, name: "反映办案不廉或作风不正" },
{ value: 434, name: "反映存在插手干预案件办理" },
{ value: 335, name: "反映其他方面问题" },
],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
...@@ -209,42 +258,71 @@ export default { ...@@ -209,42 +258,71 @@ export default {
shadowColor: "rgba(0, 0, 0, 0.5)", shadowColor: "rgba(0, 0, 0, 0.5)",
}, },
}, },
label: {
normal: {
show: true,
formatter: "{b}: {c}件({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
},
},
}, },
], ],
}; };
}, },
getZhuzhuang() {
//反馈统计
getZhuzhuang(feedbackCount) {
let data = [
feedbackCount.complainCount,
feedbackCount.feedbackCount,
feedbackCount.committeeCount,
];
let xData = ["控告申诉", "意见反馈", "代表委员有话说"];
this.optionsAll = { this.optionsAll = {
title: {
text: "反馈统计",
left: "center",
},
xAxis: { xAxis: {
type: "category", type: "category",
data: ["控告申诉", "意见反馈", "代表委员有话说"], data: xData,
}, },
yAxis: { yAxis: {
type: "value", type: "value",
}, },
series: [ series: [
{ {
barWidth: 40,
label: { label: {
show: true, show: true,
position: "top", position: "top",
}, },
data: [120, 200, 150], data: data,
type: "bar", type: "bar",
}, },
], ],
}; };
}, },
//查询
getAll() {
this.flag = false;
if (this.dataForm.dateVal) {
this.getInfoQuery();
} else {
this.getInfo();
}
},
}, },
created() { created() {
this.getPie1(); this.getInfo();
this.getPie2(); //this.init();
this.getZhuzhuang(); },
mounted() {
// this.getInfo();
},
activated() {
if (this.flag === true) {
this.$refs.chartComment.resize();
this.$refs.chartDaibiao.resize();
this.$refs.chartAll.resize();
}
}, },
mounted() {},
}; };
</script> </script>
...@@ -257,16 +335,34 @@ export default { ...@@ -257,16 +335,34 @@ export default {
display: flex; display: flex;
line-height: 50px; line-height: 50px;
font-size: 18px; font-size: 18px;
border-bottom: 1px solid #eee; //border-bottom: 1px solid #eee;
.left { .left {
width: 50%; width: calc(50% - 20px);
} border-bottom: 1px solid #eee;
.right { margin-right: 20px;
width: 50%;
} }
} }
.bottom { .bottom {
display: flex; display: flex;
margin-top: 20px; margin-top: 40px;
font-size: 18px;
line-height: 50px;
.left {
width: calc(100% - 20px);
border-bottom: 1px solid #eee;
margin-right: 20px;
}
.right {
width: calc(100% - 2px);
border-bottom: 1px solid #eee;
}
}
.bottom-zhu {
width: calc(50% - 10px);
transform: translate3d(0, -10%, 0);
height: 375px;
margin-top: 30px;
width: 50%;
border-bottom: 1px solid #eee;
} }
</style> </style>
\ No newline at end of file
src/views/modules/fhjw/fhjwtemp.vue
View file @ 4330a84c
...@@ -7,9 +7,10 @@ ...@@ -7,9 +7,10 @@
<el-form <el-form
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"
@keyup.enter.native="getDataList()" :rules="dataRule"
@keyup.enter.native="getCheck()"
> >
<el-form-item> <!-- <el-form-item prop="tempName">
<el-input <el-input
v-model="dataForm.tempName" v-model="dataForm.tempName"
placeholder="问卷名称" placeholder="问卷名称"
...@@ -17,8 +18,8 @@ ...@@ -17,8 +18,8 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getCheck()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item> -->
<!-- <el-form-item> <!-- <el-form-item>
<el-button <el-button
type="info" type="info"
...@@ -119,6 +120,7 @@ ...@@ -119,6 +120,7 @@
import mixinViewModule from "@/mixins/view-module"; import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./fhjwtemp-add-or-update"; import AddOrUpdate from "./fhjwtemp-add-or-update";
import { addDynamicRoute } from "@/router"; import { addDynamicRoute } from "@/router";
import { isSpecial } from "@/utils/validate";
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data() {
...@@ -130,6 +132,7 @@ export default { ...@@ -130,6 +132,7 @@ export default {
deleteURL: "/fhjw/fhjwtemp", deleteURL: "/fhjw/fhjwtemp",
deleteIsBatch: true, deleteIsBatch: true,
}, },
flag: true,
dataForm: { dataForm: {
id: "", id: "",
tempName: "", tempName: "",
...@@ -139,7 +142,39 @@ export default { ...@@ -139,7 +142,39 @@ export default {
components: { components: {
AddOrUpdate, AddOrUpdate,
}, },
computed: {
dataRule() {
var validateCaseName = (rule, value, callback) => {
this.flag = true;
/* this.dataForm.caseName = this.dataForm.caseName.replace(
/[^u4e00-u9fa5w]/g,
""
); */
if (value && !isSpecial(value)) {
console.log("88888");
this.flag = false;
return callback(
new Error(this.$t("validate.format", { attr: "不能带特殊字符" }))
);
} else {
console.log("99999");
}
callback();
};
return {
tempName: [
{ required: true, validator: validateCaseName, trigger: "blur" },
],
};
},
},
methods: { methods: {
getCheck() {
if (this.flag) {
this.getDataList();
}
},
// 子级 // 子级
childHandle(row) { childHandle(row) {
// 路由参数 // 路由参数
......
src/views/modules/fhjw/role-add-or-update.vue
View file @ 4330a84c
...@@ -42,6 +42,19 @@ ...@@ -42,6 +42,19 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item
prop="funcIdList"
label="权限设置"
>
<el-checkbox-group v-model="dataForm.funcIdList">
<el-checkbox
v-for="item in allFuncList"
:label="item.id"
:key="item.id"
>{{item.name}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- <el-form-item <!-- <el-form-item
label="备注" label="备注"
...@@ -79,8 +92,10 @@ export default { ...@@ -79,8 +92,10 @@ export default {
updateDate: "", updateDate: "",
remark: "", remark: "",
tempName: "", tempName: "",
funcIdList: [],
}, },
options: [], options: [],
allFuncList: [],
}; };
}, },
computed: { computed: {
...@@ -100,6 +115,13 @@ export default { ...@@ -100,6 +115,13 @@ export default {
trigger: "blur", trigger: "blur",
}, },
], ],
funcIdList: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
}; };
}, },
}, },
...@@ -124,6 +146,15 @@ export default { ...@@ -124,6 +146,15 @@ export default {
this.options = res.data; this.options = res.data;
}) })
.catch(() => {}); .catch(() => {});
this.$http
.get("/fhjw/fhiwfunction/getAllFuncList")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.allFuncList = res.data;
})
.catch(() => {});
}, },
// 获取信息 // 获取信息
getInfo() { getInfo() {
......
src/views/modules/fhjw/role.vue
View file @ 4330a84c
...@@ -66,8 +66,8 @@ ...@@ -66,8 +66,8 @@
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column
prop="creator" prop="funcName"
label="创建者" label="已授权"
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> ></el-table-column>
......
src/views/modules/fhjw/user-add-or-update.vue
View file @ 4330a84c
...@@ -30,6 +30,19 @@ ...@@ -30,6 +30,19 @@
placeholder="手机号" placeholder="手机号"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item
prop="gender"
:label="$t('user.gender')"
>
<!-- <ren-radio-group
v-model="dataForm.gender"
dict-type="gender"
></ren-radio-group> -->
<el-radio-group v-model="dataForm.gender">
<el-radio :label="0">男</el-radio>
<el-radio :label="1">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item <el-form-item
label="所属权限" label="所属权限"
...@@ -51,7 +64,15 @@ ...@@ -51,7 +64,15 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item
label="身份"
prop="identity"
>
<el-input
v-model="dataForm.identity"
placeholder="身份"
></el-input>
</el-form-item>
<el-form-item <el-form-item
label="身份证号" label="身份证号"
prop="userIdno" prop="userIdno"
...@@ -88,6 +109,7 @@ export default { ...@@ -88,6 +109,7 @@ export default {
userRole: "", userRole: "",
/* caseId: '', */ /* caseId: '', */
createDate: "", createDate: "",
gender: "",
}, },
options: [], options: [],
}; };
......
src/views/modules/fhjw/user.vue
View file @ 4330a84c
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<el-form <el-form
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"
:rules="dataRule"
@keyup.enter.native="getDataList()" @keyup.enter.native="getDataList()"
> >
<!-- <el-form-item> <!-- <el-form-item>
...@@ -16,7 +17,7 @@ ...@@ -16,7 +17,7 @@
clearable clearable
></el-input> ></el-input>
</el-form-item> --> </el-form-item> -->
<el-form-item> <el-form-item prop="mobile">
<el-input <el-input
v-model="dataForm.mobile" v-model="dataForm.mobile"
placeholder="手机号" placeholder="手机号"
...@@ -24,14 +25,8 @@ ...@@ -24,14 +25,8 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getCheck()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item>
<!-- <el-form-item>
<el-button
type="info"
@click="exportHandle()"
>{{ $t('export') }}</el-button>
</el-form-item> -->
<el-form-item> <el-form-item>
<el-button <el-button
v-if="$hasPermission('fhjw:user:save')" v-if="$hasPermission('fhjw:user:save')"
...@@ -39,13 +34,30 @@ ...@@ -39,13 +34,30 @@
@click="addOrUpdateHandle()" @click="addOrUpdateHandle()"
>{{ $t('add') }}</el-button> >{{ $t('add') }}</el-button>
</el-form-item> </el-form-item>
<!-- <el-form-item> <!-- <el-form-item>
<el-upload
class="upload-demo"
ref="upload"
action=""
:http-request="afterRead"
accept=".pdf,.doc,.docx,.xls,.xlsx"
:file-list="datalist"
>
<el-button type="warning">导入</el-button>
</el-upload>
</el-form-item> -->
<!-- <el-form-item>
<el-button <el-button
v-if="$hasPermission('fhjw:user:delete')" v-if="$hasPermission('fhjw:user:delete')"
type="danger" type="danger"
@click="deleteHandle()" @click="deleteHandle()"
>{{ $t('deleteBatch') }}</el-button> >{{ $t('deleteBatch') }}</el-button>
</el-form-item> --> </el-form-item> -->
<!-- <el-form-item>
<a href="">点击此处下载导入模板</a>
</el-form-item> -->
</el-form> </el-form>
<el-table <el-table
v-loading="dataListLoading" v-loading="dataListLoading"
...@@ -78,6 +90,24 @@ ...@@ -78,6 +90,24 @@
header-align="center" header-align="center"
align="center" align="center"
></el-table-column> ></el-table-column>
<el-table-column
prop="identity"
label="身份"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="gender"
:label="$t('user.gender')"
sortable="custom"
header-align="center"
align="center"
>
<template slot-scope="scope">
<!-- {{ $getDictLabel("gender", scope.row.gender) }} -->
<span>{{genderText(scope.row.gender)}}</span>
</template>
</el-table-column>
<el-table-column <el-table-column
prop="userRole" prop="userRole"
label="所属权限" label="所属权限"
...@@ -111,12 +141,12 @@ ...@@ -111,12 +141,12 @@
size="small" size="small"
@click="addOrUpdateHandle(scope.row.id)" @click="addOrUpdateHandle(scope.row.id)"
>{{ $t('update') }}</el-button> >{{ $t('update') }}</el-button>
<!-- <el-button <el-button
v-if="$hasPermission('fhjw:user:delete')" v-if="$hasPermission('fhjw:user:delete')"
type="text" type="text"
size="small" size="small"
@click="deleteHandle(scope.row.id)" @click="deleteHandle(scope.row.id)"
>{{ $t('delete') }}</el-button> --> >{{ $t('delete') }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -143,6 +173,7 @@ ...@@ -143,6 +173,7 @@
<script> <script>
import mixinViewModule from "@/mixins/view-module"; import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./user-add-or-update"; import AddOrUpdate from "./user-add-or-update";
import { isEmail, isNumber } from "@/utils/validate";
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data() {
...@@ -154,14 +185,83 @@ export default { ...@@ -154,14 +185,83 @@ export default {
deleteURL: "/fhjw/user", deleteURL: "/fhjw/user",
deleteIsBatch: true, deleteIsBatch: true,
}, },
datalist: [],
flag: true,
dataForm: { dataForm: {
id: "", id: "",
mobile: "", mobile: "",
}, },
}; };
}, },
computed: {
dataRule() {
var validateMobile = (rule, value, callback) => {
this.flag = true;
if (value && !isNumber(value)) {
console.log("88888");
this.flag = false;
return callback(
new Error(
this.$t("validate.format", { attr: this.$t("user.mobile") })
)
);
} else {
console.log("99999");
}
callback();
};
return {
mobile: [
{ required: true, validator: validateMobile, trigger: "blur" },
],
};
},
},
components: { components: {
AddOrUpdate, AddOrUpdate,
}, },
methods: {
getCheck() {
if (this.flag) {
this.getDataList();
}
},
genderText(gender) {
return ["男", "女"][gender];
},
//上传附件
afterRead(file) {
let data = new FormData();
data.append("file", file.file);
console.log(file);
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
loading.close();
}, 2000);
// console.log("file", data);
/* getfileUploader(data).then((res) => {
if (res.data.code == 0) {
this.datalist.push({
docId: res.data.data.docId,
name: res.data.data.fileName,
filePath: res.data.data.url,
createDate: currentDate,
});
// console.log("上传完的dataform", this.dataForm);
}
this.dataForm.woWorkorderDocumentDTOList = this.datalist;
}); */
},
},
}; };
</script> </script>
<style lang="less" scoped>
/deep/.el-upload-list {
display: none;
}
</style>
src/views/modules/home.vue
View file @ 4330a84c
...@@ -6,26 +6,54 @@ ...@@ -6,26 +6,54 @@
<!-- <div class="title"> <!-- <div class="title">
欢迎登陆检察阳光码管理系统 欢迎登陆检察阳光码管理系统
</div> --> </div> -->
<div class="top"> <!-- 顶部标题 -->
<div
class="titleline"
style="margin-top:0"
>
<div
class="left"
style="width:100%"
>
<img
src="../../assets/img/logo_tj.png"
alt=""
style="width:20px;height:20px"
>
部门评价统计
</div>
</div>
<div
class="top"
style="margin-top:10px"
>
<div <div
class="item" class="item"
v-for="item in list" v-for="item in listTop"
:key="item.id" :key="item.id"
> >
<div
class="title"
style="line-height:25px"
>{{item.title}}</div>
<div class="item-content"> <div class="item-content">
<img <img
src="../../assets/img/member_icon_54.png" src="../../assets/img/member_icon_54.png"
alt="" alt=""
class="title-img" class="title-img"
> >
<div class="right"> <div class="right">
<div class="num">{{item.num}}</div> <div class="num">好：{{item.good}}%</div>
<div class="title">{{item.title}}</div> <div class="num">中：{{item.middle}}%</div>
<div class="num">差：{{item.bad}}%</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 顶部标题 -->
<div class="titleline"> <div class="titleline">
<div class="left"> <div class="left">
<img <img
...@@ -33,7 +61,7 @@ ...@@ -33,7 +61,7 @@
alt="" alt=""
style="width:20px;height:20px" style="width:20px;height:20px"
> >
部门办案情况 测评案件统计
</div> </div>
<div class="right"> <div class="right">
<img <img
...@@ -41,36 +69,50 @@ ...@@ -41,36 +69,50 @@
alt="" alt=""
style="width:20px;height:20px" style="width:20px;height:20px"
> >
部门办案情况统计 近一年好差评统计趋势图
</div> </div>
</div> </div>
<!-- 底部图形化 -->
<div class="bottom"> <div class="bottom">
<!-- <div <!-- 饼图 -->
ref="chartpie"
style="width:40%;height:470px;flex:3.5"
></div> -->
<div style="width:40%;transform: translate3d(0, -10%, 0);"> <div style="width:40%;transform: translate3d(0, -10%, 0);">
<Echarts <Echarts
:options="optionHandlingSituation" :options="optionHandlingSituation"
height="470px" height="500px"
width="100%" width="100%"
ref="pie"
/> />
</div> </div>
<!-- 柱状 -->
<div style="width:60%;transform: translate3d(0, -10%, 0);"> <div style="width:60%;transform: translate3d(0, -10%, 0);">
<Echarts <Echarts
:options="optionHandlingSituationZhe" :options="optionHandlingSituationZhe"
height="470px" height="250px"
width="100%" width="100%"
ref="zhexian"
/>
<Echarts
:options="optionHandlingSituationZhu"
height="250px"
width="100%"
ref="zhuzi"
/> />
</div> </div>
<!-- <div
ref="chartzhexian"
style="width:60%;height:470px;flex:6.5"
></div> -->
</div> </div>
<!-- <div class="bottom">
<div style="width:60%;transform: translate3d(0, -10%, 0);">
<Echarts
:options="optionHandlingSituationZhe"
height="470px"
width="100%"
/>
</div>
</div> -->
</el-card> </el-card>
</template> </template>
...@@ -82,58 +124,333 @@ export default { ...@@ -82,58 +124,333 @@ export default {
return { return {
optionHandlingSituation: {}, optionHandlingSituation: {},
optionHandlingSituationZhe: {}, optionHandlingSituationZhe: {},
list: [ optionHandlingSituationZhu: {},
flag: false,
flag2: false,
listTop: [
{
id: 9,
title: "院领导",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 1,
title: "第一检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 2,
title: "第二检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 3,
title: "第三检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 4,
title: "第四检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 5,
title: "第五检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 6,
title: "第六检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 7,
title: "第七检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
{
id: 8,
title: "溪口检察部",
goodnum: 0,
middlenum: 0,
bandnum: 0,
good: "",
middle: "",
bad: "",
totle: 0,
},
],
listTopPie: [
{
id: 9,
title: "院领导",
totle: 0,
},
{ {
id: 1, id: 1,
title: "第一检察部", title: "第一检察部",
num: 834, totle: 0,
}, },
{ {
id: 2, id: 2,
title: "第二检察部", title: "第二检察部",
num: 307, totle: 0,
}, },
{ {
id: 3, id: 3,
title: "第三检察部", title: "第三检察部",
num: 32, totle: 0,
}, },
{ {
id: 4, id: 4,
title: "第四检察部", title: "第四检察部",
num: 145, totle: 0,
}, },
{ {
id: 5, id: 5,
title: "第五检察部", title: "第五检察部",
num: 153, totle: 0,
}, },
{ {
id: 6, id: 6,
title: "第六检察部", title: "第六检察部",
num: 81, totle: 0,
}, },
{ {
id: 7, id: 7,
title: "第七检察部", title: "第七检察部",
num: 271, totle: 0,
}, },
{ {
id: 8, id: 8,
title: "溪口检察部", title: "溪口检察部",
num: 8, totle: 0,
},
],
data: [],
listByMonth: [
/* {
id: 1,
date: "2020-12",
goodnum: 0,
middlenum: 20,
badnum: 0,
}, },
{
id: 2,
date: "2021-01",
goodnum: 156,
middlenum: 50,
badnum: 1,
},
{
id: 3,
date: "2021-02",
goodnum: 200,
middlenum: 5,
badnum: 0,
},
{
id: 4,
date: "2021-03",
goodnum: 100,
middlenum: 1,
badnum: 5,
},
{
id: 5,
date: "2021-04",
goodnum: 132,
middlenum: 2,
badnum: 2,
},
{
id: 6,
date: "2021-05",
goodnum: 169,
middlenum: 3,
badnum: 1,
},
{
id: 7,
date: "2021-06",
goodnum: 202,
middlenum: 8,
badnum: 10,
},
{
id: 8,
date: "2021-07",
goodnum: 188,
middlenum: 2,
badnum: 0,
},
{
id: 9,
date: "2021-08",
goodnum: 155,
middlenum: 20,
badnum: 0,
},
{
id: 10,
date: "2021-09",
goodnum: 100,
middlenum: 20,
badnum: 0,
},
{
id: 11,
date: "2021-10",
goodnum: 200,
middlenum: 20,
badnum: 0,
},
{
id: 12,
date: "2021-11",
goodnum: 100,
middlenum: 20,
badnum: 0,
}, */
], ],
}; };
}, },
created() { created() {
// this.getSysInfo(); // this.getSysInfo();
this.getPie(); this.getInfo();
this.getZhe();
}, },
mounted() {}, mounted() {},
methods: { methods: {
// 获取信息
getInfo() {
this.$http
.get("/fhjw/fhjwcomment/getCountByDept")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.listTop.forEach((ele) => {
res.data.forEach((eles) => {
if (ele.title === eles.deptName) {
ele.goodnum = eles.committeeCountDTO.good;
ele.middlenum = eles.committeeCountDTO.medium;
ele.bandnum = eles.committeeCountDTO.bad;
ele.totle = eles.committeeCountDTO.totalCount;
}
});
});
console.log("this.list", this.listTop);
})
.then(() => {
this.init();
this.flag = true;
})
.catch(() => {});
this.$http
.get("/fhjw/fhjwcomment/getCountByMouth")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.listByMonth = res.data;
})
.then(() => {
this.flag2 = true;
this.getZhe();
this.getZhu();
})
.catch(() => {});
this.$http
.get("/fhjw/fhjwcomment/getCaseCountByDept")
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.listTop.forEach((ele) => {
res.data.forEach((eles) => {
if (ele.title === eles.deptName) {
ele.totle = eles.committeeCountDTO.totalCount;
}
});
this.data.push({ value: ele.totle, name: ele.title });
});
})
.then(() => {
this.getPie();
})
.catch(() => {});
},
init() {
this.listTop.forEach((ele) => {
let totle = ele.goodnum + ele.middlenum + ele.bandnum;
if (totle === 0) {
ele.good = 0;
ele.middle = 0;
ele.bad = 0;
} else {
ele.good = ((ele.goodnum / totle) * 100).toFixed(1);
ele.middle = ((ele.middlenum / totle) * 100).toFixed(1);
ele.bad = ((ele.bandnum / totle) * 100).toFixed(1);
}
});
},
formatterNumber(v) {
return (v * 1).toFixed(1);
},
getSysInfo() { getSysInfo() {
this.$http this.$http
.get("/sys/info") .get("/sys/info")
...@@ -146,16 +463,18 @@ export default { ...@@ -146,16 +463,18 @@ export default {
.catch(() => {}); .catch(() => {});
}, },
getPie() { getPie() {
console.log("data", this.data);
this.optionHandlingSituation = { this.optionHandlingSituation = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)", formatter: "{b} : {c}件({d}%)",
}, },
legend: { legend: {
bottom: 0, bottom: 0,
left: "center", left: "center",
data: [ data: [
"院领导",
"第一检察部", "第一检察部",
"第二检察部", "第二检察部",
"第三检察部", "第三检察部",
...@@ -166,23 +485,15 @@ export default { ...@@ -166,23 +485,15 @@ export default {
"溪口检察部", "溪口检察部",
], ],
}, },
series: [ series: [
{ {
name: "占比", name: "占比",
type: "pie", type: "pie",
radius: "70%", radius: "50%",
center: ["50%", "50%"], center: ["50%", "50%"],
selectedMode: "single", selectedMode: "single",
data: [ data: this.data,
{ value: 1548, name: "第一检察部" },
{ value: 735, name: "第二检察部" },
{ value: 510, name: "第三检察部" },
{ value: 434, name: "第四检察部" },
{ value: 335, name: "第五检察部" },
{ value: 335, name: "第六检察部" },
{ value: 335, name: "第七检察部" },
{ value: 335, name: "溪口检察部" },
],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
...@@ -190,174 +501,599 @@ export default { ...@@ -190,174 +501,599 @@ export default {
shadowColor: "rgba(0, 0, 0, 0.5)", shadowColor: "rgba(0, 0, 0, 0.5)",
}, },
}, },
label: {
normal: {
show: true,
formatter: "{b}: {c}件({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
},
},
}, },
], ],
}; };
}, },
getZhe() { getZhe() {
let xAxisData = [];
let goodnumData = [];
let middlenumData = [];
let badnumData = [];
let goodpercentData = [];
let middlepercentData = [];
let badpercentData = [];
console.log("ooopppp", xAxisData, goodnumData, middlenumData, badnumData);
this.listByMonth.forEach((ele) => {
xAxisData = xAxisData.concat(ele.createDate).reverse();
goodnumData = goodnumData.concat(ele.good).reverse();
middlenumData = middlenumData.concat(ele.medium).reverse();
badnumData = badnumData.concat(ele.badnum).reverse();
let totle = ele.medium + ele.good + ele.bad;
goodpercentData = goodpercentData
.concat(((ele.good / totle) * 100).toFixed(1))
.reverse();
middlepercentData = middlepercentData
.concat(((ele.medium / totle) * 100).toFixed(1))
.reverse();
badpercentData = badpercentData
.concat(((ele.bad / totle) * 100).toFixed(1))
.reverse();
});
console.log("dddddd", xAxisData, goodnumData, middlenumData, badnumData);
this.optionHandlingSituationZhe = { this.optionHandlingSituationZhe = {
/* title: {
text: "折线图堆叠",
}, */
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
formatter:
"<div style='width:10px;height:10px;background:#40B27D;display:inline-block;border-radius:50%;margin-right:5px'></div>{a0}:{c0}%<br/>" +
"<div style='width:10px;height:10px;background:#4B94E4;display:inline-block;border-radius:50%;margin-right:5px'></div>{a1}:{c1}%<br/>" +
"<div style='width:10px;height:10px;background:#FF7070;display:inline-block;border-radius:50%;margin-right:5px'></div>{a2}:{c2}%",
}, },
legend: { color: ["#40B27D", "#4B94E4", "#FF7070"],
bottom: 0,
left: "center",
data: [
"第一检察部",
"第二检察部",
"第三检察部",
"第四检察部",
"第五检察部",
"第六检察部",
"第七检察部",
"溪口检察部",
],
},
grid: { grid: {
top: "30%",
left: "5%", left: "5%",
right: "5%", right: "5%",
bottom: "10%", bottom: "15%",
containLabel: true, containLabel: true,
}, },
/* toolbox: {
feature: { legend: {
saveAsImage: {}, data: ["好评占比", "中评占比", "差评占比"],
}, bottom: 0,
}, */
xAxis: {
type: "category",
boundaryGap: false,
data: [
"2020-12",
"2021-01",
"2021-02",
"2021-03",
"2021-04",
"2021-05",
],
}, },
yAxis: { xAxis: [
type: "value", {
axisLine: { type: "category",
show: true, data: xAxisData,
axisPointer: {
type: "shadow",
},
axisTick: {
show: false,
},
}, },
}, ],
yAxis: [
{
type: "value",
name: "占比（%）",
min: -20,
max: 100,
axisLabel: {
formatter: "{value}",
},
},
],
series: [ series: [
{ {
name: "第一检察部", name: "好评占比",
type: "line", type: "line",
stack: "总量", data: goodpercentData,
data: [120, 132, 101, 134, 90, 230],
}, },
{ {
name: "第二检察部", name: "中评占比",
type: "line", type: "line",
stack: "总量", data: middlepercentData,
data: [220, 182, 191, 234, 290, 330],
}, },
{ {
name: "第三检察部", name: "差评占比",
type: "line", type: "line",
stack: "总量", data: badpercentData,
data: [150, 232, 201, 154, 190, 330], },
],
};
this.optionHandlingSituationZhu = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
}, },
formatter:
"<div style='width:10px;height:10px;background:#40B27D;display:inline-block;border-radius:50%;margin-right:5px'></div>{a0}:{c0}个<br/>" +
"<div style='width:10px;height:10px;background:#4B94E4;display:inline-block;border-radius:50%;margin-right:5px'></div>{a1}:{c1}个<br/>" +
"<div style='width:10px;height:10px;background:#FF7070;display:inline-block;border-radius:50%;margin-right:5px'></div>{a2}:{c2}个",
},
color: ["#40B27D", "#4B94E4", "#FF7070"],
grid: {
top: "20%",
left: "5%",
right: "5%",
bottom: "15%",
containLabel: true,
},
legend: {
data: ["好评数量", "中评数量", "差评数量"],
bottom: 0,
},
xAxis: [
{ {
name: "第四检察部", type: "category",
type: "line", data: xAxisData,
stack: "总量", axisPointer: {
data: [320, 332, 301, 334, 390, 330], type: "shadow",
},
}, },
],
yAxis: [
{ {
name: "第五检察部", type: "value",
type: "line", name: "数量(个)",
stack: "总量", min: 0,
data: [820, 932, 901, 934, 1290, 1330],
axisLabel: {
formatter: "{value}",
},
}, },
],
series: [
{ {
name: "第六检察部", name: "好评数量",
type: "line", type: "bar",
stack: "总量", data: goodnumData,
data: [320, 332, 301, 334, 390, 330],
}, },
{ {
name: "第七检察部", name: "中评数量",
type: "line", type: "bar",
stack: "总量", data: middlenumData,
data: [100, 200, 300, 500, 200, 100],
}, },
{ {
name: "溪口检察部", name: "差评数量",
type: "line", type: "bar",
stack: "总量", data: badnumData,
data: [500, 100, 500, 200, 50, 10], },
],
};
},
getZhu() {
let legendData = [];
let goodData = [];
let middleData = [];
let badData = [];
/* this.listByMonth.forEach((ele) => {
legendData = legendData.push(ele.createDate).reverse();
goodData = goodData.push(ele.good).reverse();
middleData = middleData.push(ele.medium).reverse();
badData = badData.push(ele.bad).reverse();
}); */
this.listByMonth.forEach((ele) => {
legendData = legendData.concat(ele.createDate).reverse();
goodData = goodData.concat(ele.good).reverse();
middleData = middleData.concat(ele.medium).reverse();
badData = badData.concat(ele.bad).reverse();
});
console.log("么么么么么", badData);
this.optionHandlingSituationZhu = {
color: ["#40B27D", "#FFDC60", "#FF7070"],
//title: { text: "评价统计", left: "center" },
legend: {
bottom: 0,
data: ["好", "中", "差"],
},
grid: {
left: 60,
right: 60,
},
xAxis: {
type: "category",
data: legendData,
},
yAxis: {
type: "value",
},
series: [
{
name: "好",
data: goodData,
type: "bar",
label: {
show: true,
position: "top",
},
},
{
name: "中",
data: middleData,
type: "bar",
label: {
show: true,
position: "top",
},
},
{
name: "差",
data: badData,
type: "bar",
label: {
show: true,
position: "top",
},
}, },
], ],
}; };
}, },
}, },
activated() {
// this.getPie();
// this.flag = true;
if (this.flag && this.flag2) {
this.$refs.zhexian.resize();
this.$refs.zhuzi.resize();
this.$refs.pie.resize();
}
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.top { @media screen and (max-width: 1200px) {
display: flex; .top {
justify-content: space-between;
.item {
background: #4f96e1;
color: #fff;
display: flex; display: flex;
width: 150px; justify-content: space-between;
height: 90px; .item {
text-align: center; background: #4f96e1;
vertical-align: middle; color: #fff;
padding: 10px 10px 0; display: flex;
border-radius: 8px; // width: 150px;
position: relative; margin-right: 3px;
.num { flex: 1;
font-size: 30px; height: 90px;
text-align: center;
vertical-align: middle;
padding: 10px 10px 0;
border-radius: 8px;
font-size: 14px;
position: relative;
.num {
font-size: 8px;
}
.item-content {
position: absolute;
width: 96%;
margin: 12px auto 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
}
.title-img {
width: 25%;
height: 25%;
margin: 0 5px;
//vertical-align: middle;
}
.right {
// margin-left: 5px;
text-align: right;
}
.title,
.num {
text-align: left;
}
} }
.item-content { }
position: absolute; .titleline {
width: 80%; display: flex;
margin: 0 auto; line-height: 40px;
top: 50%; font-size: 18px;
margin-top: 35px;
transform: translate(0, -50%); // border-bottom: 1px solid #eee;
.left {
width: 40%;
margin-right: 20px;
border-bottom: 1px solid #eee;
}
.right {
width: 60%;
border-bottom: 1px solid #eee;
}
}
.bottom {
width: 100%;
display: flex;
margin-top: 20px;
}
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
.top {
display: flex;
justify-content: space-between;
.item {
background: #4f96e1;
color: #fff;
display: flex; display: flex;
// width: 150px;
margin-right: 3px;
flex: 1;
height: 90px;
text-align: center;
vertical-align: middle;
padding: 10px 10px 0;
border-radius: 8px;
font-size: 14px;
position: relative;
.num {
font-size: 8px;
}
.item-content {
position: absolute;
width: 96%;
margin: 12px auto 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
}
.title-img {
width: 25%;
height: 25%;
margin: 0 5px;
//vertical-align: middle;
}
.right {
// margin-left: 5px;
text-align: right;
}
.title,
.num {
text-align: left;
}
} }
.title-img { }
width: 40px; .titleline {
height: 40px; display: flex;
//vertical-align: middle; line-height: 40px;
font-size: 18px;
margin-top: 35px;
// border-bottom: 1px solid #eee;
.left {
width: 40%;
margin-right: 20px;
border-bottom: 1px solid #eee;
} }
.right { .right {
margin-left: 10px; width: 60%;
text-align: right; border-bottom: 1px solid #eee;
} }
.title, }
.num { .bottom {
text-align: right; width: 100%;
display: flex;
margin-top: 20px;
}
}
@media screen and (min-width: 1400px) and (max-width: 1660px) {
.top {
display: flex;
justify-content: space-between;
.item {
background: #4f96e1;
color: #fff;
display: flex;
// width: 150px;
margin-right: 8px;
flex: 1;
height: 90px;
text-align: center;
vertical-align: middle;
padding: 10px 10px 0;
border-radius: 8px;
font-size: 14px;
position: relative;
.num {
font-size: 8px;
}
.item-content {
position: absolute;
width: 95%;
margin: 12px auto 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
}
.title-img {
width: 25%;
height: 25%;
margin: 0 5px;
//vertical-align: middle;
}
.right {
margin-left: 5px;
text-align: right;
}
.title,
.num {
text-align: left;
}
} }
} }
.titleline {
display: flex;
line-height: 40px;
font-size: 18px;
margin-top: 35px;
// border-bottom: 1px solid #eee;
.left {
width: 40%;
margin-right: 20px;
border-bottom: 1px solid #eee;
}
.right {
width: 60%;
border-bottom: 1px solid #eee;
}
}
.bottom {
width: 100%;
display: flex;
margin-top: 20px;
}
} }
.titleline { @media screen and (min-width: 1660px) and (max-width: 1900px) {
display: flex; .top {
line-height: 50px; display: flex;
font-size: 18px; justify-content: space-between;
margin-top: 35px; .item {
border-bottom: 1px solid #eee; background: #4f96e1;
.left { color: #fff;
width: 40%; display: flex;
// width: 150px;
margin-right: 20px;
flex: 1;
height: 90px;
text-align: center;
vertical-align: middle;
padding: 10px 10px 0;
border-radius: 8px;
font-size: 14px;
position: relative;
.num {
font-size: 10px;
}
.item-content {
position: absolute;
width: 90%;
margin: 12px auto 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
}
.title-img {
width: 25%;
height: 25%;
margin: 0 5px;
//vertical-align: middle;
}
.right {
margin-left: 5px;
text-align: right;
}
.title,
.num {
text-align: left;
}
}
} }
.right { .titleline {
width: 60%; display: flex;
line-height: 40px;
font-size: 18px;
margin-top: 35px;
// border-bottom: 1px solid #eee;
.left {
width: 40%;
margin-right: 20px;
border-bottom: 1px solid #eee;
}
.right {
width: 60%;
border-bottom: 1px solid #eee;
}
}
.bottom {
width: 100%;
display: flex;
margin-top: 20px;
} }
} }
.bottom { @media screen and (min-width: 1910px) {
width: 100%; .top {
display: flex; display: flex;
margin-top: 20px; justify-content: space-between;
.item {
background: #4f96e1;
color: #fff;
display: flex;
// width: 150px;
margin-right: 40px;
flex: 1;
height: 90px;
text-align: center;
vertical-align: middle;
padding: 10px 10px 0;
border-radius: 8px;
font-size: 18px;
position: relative;
.num {
font-size: 13px;
}
.item-content {
position: absolute;
width: 90%;
margin: 12px auto 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
}
.title-img {
width: 25%;
height: 25%;
margin: 0 5px;
//vertical-align: middle;
}
.right {
margin-left: 5px;
text-align: right;
}
.title,
.num {
text-align: left;
}
}
}
.titleline {
display: flex;
line-height: 40px;
font-size: 18px;
margin-top: 35px;
// border-bottom: 1px solid #eee;
.left {
width: 40%;
margin-right: 20px;
border-bottom: 1px solid #eee;
}
.right {
width: 60%;
border-bottom: 1px solid #eee;
}
}
.bottom {
width: 100%;
display: flex;
margin-top: 20px;
}
} }
</style> </style>
src/views/modules/sys/role-add-or-update.vue
View file @ 4330a84c
<template> <template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px"> :visible.sync="visible"
<el-form-item prop="name" :label="$t('role.name')"> :title="!dataForm.id ? $t('add') : $t('update')"
<el-input v-model="dataForm.name" :placeholder="$t('role.name')"></el-input> :close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
label-width="120px"
>
<el-form-item
prop="name"
:label="$t('role.name')"
>
<el-input
v-model="dataForm.name"
:placeholder="$t('role.name')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="remark" :label="$t('role.remark')"> <el-form-item
<el-input v-model="dataForm.remark" :placeholder="$t('role.remark')"></el-input> prop="remark"
:label="$t('role.remark')"
>
<el-input
v-model="dataForm.remark"
:placeholder="$t('role.remark')"
></el-input>
</el-form-item> </el-form-item>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item size="mini" :label="$t('role.menuList')"> <el-form-item
size="mini"
:label="$t('role.menuList')"
>
<el-tree <el-tree
:data="menuList" :data="menuList"
:props="{ label: 'name', children: 'children' }" :props="{ label: 'name', children: 'children' }"
node-key="id" node-key="id"
ref="menuListTree" ref="menuListTree"
accordion accordion
show-checkbox> show-checkbox
>
</el-tree> </el-tree>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item size="mini" :label="$t('role.deptList')"> <el-form-item
size="mini"
:label="$t('role.deptList')"
>
<el-tree <el-tree
:data="deptList" :data="deptList"
:props="{ label: 'name', children: 'children' }" :props="{ label: 'name', children: 'children' }"
node-key="id" node-key="id"
ref="deptListTree" ref="deptListTree"
accordion accordion
show-checkbox> show-checkbox
>
</el-tree> </el-tree>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -36,113 +67,137 @@ ...@@ -36,113 +67,137 @@
</el-form> </el-form>
<template slot="footer"> <template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> <el-button
type="primary"
@click="dataFormSubmitHandle()"
>{{ $t('confirm') }}</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import debounce from 'lodash/debounce' import debounce from "lodash/debounce";
export default { export default {
data () { data() {
return { return {
visible: false, visible: false,
menuList: [], menuList: [],
deptList: [], deptList: [],
dataForm: { dataForm: {
id: '', id: "",
name: '', name: "",
menuIdList: [], menuIdList: [],
deptIdList: [], deptIdList: [],
remark: '' remark: "",
} },
} };
}, },
computed: { computed: {
dataRule () { dataRule() {
return { return {
name: [ name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
] required: true,
} message: this.$t("validate.required"),
} trigger: "blur",
},
],
};
},
}, },
methods: { methods: {
init () { init() {
this.visible = true this.visible = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs["dataForm"].resetFields();
this.$refs.menuListTree.setCheckedKeys([]) this.$refs.menuListTree.setCheckedKeys([]);
this.$refs.deptListTree.setCheckedKeys([]) this.$refs.deptListTree.setCheckedKeys([]);
Promise.all([ Promise.all([this.getMenuList(), this.getDeptList()]).then(() => {
this.getMenuList(),
this.getDeptList()
]).then(() => {
if (this.dataForm.id) { if (this.dataForm.id) {
this.getInfo() this.getInfo();
} }
}) });
}) });
}, },
// 获取菜单列表 // 获取菜单列表
getMenuList () { getMenuList() {
return this.$http.get('/sys/menu/select').then(({ data: res }) => { return this.$http
if (res.code !== 0) { .get("/sys/menu/select")
return this.$message.error(res.msg) .then(({ data: res }) => {
} if (res.code !== 0) {
this.menuList = res.data return this.$message.error(res.msg);
}).catch(() => {}) }
this.menuList = res.data;
})
.catch(() => {});
}, },
// 获取部门列表 // 获取部门列表
getDeptList () { getDeptList() {
return this.$http.get('/sys/dept/list').then(({ data: res }) => { return this.$http
if (res.code !== 0) { .get("/sys/dept/list")
return this.$message.error(res.msg) .then(({ data: res }) => {
} if (res.code !== 0) {
this.deptList = res.data return this.$message.error(res.msg);
}).catch(() => {}) }
this.deptList = res.data;
})
.catch(() => {});
}, },
// 获取信息 // 获取信息
getInfo () { getInfo() {
this.$http.get(`/sys/role/${this.dataForm.id}`).then(({ data: res }) => { this.$http
if (res.code !== 0) { .get(`/sys/role/${this.dataForm.id}`)
return this.$message.error(res.msg) .then(({ data: res }) => {
} if (res.code !== 0) {
this.dataForm = { return this.$message.error(res.msg);
...this.dataForm, }
...res.data this.dataForm = {
} ...this.dataForm,
this.dataForm.menuIdList.forEach(item => this.$refs.menuListTree.setChecked(item, true)) ...res.data,
this.$refs.deptListTree.setCheckedKeys(this.dataForm.deptIdList) };
}).catch(() => {}) this.dataForm.menuIdList.forEach((item) =>
this.$refs.menuListTree.setChecked(item, true)
);
this.$refs.deptListTree.setCheckedKeys(this.dataForm.deptIdList);
})
.catch(() => {});
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce(function () { dataFormSubmitHandle: debounce(
this.$refs['dataForm'].validate((valid) => { function () {
if (!valid) { this.$refs["dataForm"].validate((valid) => {
return false if (!valid) {
} return false;
this.dataForm.menuIdList = [
...this.$refs.menuListTree.getHalfCheckedKeys(),
...this.$refs.menuListTree.getCheckedKeys()
]
this.dataForm.deptIdList = this.$refs.deptListTree.getCheckedKeys()
this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/role', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} }
this.$message({ this.dataForm.menuIdList = [
message: this.$t('prompt.success'), ...this.$refs.menuListTree.getHalfCheckedKeys(),
type: 'success', ...this.$refs.menuListTree.getCheckedKeys(),
duration: 500, ];
onClose: () => { this.dataForm.deptIdList = this.$refs.deptListTree.getCheckedKeys();
this.visible = false this.$http[!this.dataForm.id ? "post" : "put"](
this.$emit('refreshDataList') "/sys/role",
} this.dataForm
}) )
}).catch(() => {}) .then(({ data: res }) => {
}) if (res.code !== 0) {
}, 1000, { 'leading': true, 'trailing': false }) return this.$message.error(res.msg);
} }
} this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</script> </script>
src/views/modules/sys/role.vue
View file @ 4330a84c
<template> <template>
<el-card shadow="never" class="aui-card--fill"> <el-card
shadow="never"
class="aui-card--fill"
>
<div class="mod-sys__role"> <div class="mod-sys__role">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form
<el-form-item> :inline="true"
<el-input v-model="dataForm.name" :placeholder="$t('role.name')" clearable></el-input> :rules="dataRule"
:model="dataForm"
@keyup.enter.native="getCheck()"
>
<!-- <el-form-item prop="name">
<el-input
v-model="dataForm.name"
:placeholder="$t('role.name')"
clearable
></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getCheck()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item> -->
<el-form-item> <el-form-item>
<el-button v-if="$hasPermission('sys:role:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> <el-button
v-if="$hasPermission('sys:role:save')"
type="primary"
@click="addOrUpdateHandle()"
>{{ $t('add') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button v-if="$hasPermission('sys:role:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> <el-button
v-if="$hasPermission('sys:role:delete')"
type="danger"
@click="deleteHandle()"
>{{ $t('deleteBatch') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table <el-table
...@@ -21,15 +41,54 @@ ...@@ -21,15 +41,54 @@
border border
@selection-change="dataListSelectionChangeHandle" @selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle" @sort-change="dataListSortChangeHandle"
style="width: 100%;"> style="width: 100%;"
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> >
<el-table-column prop="name" :label="$t('role.name')" header-align="center" align="center"></el-table-column> <el-table-column
<el-table-column prop="remark" :label="$t('role.remark')" header-align="center" align="center"></el-table-column> type="selection"
<el-table-column prop="createDate" :label="$t('role.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column> header-align="center"
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> align="center"
width="50"
></el-table-column>
<el-table-column
prop="name"
:label="$t('role.name')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="remark"
:label="$t('role.remark')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="createDate"
:label="$t('role.createDate')"
sortable="custom"
header-align="center"
align="center"
width="180"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-if="$hasPermission('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> <el-button
<el-button v-if="$hasPermission('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> v-if="$hasPermission('sys:role:update')"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>{{ $t('update') }}</el-button>
<el-button
v-if="$hasPermission('sys:role:delete')"
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t('delete') }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -40,34 +99,75 @@ ...@@ -40,34 +99,75 @@
:total="total" :total="total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle" @size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"> @current-change="pageCurrentChangeHandle"
>
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div> </div>
</el-card> </el-card>
</template> </template>
<script> <script>
import mixinViewModule from '@/mixins/view-module' import { isSpecial } from "@/utils/validate";
import AddOrUpdate from './role-add-or-update' import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./role-add-or-update";
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data () { data() {
return { return {
mixinViewModuleOptions: { mixinViewModuleOptions: {
getDataListURL: '/sys/role/page', getDataListURL: "/sys/role/page",
getDataListIsPage: true, getDataListIsPage: true,
deleteURL: '/sys/role', deleteURL: "/sys/role",
deleteIsBatch: true deleteIsBatch: true,
}, },
flag: true,
dataForm: { dataForm: {
name: '' name: "",
} },
} };
},
computed: {
dataRule() {
var validateCaseName = (rule, value, callback) => {
this.flag = true;
/* this.dataForm.caseName = this.dataForm.caseName.replace(
/[^u4e00-u9fa5w]/g,
""
); */
if (value && !isSpecial(value)) {
console.log("88888");
this.flag = false;
return callback(
new Error(this.$t("validate.format", { attr: "不能带特殊字符" }))
);
} else {
console.log("99999");
}
callback();
};
return {
name: [
{ required: true, validator: validateCaseName, trigger: "blur" },
],
};
},
}, },
components: { components: {
AddOrUpdate AddOrUpdate,
} },
} methods: {
getCheck() {
if (this.flag) {
this.getDataList();
}
},
},
};
</script> </script>
src/views/modules/sys/user-add-or-update.vue
View file @ 4330a84c
<template> <template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px"> :visible.sync="visible"
<el-form-item prop="username" :label="$t('user.username')"> :title="!dataForm.id ? $t('add') : $t('update')"
<el-input v-model="dataForm.username" :placeholder="$t('user.username')"></el-input> :close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
label-width="120px"
>
<el-form-item
prop="username"
:label="$t('user.username')"
>
<el-input
v-model="dataForm.username"
:placeholder="$t('user.username')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="deptName" :label="$t('user.deptName')"> <el-form-item
<ren-dept-tree v-model="dataForm.deptId" :placeholder="$t('dept.title')" :dept-name.sync="dataForm.deptName"></ren-dept-tree> prop="deptName"
:label="$t('user.deptName')"
>
<ren-dept-tree
v-model="dataForm.deptId"
:placeholder="$t('dept.title')"
:dept-name.sync="dataForm.deptName"
></ren-dept-tree>
</el-form-item> </el-form-item>
<el-form-item prop="password" :label="$t('user.password')" :class="{ 'is-required': !dataForm.id }"> <el-form-item
<el-input v-model="dataForm.password" type="password" :placeholder="$t('user.password')"></el-input> prop="password"
:label="$t('user.password')"
:class="{ 'is-required': !dataForm.id }"
>
<el-input
v-model="dataForm.password"
type="password"
:placeholder="$t('user.password')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="confirmPassword" :label="$t('user.confirmPassword')" :class="{ 'is-required': !dataForm.id }"> <el-form-item
<el-input v-model="dataForm.confirmPassword" type="password" :placeholder="$t('user.confirmPassword')"></el-input> prop="confirmPassword"
:label="$t('user.confirmPassword')"
:class="{ 'is-required': !dataForm.id }"
>
<el-input
v-model="dataForm.confirmPassword"
type="password"
:placeholder="$t('user.confirmPassword')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="realName" :label="$t('user.realName')"> <el-form-item
<el-input v-model="dataForm.realName" :placeholder="$t('user.realName')"></el-input> prop="realName"
:label="$t('user.realName')"
>
<el-input
v-model="dataForm.realName"
:placeholder="$t('user.realName')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="gender" :label="$t('user.gender')"> <el-form-item
<ren-radio-group v-model="dataForm.gender" dict-type="gender"></ren-radio-group> prop="gender"
</el-form-item> :label="$t('user.gender')"
<el-form-item prop="email" :label="$t('user.email')"> >
<el-input v-model="dataForm.email" :placeholder="$t('user.email')"></el-input> <!-- <ren-radio-group
v-model="dataForm.gender"
dict-type="gender"
></ren-radio-group> -->
<el-radio-group v-model="dataForm.gender">
<el-radio :label="0">男</el-radio>
<el-radio :label="1">女</el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item prop="mobile" :label="$t('user.mobile')">
<el-input v-model="dataForm.mobile" :placeholder="$t('user.mobile')"></el-input> <el-form-item
prop="mobile"
:label="$t('user.mobile')"
>
<el-input
v-model="dataForm.mobile"
:placeholder="$t('user.mobile')"
></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="roleIdList" :label="$t('user.roleIdList')" class="role-list"> <el-form-item
<el-select v-model="dataForm.roleIdList" multiple :placeholder="$t('user.roleIdList')"> prop="roleIdList"
<el-option v-for="role in roleList" :key="role.id" :label="role.name" :value="role.id"></el-option> :label="$t('user.roleIdList')"
class="role-list"
>
<el-select
v-model="dataForm.roleIdList"
multiple
:placeholder="$t('user.roleIdList')"
>
<el-option
v-for="role in roleList"
:key="role.id"
:label="role.name"
:value="role.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="status" :label="$t('user.status')" size="mini"> <el-form-item
prop="undertakerNum"
label="承办人代码"
>
<el-input
v-model="dataForm.undertakerNum"
placeholder="承办人代码"
></el-input>
</el-form-item>
<el-form-item
prop="status"
:label="$t('user.status')"
size="mini"
>
<el-radio-group v-model="dataForm.status"> <el-radio-group v-model="dataForm.status">
<el-radio :label="0">{{ $t('user.status0') }}</el-radio> <el-radio :label="0">{{ $t('user.status0') }}</el-radio>
<el-radio :label="1">{{ $t('user.status1') }}</el-radio> <el-radio :label="1">{{ $t('user.status1') }}</el-radio>
...@@ -39,166 +125,216 @@ ...@@ -39,166 +125,216 @@
</el-form> </el-form>
<template slot="footer"> <template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> <el-button
type="primary"
@click="dataFormSubmitHandle()"
>{{ $t('confirm') }}</el-button>
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import debounce from 'lodash/debounce' import debounce from "lodash/debounce";
import { isEmail, isMobile } from '@/utils/validate' import { isEmail, isMobile } from "@/utils/validate";
export default { export default {
data () { data() {
return { return {
visible: false, visible: false,
roleList: [], roleList: [],
roleIdListDefault: [], roleIdListDefault: [],
dataForm: { dataForm: {
id: '', id: "",
username: '', username: "",
deptId: '', deptId: "",
deptName: '', deptName: "",
password: '', password: "",
confirmPassword: '', confirmPassword: "",
realName: '', realName: "",
gender: 0, gender: 0,
email: '', email: "",
mobile: '', mobile: "",
roleIdList: [], roleIdList: [],
status: 1 status: 1,
} undertakerNum: "",
} },
};
}, },
computed: { computed: {
dataRule () { dataRule() {
var validatePassword = (rule, value, callback) => { /* var validatePassword = (rule, value, callback) => {
if (!this.dataForm.id && !/\S/.test(value)) { if (!this.dataForm.id && !/\S/.test(value)) {
return callback(new Error(this.$t('validate.required'))) return callback(new Error(this.$t("validate.required")));
}
callback();
}; */
var validatePassword = (rule, value, callback) => {
const reg =
/(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[\W])(?=.*[\S])^[0-9A-Za-z\S]{8,18}$/g;
if (!reg.test(value)) {
callback(new Error("密码应该为8-18位大小字母、数字、特殊字符组合"));
} else {
callback();
} }
callback() };
}
var validateConfirmPassword = (rule, value, callback) => { var validateConfirmPassword = (rule, value, callback) => {
if (!this.dataForm.id && !/\S/.test(value)) { if (!this.dataForm.id && !/\S/.test(value)) {
return callback(new Error(this.$t('validate.required'))) return callback(new Error(this.$t("validate.required")));
} }
if (this.dataForm.password !== value) { if (this.dataForm.password !== value) {
return callback(new Error(this.$t('user.validate.confirmPassword'))) return callback(new Error(this.$t("user.validate.confirmPassword")));
} }
callback() callback();
} };
var validateEmail = (rule, value, callback) => { var validateEmail = (rule, value, callback) => {
if (value && !isEmail(value)) { if (value && !isEmail(value)) {
return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.email') }))) return callback(
new Error(
this.$t("validate.format", { attr: this.$t("user.email") })
)
);
} }
callback() callback();
} };
var validateMobile = (rule, value, callback) => { var validateMobile = (rule, value, callback) => {
if (value && !isMobile(value)) { if (value && !isMobile(value)) {
return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.mobile') }))) return callback(
new Error(
this.$t("validate.format", { attr: this.$t("user.mobile") })
)
);
} }
callback() callback();
} };
return { return {
username: [ username: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
], ],
deptName: [ deptName: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' } {
], required: true,
password: [ message: this.$t("validate.required"),
{ validator: validatePassword, trigger: 'blur' } trigger: "change",
},
], ],
password: [{ validator: validatePassword, trigger: "blur" }],
confirmPassword: [ confirmPassword: [
{ validator: validateConfirmPassword, trigger: 'blur' } { validator: validateConfirmPassword, trigger: "blur" },
], ],
realName: [ realName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } {
], required: true,
email: [ message: this.$t("validate.required"),
{ validator: validateEmail, trigger: 'blur' } trigger: "blur",
},
], ],
email: [{ validator: validateEmail, trigger: "blur" }],
mobile: [ mobile: [
{ validator: validateMobile, trigger: 'blur' } { required: true, validator: validateMobile, trigger: "blur" },
] ],
} roleIdList: [
} {
required: true,
message: this.$t("validate.required"),
trigger: "change",
},
],
};
},
}, },
methods: { methods: {
init () { init() {
this.visible = true this.visible = true;
this.dataForm.deptId = '' this.dataForm.deptId = "";
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['dataForm'].resetFields() this.$refs["dataForm"].resetFields();
this.roleIdListDefault = [] this.roleIdListDefault = [];
Promise.all([ Promise.all([this.getRoleList()]).then(() => {
this.getRoleList()
]).then(() => {
if (this.dataForm.id) { if (this.dataForm.id) {
this.getInfo() this.getInfo();
} }
}) });
}) });
}, },
// 获取角色列表 // 获取角色列表
getRoleList () { getRoleList() {
return this.$http.get('/sys/role/list').then(({ data: res }) => { return this.$http
if (res.code !== 0) { .get("/sys/role/list")
return this.$message.error(res.msg) .then(({ data: res }) => {
} if (res.code !== 0) {
this.roleList = res.data return this.$message.error(res.msg);
}).catch(() => {}) }
this.roleList = res.data;
})
.catch(() => {});
}, },
// 获取信息 // 获取信息
getInfo () { getInfo() {
this.$http.get(`/sys/user/${this.dataForm.id}`).then(({ data: res }) => { this.$http
if (res.code !== 0) { .get(`/sys/user/${this.dataForm.id}`)
return this.$message.error(res.msg) .then(({ data: res }) => {
} if (res.code !== 0) {
this.dataForm = { return this.$message.error(res.msg);
...this.dataForm,
...res.data,
roleIdList: []
}
// 角色配置, 区分是否为默认角色
for (var i = 0; i < res.data.roleIdList.length; i++) {
if (this.roleList.filter(item => item.id === res.data.roleIdList[i])[0]) {
this.dataForm.roleIdList.push(res.data.roleIdList[i])
continue
} }
this.roleIdListDefault.push(res.data.roleIdList[i]) this.dataForm = {
} ...this.dataForm,
}).catch(() => {}) ...res.data,
roleIdList: [],
};
// 角色配置, 区分是否为默认角色
for (var i = 0; i < res.data.roleIdList.length; i++) {
if (
this.roleList.filter(
(item) => item.id === res.data.roleIdList[i]
)[0]
) {
this.dataForm.roleIdList.push(res.data.roleIdList[i]);
continue;
}
this.roleIdListDefault.push(res.data.roleIdList[i]);
}
})
.catch(() => {});
}, },
// 表单提交 // 表单提交
dataFormSubmitHandle: debounce(function () { dataFormSubmitHandle: debounce(
this.$refs['dataForm'].validate((valid) => { function () {
if (!valid) { this.$refs["dataForm"].validate((valid) => {
return false if (!valid) {
} return false;
this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
...this.dataForm,
roleIdList: [
...this.dataForm.roleIdList,
...this.roleIdListDefault
]
}).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
} }
this.$message({ this.$http[!this.dataForm.id ? "post" : "put"]("/sys/user", {
message: this.$t('prompt.success'), ...this.dataForm,
type: 'success', roleIdList: [
duration: 500, ...this.dataForm.roleIdList,
onClose: () => { ...this.roleIdListDefault,
this.visible = false ],
this.$emit('refreshDataList')
}
}) })
}).catch(() => {}) .then(({ data: res }) => {
}) if (res.code !== 0) {
}, 1000, { 'leading': true, 'trailing': false }) return this.$message.error(res.msg);
} }
} this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
......
src/views/modules/sys/user.vue
View file @ 4330a84c
<template> <template>
<el-card shadow="never" class="aui-card--fill"> <el-card
shadow="never"
class="aui-card--fill"
>
<div class="mod-sys__user"> <div class="mod-sys__user">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form
<el-form-item> :inline="true"
<el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input> :model="dataForm"
:rules="dataRule"
@keyup.enter.native="getCheck()"
>
<el-form-item prop="username">
<el-input
v-model="dataForm.username"
:placeholder="$t('user.username')"
clearable
></el-input>
</el-form-item> </el-form-item>
<el-form-item> <!-- <el-form-item>
<ren-select v-model="dataForm.gender" dict-type="gender" :placeholder="$t('user.gender')"></ren-select> <ren-select v-model="dataForm.gender" dict-type="gender" :placeholder="$t('user.gender')"></ren-select>
</el-form-item> </el-form-item> -->
<el-form-item> <el-form-item>
<ren-dept-tree v-model="dataForm.deptId" :placeholder="$t('dept.title')" :query="true"></ren-dept-tree> <ren-dept-tree
v-model="dataForm.deptId"
:placeholder="$t('dept.title')"
:query="true"
></ren-dept-tree>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button> <el-button @click="getCheck()">{{ $t('query') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button v-if="$hasPermission('sys:user:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> <el-button
v-if="$hasPermission('sys:user:save')"
type="primary"
@click="addOrUpdateHandle()"
>{{ $t('add') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button v-if="$hasPermission('sys:user:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> <el-button
v-if="$hasPermission('sys:user:delete')"
type="danger"
@click="deleteHandle()"
>{{ $t('deleteBatch') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button v-if="$hasPermission('sys:user:export')" type="info" @click="exportHandle()">{{ $t('export') }}</el-button> <el-button
v-if="$hasPermission('sys:user:export')"
type="info"
@click="exportHandle()"
>{{ $t('export') }}</el-button>
</el-form-item> </el-form-item>
<!-- <el-form-item>
<el-upload
class="upload-demo"
ref="upload"
action=""
:http-request="afterRead"
accept=".pdf,.doc,.docx,.xls,.xlsx"
:file-list="datalist"
>
<el-button type="warning">导入</el-button>
</el-upload>
</el-form-item> -->
<!-- <el-form-item>
<a href="">点击此处下载导入模板</a>
</el-form-item> -->
</el-form> </el-form>
<el-table <el-table
v-loading="dataListLoading" v-loading="dataListLoading"
...@@ -30,28 +74,120 @@ ...@@ -30,28 +74,120 @@
border border
@selection-change="dataListSelectionChangeHandle" @selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle" @sort-change="dataListSortChangeHandle"
style="width: 100%;"> style="width: 100%;"
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> >
<el-table-column prop="username" :label="$t('user.username')" sortable="custom" header-align="center" align="center"></el-table-column> <el-table-column
<el-table-column prop="deptName" :label="$t('user.deptName')" header-align="center" align="center"></el-table-column> type="selection"
<el-table-column prop="email" :label="$t('user.email')" header-align="center" align="center"></el-table-column> header-align="center"
<el-table-column prop="mobile" :label="$t('user.mobile')" sortable="custom" header-align="center" align="center"></el-table-column> align="center"
<el-table-column prop="gender" :label="$t('user.gender')" sortable="custom" header-align="center" align="center"> width="50"
></el-table-column>
<el-table-column
prop="deptName"
:label="$t('user.deptName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="username"
:label="$t('user.username')"
sortable="custom"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="realName"
:label="$t('user.realName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="undertakerNum"
label="承办人代码"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="mobile"
:label="$t('user.mobile')"
sortable="custom"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column
prop="sort"
:label="$t('user.sort')"
sortable="custom"
header-align="center"
align="center"
></el-table-column> -->
<!-- <el-table-column
prop="email"
:label="$t('user.email')"
header-align="center"
align="center"
></el-table-column> -->
<el-table-column
prop="gender"
:label="$t('user.gender')"
sortable="custom"
header-align="center"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ $getDictLabel("gender", scope.row.gender) }} <!-- {{ $getDictLabel("gender", scope.row.gender) }} -->
<span>{{genderText(scope.row.gender)}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="status" :label="$t('user.status')" sortable="custom" header-align="center" align="center"> <el-table-column
prop="status"
:label="$t('user.status')"
sortable="custom"
header-align="center"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('user.status0') }}</el-tag> <el-tag
<el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag> v-if="scope.row.status === 0"
size="small"
type="danger"
>{{ $t('user.status0') }}</el-tag>
<el-tag
v-else
size="small"
type="success"
>{{ $t('user.status1') }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="createDate" :label="$t('user.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column> <el-table-column
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> prop="createDate"
:label="$t('user.createDate')"
sortable="custom"
header-align="center"
align="center"
width="180"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-if="$hasPermission('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> <el-button
<el-button v-if="$hasPermission('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> v-if="$hasPermission('sys:user:update')"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>{{ $t('update') }}</el-button>
<el-button
v-if="$hasPermission('sys:user:delete')"
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t('delete') }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -62,37 +198,119 @@ ...@@ -62,37 +198,119 @@
:total="total" :total="total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle" @size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"> @current-change="pageCurrentChangeHandle"
>
</el-pagination> </el-pagination>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> <add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div> </div>
</el-card> </el-card>
</template> </template>
<script> <script>
import mixinViewModule from '@/mixins/view-module' import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from './user-add-or-update' import AddOrUpdate from "./user-add-or-update";
import { isSpecial2 } from "@/utils/validate";
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data () { data() {
return { return {
mixinViewModuleOptions: { mixinViewModuleOptions: {
getDataListURL: '/sys/user/page', getDataListURL: "/sys/user/page",
getDataListIsPage: true, getDataListIsPage: true,
deleteURL: '/sys/user', deleteURL: "/sys/user",
deleteIsBatch: true, deleteIsBatch: true,
exportURL: '/sys/user/export' exportURL: "/sys/user/export",
}, },
datalist: [],
flag: true,
dataForm: { dataForm: {
username: '', username: "",
deptId: '', deptId: "",
gender: '' gender: "",
} },
} };
},
computed: {
dataRule() {
var validateCaseName = (rule, value, callback) => {
this.flag = true;
/* this.dataForm.caseName = this.dataForm.caseName.replace(
/[^u4e00-u9fa5w]/g,
""
); */
if (value && !isSpecial2(value)) {
console.log("88888");
this.flag = false;
return callback(
new Error(
this.$t("validate.format", {
attr: "不能带特殊字符，且长度不能超过10",
})
)
);
} else {
console.log("99999");
}
callback();
};
return {
username: [
{ required: true, validator: validateCaseName, trigger: "blur" },
],
};
},
}, },
components: { components: {
AddOrUpdate AddOrUpdate,
} },
} methods: {
getCheck() {
if (this.flag) {
this.getDataList();
}
},
genderText(gender) {
return ["男", "女"][gender];
},
//上传附件
afterRead(file) {
let data = new FormData();
data.append("file", file.file);
console.log(file);
const loading = this.$loading({
lock: true,
text: "Loading",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
setTimeout(() => {
loading.close();
}, 2000);
// console.log("file", data);
/* getfileUploader(data).then((res) => {
if (res.data.code == 0) {
this.datalist.push({
docId: res.data.data.docId,
name: res.data.data.fileName,
filePath: res.data.data.url,
createDate: currentDate,
});
// console.log("上传完的dataform", this.dataForm);
}
this.dataForm.woWorkorderDocumentDTOList = this.datalist;
}); */
},
},
};
</script> </script>
<style lang="less" scoped>
/deep/.el-upload-list {
display: none;
}
</style>
src/views/pages/login.vue
View file @ 4330a84c
...@@ -2,12 +2,23 @@ ...@@ -2,12 +2,23 @@
<div class="aui-wrapper aui-page__login"> <div class="aui-wrapper aui-page__login">
<div class="aui-content__wrapper"> <div class="aui-content__wrapper">
<main class="aui-content"> <main class="aui-content">
<div class="login-header"> <div
<!-- <h2 class="login-brand">{{ $t('brand.lg') }}</h2> --> class="login-header"
style="display:flex"
>
<img <img
src="../../assets/img/logo.png" src="../../assets/img/logo_icon.png"
alt="" alt=""
style="margin-right:10px;width:42px;height:47px; vertical-align: middle;"
> >
<h2
style="font-size:32px;line-height:50px;font-weight:700"
class="login-brand title-head"
>{{ $t('brand.lg') }}</h2>
<!-- <img
src="../../assets/img/logo.png"
alt=""
> -->
</div> </div>
<div class="login-body"> <div class="login-body">
<h3 class="login-title">{{ $t('login.title') }}</h3> <h3 class="login-title">{{ $t('login.title') }}</h3>
...@@ -177,6 +188,9 @@ export default { ...@@ -177,6 +188,9 @@ export default {
if (!valid) { if (!valid) {
return false; return false;
} }
let Base64 = require("js-base64").Base64;
// this.dataForm.password = this.$md5(this.dataForm.password);
this.dataForm.password = Base64.encode(this.dataForm.password);
this.$http this.$http
.post("/login", this.dataForm) .post("/login", this.dataForm)
.then(({ data: res }) => { .then(({ data: res }) => {
...@@ -196,3 +210,8 @@ export default { ...@@ -196,3 +210,8 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.title-head {
vertical-align: middle;
}
</style>
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