ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updat anji-curd

Browse Source
qianlishi 3 years ago
parent 9b2b162d40
commit 4a6cd7a282
39 changed files with 6021 additions and 1206 deletions
Show Stats Download Patch File Download Diff File

139
report-ui/src/components/AnjiPlus/anji-autocomplete.vue
Unescape Escape View File

@ -0,0 +1,139 @@
<template>
<el-autocomplete
v-model.trim="inputValue"
:debounce="500"
class="inline-input"
:fetch-suggestions="querySearch"
:disabled="disabled"
@select="handleSelect"
@input="changeInput"
>
<template slot-scope="{ item }">
<div class="name">{{ getItemLabel(item, item.value) }}</div>
<span class="addr">{{ item[option] }}</span>
</template>
</el-autocomplete>
</template>
<script>
import request from "@/utils/request";
export default {
props: {
disabled: {
type: Boolean,
default: () => {
return false;
}
},
value: {
type: String,
default: () => {
return "";
}
},
url: {
type: String,
default: () => {
return "";
}
},
appointValue: {
type: String,
default: () => {
return "";
}
},
label: {
type: String,
default: () => {
return "";
}
},
option: {
type: String,
default: () => {
return "";
}
}
},
data() {
return {
restaurants: [],
inputValue: ""
};
},
watch: {
value(val) {
this.echoInput(val);
}
},
mounted() {
this.echoInput(this.value);
},
methods: {
getItemLabel(item, value) {
if (this.label.indexOf("${") < 0 && this.label.indexOf("}" < 0)) {
return item[this.label];
}
let reg = /\$\{[a-zA-Z0-9]*\}/g;
let list = this.label.match(reg);
console.log(list);
// ["${id}", "${text}"]
let result = this.label;
for (let i = 0; i < list.length; i++) {
let sub = list[i];
let key = sub.replace("${", "").replace("}", "");
result = result.replace(sub, item[key]);
}
return value + " " + result;
},
querySearch(queryString, cb) {
request({ url: this.url }).then(res => {
if (res.code == 200 && res.data) {
this.restaurants = res.data;
} else {
this.restaurants = [];
}
this.restaurants = JSON.parse(
JSON.stringify(this.restaurants).replace(
new RegExp(this.appointValue, "g"),
"value"
)
);
let results = queryString
? this.restaurants.filter(this.createFilter(queryString))
: this.restaurants;
cb(results);
});
},
createFilter(queryString) {
return restaurant => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
},
handleSelect(item) {
this.$emit("input", item.value);
this.$emit("change", item.value, item);
},
changeInput(val) {
this.$emit("input", val);
this.$emit("change", val);
},
// 回显
echoInput(value) {
if (!value) {
this.inputValue = "";
} else {
this.inputValue = value;
}
}
}
};
</script>
<style lang="less" scoped>
.inline-input {
width: 100%;
}
</style>

314
report-ui/src/components/AnjiPlus/anji-cascader.vue
Unescape Escape View File

@ -0,0 +1,314 @@
<template>
<div>
<el-row>
<el-col v-if="selectIsHide('country')" :span="4">
<el-select
v-model.trim="countryCode"
filterable
:placeholder="$lang('GLOBAL.countryName')"
:disabled="disabled"
clearable
@change="countryChange"
>
<el-option
v-for="(option, i) in countryArr"
:key="i"
:value="option.value"
:label="option.label"
/>
</el-select>
</el-col>
<el-col v-if="selectIsHide('province')" :span="7">
<el-select
v-model.trim="provinceCode"
filterable
:placeholder="$lang('GLOBAL.provinceName')"
:disabled="disabled"
clearable
@change="provinceChange"
>
<el-option
v-for="(option, i) in casCaredArr"
:key="i"
:value="option.value"
:label="option.label"
/>
</el-select>
</el-col>
<el-col v-if="selectIsHide('city')" :span="7">
<el-select
v-model.trim="cityCode"
filterable
:placeholder="$lang('GLOBAL.cityName')"
:disabled="disabled"
clearable
@change="cityChange"
>
<el-option
v-for="(option, x) in cityArr"
:key="x"
:value="option.value"
:label="option.label"
/>
</el-select>
</el-col>
<el-col v-if="selectIsHide('area')" :span="6">
<el-select
v-model.trim="areaCode"
filterable
:placeholder="$lang('GLOBAL.districtName')"
:disabled="disabled"
clearable
@change="districtChange"
>
<el-option
v-for="(option, y) in districtArr"
:key="y"
:value="option.value"
:label="option.label"
/>
</el-select>
</el-col>
</el-row>
</div>
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import Cookies from "js-cookie";
export default {
name: "Cselect",
props: {
url: {
type: String,
default: () => "/meta/metaAreaInfo/countryTree"
},
value: null,
singleDisplay: String,
disabled: Boolean
},
data() {
return {
countryArr: [],
casCaredArr: [],
cityArr: [],
districtArr: [],
countryCode: "", // 国code
provinceCode: "", // 省code
cityCode: "", // 州市code
areaCode: "", // 区县code
countryName: "",
provinceName: "",
cityName: "",
areaName: ""
};
},
watch: {
value(value) {
this.echoSelect(value);
this.initData();
}
},
mounted() {
this.initData();
this.echoSelect(this.value);
},
methods: {
// singleDisplay 不配显示 country province city area 配那个那个不显示
selectIsHide(val) {
if (this.singleDisplay === undefined) {
return true;
} else {
return !(this.singleDisplay.indexOf(val) >= 0);
}
},
// 查询数据
initData() {
this.queryData();
},
queryData() {
axios({
url: process.env.VUE_APP_BASE_API + this.url,
methods: "get",
headers: {
Authorization: getToken(),
systemCode: process.env.VUE_APP_SYSTEM_CODE
}
}).then(res => {
const data = res.data;
if (data.code != 200 || data.data.length == 0) return;
this.countryArr = data.data;
!this.selectIsHide("country") &&
(this.casCaredArr = data.data[0].children);
this.updateCountry();
this.updateCity();
this.updateDistrict();
});
},
updateCountry() {
for (let i in this.countryArr) {
let obj = this.countryArr[i];
if (obj.value == this.countryCode) {
this.casCaredArr = obj.children;
break;
}
}
},
updateCity() {
for (let i in this.casCaredArr) {
let obj = this.casCaredArr[i];
if (obj.value) {
if (obj.value == this.provinceCode) {
this.cityArr = obj.children;
break;
}
}
}
},
updateDistrict() {
for (let i in this.cityArr) {
let obj = this.cityArr[i];
if (obj.value == this.cityCode) {
this.districtArr = obj.children;
break;
}
}
},
// 国
countryChange(val) {
if (val) {
this.updateCountry();
this.provinceCode = "";
this.cityCode = "";
this.areaCode = "";
const casCared = this.countryArr.find((n, index) => {
if (n.value == val) {
return n;
}
});
this.countryName = casCared.label;
const obj = {
countryName: this.countryName,
countryCode: this.countryCode,
provinceCode: this.provinceCode,
cityCode: this.cityCode,
areaCode: this.areaCode,
provinceName: this.provinceName,
cityName: this.cityName,
areaName: this.areaName
};
this.$emit("input", obj);
this.$emit("change", obj);
} else {
this.$emit("input", {});
this.$emit("change", {});
}
},
// 省
provinceChange(val) {
if (val) {
this.updateCity();
this.cityCode = "";
this.areaCode = "";
const casCared = this.casCaredArr.find((n, index) => {
if (n.value == val) {
return n;
}
});
this.provinceName = casCared.label;
const obj = {
countryName: this.countryName,
countryCode: this.countryCode,
provinceCode: this.provinceCode,
cityCode: this.cityCode,
areaCode: this.areaCode,
provinceName: this.provinceName,
cityName: this.cityName,
areaName: this.areaName
};
this.$emit("input", obj);
this.$emit("change", obj);
} else {
this.$emit("input", {});
this.$emit("change", {});
}
},
// 市
cityChange(val) {
if (val) {
this.areaCode = "";
this.updateDistrict();
const city = this.cityArr.find((n, index) => {
if (n.value == val) {
return n;
}
});
this.cityName = city.label;
const obj = {
countryName: this.countryName,
countryCode: this.countryCode,
provinceCode: this.provinceCode,
cityCode: this.cityCode,
areaCode: this.areaCode,
provinceName: this.provinceName,
cityName: this.cityName,
areaName: this.areaName
};
this.$emit("input", obj);
this.$emit("change", obj);
} else {
this.$emit("input", {});
this.$emit("change", {});
}
},
// 区
districtChange(val) {
if (val) {
const district = this.districtArr.find((n, index) => {
if (n.value == val) {
return n;
}
});
this.areaName = district.label;
const obj = {
countryName: this.countryName,
countryCode: this.countryCode,
provinceCode: this.provinceCode,
cityCode: this.cityCode,
areaCode: this.areaCode,
provinceName: this.provinceName,
cityName: this.cityName,
areaName: this.areaName
};
this.$emit("input", obj);
this.$emit("change", obj);
} else {
this.$emit("input", {});
this.$emit("change", {});
}
},
echoSelect(value) {
if (!value) {
this.countryCode = "";
this.provinceCode = "";
this.cityCode = "";
this.areaCode = "";
this.countryName = "";
this.provinceName = "";
this.cityName = "";
this.areaName = "";
} else {
this.countryName = this.value.countryName;
this.countryCode = this.value.countryCode;
this.provinceCode = this.value.provinceCode;
this.cityCode = this.value.cityCode;
this.areaCode = this.value.areaCode || this.value.regionCode;
this.provinceName = this.value.provinceName;
this.cityName = this.value.cityName;
this.areaName = this.value.areaName || this.value.regionName;
}
}
}
};
</script>

127
report-ui/src/components/AnjiPlus/anji-checkbox.vue
Unescape Escape View File

@ -0,0 +1,127 @@
<template>
<el-checkbox-group v-model="selectValue" class="filter-item" @change="change">
<el-checkbox
v-for="item in options"
:key="item.id"
:label="item.id"
:disabled="disabled"
>{{ item.text }}</el-checkbox
>
</el-checkbox-group>
</template>
<script>
import request from "@/utils/request";
import { valueOf } from "screenfull";
export default {
props: {
dictCode: null, // 当传入dictCode时，可以不用传递url
url: null,
value: null,
placeholder: null,
label: {
type: String,
default: "text"
},
option: {
type: String,
default: "id"
},
multiple: null,
localOptions: null,
disabled: null,
clearable: {
type: Boolean,
default: true
},
collapseTags: {
type: Boolean,
default: false
}
},
data() {
return {
options: null,
selectValue: []
};
},
computed: {
// 根据dictCode和url拼出最终的请求url
requestUrl() {
if (this.url != null && this.url.trim() != "") {
return this.url;
}
if (this.dictCode != null && this.dictCode.trim() != "") {
return `/tms/gaeaDict/select/${this.dictCode}`;
}
return null;
}
},
watch: {
value: function(val, oldVal) {
this.echoCheckboxValue(val);
}
},
mounted() {
this.echoCheckboxValue(this.value);
if (this.requestUrl == null) {
this.options = this.localOptions;
return;
}
this.queryData();
},
methods: {
change(value) {
const strValue = value.join(",");
if (value === "") {
value = null;
}
this.$emit("input", strValue);
this.$emit("change", strValue, this.options);
},
// 从本地localStorage取 gaeaDict
getOptionsFromLocalStorage() {
let dicts = JSON.parse(localStorage.getItem("gaeaDict"));
let options = [];
if (!dicts.hasOwnProperty(this.dictCode)) {
return [];
}
let dictItems = dicts[this.dictCode];
for (let i = 0; i < dictItems.length; i++) {
let dictItem = dictItems[i];
options.push({ id: dictItem.id.toString(), text: dictItem.text });
}
return options;
},
queryData() {
// 所有从本地localStorage取，因为在App.vue中已经请求远程保存到本地了
let options = this.getOptionsFromLocalStorage();
if (this.isNotBlank(options)) {
this.options = options;
return;
}
// 本地localStorage取不到，再从远程接口取
if (this.requestUrl == null) {
return;
}
request({
url: this.requestUrl,
params: {
multiple: this.multiple == null ? null : 1
}
}).then(response => {
this.options = response.data;
});
},
// 回显
echoCheckboxValue(val) {
if (!val) {
this.selectValue = [];
} else {
const arr = val.split(",");
this.selectValue = arr;
}
}
}
};
</script>

50
report-ui/src/components/AnjiPlus/anji-contextMenu.vue
Unescape Escape View File

@ -0,0 +1,50 @@
<!--
* @Descripttion: 右键菜单
* @version:
* @Author: qianlishi
* @Date: 2021-10-21 15:52:03
* @LastEditors: qianlishi
* @LastEditTime: 2021-10-21 19:40:05
-->
<template>
<div v-show="visible" class="contentmenu" :style="styleObj">
<slot />
</div>
</template>
<script>
export default {
props: {
styleObj: Object,
visible: Boolean,
},
data() {
return {}
},
watch: {
visible(value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
},
},
methods: {
closeMenu() {
this.$emit('update:visible', false)
},
},
}
</script>
<style lang="scss" scoped>
.contentmenu {
position: fixed;
z-index: 99999;
list-style: none;
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
padding: 0;
background: #fff;
cursor: pointer;
}
</style>

97
report-ui/src/components/AnjiPlus/anji-countryCity.vue
Unescape Escape View File

@ -0,0 +1,97 @@
<template>
<el-cascader v-model="selectValue" style="width: 100%" :props="{ lazy: true, lazyLoad: lazyLoad, label: 'text', value: 'id' }" :options="countryCity" />
</template>
<script>
import { mapGetters } from 'vuex'
export default {
props: {
value: null,
},
computed: {
...mapGetters(['countryCity']),
selectValue: {
get: function() {
return [...this.value]
},
set: function(val) {
this.$emit('update:value', val)
},
},
},
mounted() {
if (this.value && this.value.length > 0) {
this.initCity()
} else {
this.$store.dispatch('dict/add_countryCity', { level: 0 })
}
},
methods: {
getCityName() {
const value = this.selectValue
const country = this.countryCity.find((item) => item.id === value[0])
const province = country.children.find((item) => item.id === value[1])
const city = province.children.find((item) => item.id === value[2])
const region = city.children.find((item) => item.id === value[3])
return [country.text, province.text, city.text, region.text]
},
// 初始化数据
initCity() {
const value = this.value
// console.log(value)
if (!value) {
return
}
const country = this.countryCity.find((item) => item.id === value[0])
console.log(country)
if (!country || !country.children) {
this.getData().then((list) => {
this.getData({ country: value[0], level: 1 }).then((list) => {
this.getData({ country: value[0], province: value[1], level: 2 }).then((list) => {
this.getData({ country: value[0], province: value[1], city: value[2], level: 3, update: true }).then((list) => {})
})
})
})
} else {
const province = country.children.find((item) => item.id === value[1])
if (!province || !province.children) {
this.getData({ country: value[0], level: 1 }).then((list) => {
this.getData({ country: value[0], province: value[1], level: 2 }).then((list) => {
this.getData({ country: value[0], province: value[1], city: value[2], level: 3, update: true }).then((list) => {})
})
})
} else {
const city = province.children.find((item) => item.id === value[2])
if (!city || !city.children) {
this.getData({ country: value[0], province: value[1], level: 2 }).then((list) => {
this.getData({ country: value[0], province: value[1], city: value[2], level: 3, update: true }).then((list) => {})
})
} else {
const region = city.children.find((item) => item.id === value[3])
if (!region) {
this.getData({ country: value[0], province: value[1], city: value[2], level: 3, update: true }).then((list) => {})
}
}
}
}
},
getData(params) {
return this.$store.dispatch('dict/add_countryCity', params)
},
lazyLoad(node, resolve) {
console.log(node)
const { level, path, data } = node
if (data && data.children) {
resolve(data.children)
} else {
if (level === 0) {
return
}
const params = { country: path[0], province: path[1], city: path[2], level }
this.$store.dispatch('dict/add_countryCity', params).then((list) => resolve(list))
}
},
},
}
</script>

1011
report-ui/src/components/AnjiPlus/anji-crud/anji-crud.vue
View File

File diff suppressed because it is too large Load Diff

439
report-ui/src/components/AnjiPlus/anji-crud/edit-form.vue
Unescape Escape View File

@ -1,11 +1,8 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-5-4 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-5-6 11:04:24
!-->
<template> <template>
<div v-if="option['hide'] == null || option['hide'] == false" class="anji-card"> <div
v-if="option['hide'] == null || option['hide'] == false"
class="anji-card"
>
<div class="card-head"> <div class="card-head">
{{ option.title }} {{ option.title }}
<div class="main-card-header-button"> <div class="main-card-header-button">
@ -15,30 +12,97 @@
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<el-form ref="editForm" :model="editForm" :label-width="option.labelWidth || '100px'"> <el-form
ref="editForm"
:model="editForm"
:label-width="option.labelWidth || '100px'"
>
<!--:disabled="modelType == 'view'"--> <!--:disabled="modelType == 'view'"-->
<template v-for="group in columnGroups"> <template v-for="group in columnGroups">
<el-divider v-if="groupModel" :key="group" content-position="left">{{ group }}</el-divider> <el-divider v-if="groupModel" :key="group" content-position="left">{{
group
}}</el-divider>
<el-row :key="group" class="form_table"> <el-row :key="group" class="form_table">
<template v-for="item in groupFormFields[group]"> <template v-for="item in groupFormFields[group]">
<el-col v-if="fieldIsHide(item.editHide) == false" :key="item.editField" :span="item.rowColSpan == null ? cardRowColSpan : item.rowColSpan"> <el-col
<el-form-item :label="item.label" :rules="item.rules" :prop="item.editField" :disabled="item.disabled"> v-if="fieldIsHide(item.editHide) == false"
:key="item.editField"
:span="
item.rowColSpan == null ? cardRowColSpan : item.rowColSpan
"
>
<el-form-item
:label="item.label"
:rules="item.rules"
:prop="item.editField"
:disabled="item.disabled"
>
<!-- 输入框 --> <!-- 输入框 -->
<span v-if="item.tips != '' && item.tips != null" :style="{ 'margin-left': '-13px' }" class="input_tips"> <span
<el-tooltip class="item" effect="dark" :content="item.tips" placement="top-start"> v-if="item.tips != '' && item.tips != null"
:style="{ 'margin-left': '-13px' }"
class="input_tips"
>
<el-tooltip
class="item"
effect="dark"
:content="item.tips"
placement="top-start"
>
<svg-icon icon-class="tishi-yiwen" /> <svg-icon icon-class="tishi-yiwen" />
</el-tooltip> </el-tooltip>
</span> </span>
<el-input v-if="item.inputType == 'input'" v-model.trim="editForm[item.editField]" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="fieldIsDisable(item.disabled)" @change="(value) => formChange(item.editField, value, null)" /> <el-input
v-if="item.inputType == 'input'"
v-model.trim="editForm[item.editField]"
:placeholder="
item.placeholder || $lang('placeholder_input')
"
:clearable="item.clearable !== false"
:disabled="fieldIsDisable(item.disabled)"
@change="value => formChange(item.editField, value, null)"
/>
<!-- 开关 --> <!-- 开关 -->
<el-switch v-else-if="item.inputType == 'switch'" v-model.trim="editForm[item.editField]" :disabled="fieldIsDisable(item.disabled)" :active-value="1" :inactive-value="0" inactive-color="#ccc" active-color="#5887fb" @change="(value) => formChange(item.editField, value, null)" /> <el-switch
<el-input-number v-else-if="item.inputType == 'input-number'" v-model.trim="editForm[item.editField]" :min="item.inputNumberOption.min" :max="item.inputNumberOption.max" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="fieldIsDisable(item.disabled)" @change="(value) => formChange(item.editField, value, null)" /> v-else-if="item.inputType == 'switch'"
v-model.trim="editForm[item.editField]"
:disabled="fieldIsDisable(item.disabled)"
:active-value="1"
:inactive-value="0"
inactive-color="#ccc"
active-color="#5887fb"
@change="value => formChange(item.editField, value, null)"
/>
<el-input-number
v-else-if="item.inputType == 'input-number'"
v-model.trim="editForm[item.editField]"
:min="item.inputNumberOption.min"
:max="item.inputNumberOption.max"
:placeholder="
item.placeholder || $lang('placeholder_input')
"
:clearable="item.clearable !== false"
:disabled="fieldIsDisable(item.disabled)"
@change="value => formChange(item.editField, value, null)"
/>
<!-- 自定义input --> <!-- 自定义input -->
<anji-input v-else-if="item.inputType == 'anji-input'" v-model.trim="editForm[item.editField]" :unit="item.anjiInput.unit" :conversion="item.anjiInput.conversion" :keep-point="item.anjiInput.keepPoint" :rounding="item.anjiInput.rounding" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="fieldIsDisable(item.disabled)" @change="(value) => formChange(item.editField, value, null)" /> <anji-input
v-else-if="item.inputType == 'anji-input'"
v-model.trim="editForm[item.editField]"
:unit="item.anjiInput.unit"
:default-unit="item.anjiInput.defaultUnit"
:placeholder="
item.placeholder || $lang('placeholder_input')
"
:clearable="item.clearable !== false"
:disabled="fieldIsDisable(item.disabled)"
@change="value => formChange(item.editField, value, null)"
/>
<!-- 下拉框 --> <!-- 下拉框 -->
<anji-select <anji-select
v-else-if="item.inputType == 'anji-select'" v-else-if="item.inputType == 'anji-select'"
v-model.trim="editForm[item.editField]" v-model.trim="editForm[item.editField]"
:allow-create="item.anjiSelectOption.allowCreate"
:multiple="item.anjiSelectOption.multiple" :multiple="item.anjiSelectOption.multiple"
:disabled="fieldIsDisable(item.disabled)" :disabled="fieldIsDisable(item.disabled)"
:dict-code="item.anjiSelectOption.dictCode" :dict-code="item.anjiSelectOption.dictCode"
@ -51,21 +115,97 @@
:label="item.anjiSelectOption.label" :label="item.anjiSelectOption.label"
:remote-filter="item.anjiSelectOption.remoteFilter" :remote-filter="item.anjiSelectOption.remoteFilter"
:disabled-options="item.anjiSelectOption.disabledOptions" :disabled-options="item.anjiSelectOption.disabledOptions"
@change="(value, option) => formChange(item.editField, value, option)" :select-keyword="item.anjiSelectOption.selectKeyword"
@change="
(value, option) =>
formChange(item.editField, value, option)
"
/> />
<!-- 日期时间框 --> <!-- 日期时间框 -->
<el-date-picker v-else-if="item.inputType.indexOf('date') >= 0" v-model="editForm[item.editField]" style="width: 100%" :placeholder="item.placeholder || '请选择'" :type="item.inputType" :format="item.format" :value-format="item.valueFormat" :disabled="fieldIsDisable(item.disabled)" :clearable="item.clearable !== false" @change="(value) => formChange(item.editField, value, null)" /> <el-date-picker
v-else-if="item.inputType.indexOf('date') >= 0"
v-model="editForm[item.editField]"
style="width: 100%"
:placeholder="
item.placeholder || $lang('placeholder_select')
"
:type="item.inputType"
:format="item.format"
:value-format="item.valueFormat"
:disabled="fieldIsDisable(item.disabled)"
:clearable="item.clearable !== false"
@change="value => formChange(item.editField, value, null)"
/>
<!-- checkbox --> <!-- checkbox -->
<anji-checkbox v-else-if="item.inputType == 'checkbox'" v-model.trim="editForm[item.editField]" :dict-code="item.anjiCheckbox.dictCode" :label="item.anjiCheckbox.label" :disabled="fieldIsDisable(item.disabled)" @change="(value, options) => formChange(item.editField, value, options)" /> <anji-checkbox
v-else-if="item.inputType == 'checkbox'"
v-model.trim="editForm[item.editField]"
:dict-code="item.anjiCheckbox.dictCode"
:url="item.anjiCheckbox.url"
:label="item.anjiCheckbox.label"
:disabled="fieldIsDisable(item.disabled)"
@change="
(value, options) =>
formChange(item.editField, value, options)
"
/>
<!-- 城市三级联动 --> <!-- 城市三级联动 -->
<anji-cascader v-else-if="item.inputType == 'anji-cascader'" v-model.trim="editForm[item.editField]" :disabled="fieldIsDisable(item.disabled)" :url="item.anjiCascader.url" @change="(value) => formChange(item.editField, value, null)" /> <anji-cascader
v-else-if="item.inputType == 'anji-cascader'"
v-model.trim="editForm[item.editField]"
:disabled="fieldIsDisable(item.disabled)"
:single-display="item.anjiCascader.singleDisplay"
:url="item.anjiCascader.url"
@change="value => formChange(item.editField, value, null)"
/>
<!-- 上传组件 --> <!-- 上传组件 -->
<anji-upload v-else-if="item.inputType == 'anji-upload'" v-model.trim="editForm[item.editField]" :up-load-url="item.anjiUpload.upLoadUrl" :view-url="item.anjiUpload.viewUrl" :upload-type="item.anjiUpload.uploadType" :limit="item.anjiUpload.limit" @change="(value) => formChange(item.editField, value, null)" /> <anji-upload
v-else-if="item.inputType == 'anji-upload'"
v-model.trim="editForm[item.editField]"
:up-load-url="item.anjiUpload.upLoadUrl"
:view-url="item.anjiUpload.viewUrl"
:upload-type="item.anjiUpload.uploadType"
:limit="item.anjiUpload.limit"
@change="value => formChange(item.editField, value, null)"
/>
<!-- input自带输入建议 --> <!-- input自带输入建议 -->
<anji-autocomplete v-else-if="item.inputType == 'anji-autocomplete'" v-model.trim="editForm[item.editField]" :disabled="fieldIsDisable(item.disabled)" :label="item.anjiAutocomplete.label" :option="item.anjiAutocomplete.option" :appoint-value="item.anjiAutocomplete.appointValue" :url="item.anjiAutocomplete.url" @change="(value, option) => formChange(item.editField, value, option)" /> <anji-autocomplete
v-else-if="item.inputType == 'anji-autocomplete'"
v-model.trim="editForm[item.editField]"
:disabled="fieldIsDisable(item.disabled)"
:label="item.anjiAutocomplete.label"
:option="item.anjiAutocomplete.option"
:appoint-value="item.anjiAutocomplete.appointValue"
:url="item.anjiAutocomplete.url"
@change="
(value, option) =>
formChange(item.editField, value, option)
"
/>
<!-- textarea --> <!-- textarea -->
<el-input v-else-if="item.inputType == 'textarea'" v-model.trim="editForm[item.editField]" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="fieldIsDisable(item.disabled)" type="textarea" :rows="2" @change="(value) => formChange(item.editField, value, null)" /> <el-input
<el-input v-else placeholder="组件不支持此类型表单请至组件内部自行扩展" disabled /> v-else-if="item.inputType == 'textarea'"
v-model.trim="editForm[item.editField]"
:placeholder="
item.placeholder || $lang('placeholder_input')
"
:clearable="item.clearable !== false"
:disabled="fieldIsDisable(item.disabled)"
type="textarea"
:rows="2"
@change="value => formChange(item.editField, value, null)"
/>
<!-- 城市四级联动 -->
<anji-fourlevel
v-else-if="item.inputType == 'anji-country'"
v-model.trim="editForm[item.editField]"
@change="value => formChange(item.editField, value, null)"
/>
<el-input
v-else
placeholder="组件不支持此类型表单请至组件内部自行扩展"
disabled
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</template> </template>
@ -87,97 +227,103 @@ export default {
type: [Object], type: [Object],
default: () => { default: () => {
return { return {
title: '', // 页面标题 title: "", // 页面标题
labelWidth: '', // 表单输入框label宽度 labelWidth: "", // 表单输入框label宽度
queryFormFields: [], // 查询表单条件 queryFormFields: [], // 查询表单条件
buttons: { buttons: {
// 按钮 // 按钮
query: {}, query: {},
edit: {}, edit: {},
delete: {}, delete: {},
add: {}, add: {}
}, },
columns: [], // 表格列 columns: [], // 表格列
formChange: (formData, fieldName, fieldVal, fieldExtend) => {}, // 弹出框表单修改回调 formChange: (formData, fieldName, fieldVal, fieldExtend) => {} // 弹出框表单修改回调
} };
}, }
}, },
// 当relateData不为空时，该组件是渲染与relateData一对一关联的子表信息 // 当relateData不为空时，该组件是渲染与relateData一对一关联的子表信息
relateData: { relateData: {
type: [Object], type: [Object],
default: () => { default: () => {
return {} return {};
}, }
}, },
value: { value: {
type: [Object], type: [Object],
default: () => { default: () => {
return {} return {};
}, }
}, }
}, },
data() { data() {
return { return {
cardRowColNum: 2, // 主信息一行显示几列 cardRowColNum: this.option.rowColForm || 2, // 主信息一行显示几列
editForm: {}, // 提交表单的数据 editForm: {} // 提交表单的数据
} };
}, },
computed: { computed: {
// 主键的列名 // 主键的列名
primaryKeyFieldName() { primaryKeyFieldName() {
var primaryKey = this.option.columns.find((item) => item['primaryKey'] == true) let primaryKey = this.option.columns.find(
item => item["primaryKey"] == true
);
if (primaryKey != null) { if (primaryKey != null) {
return primaryKey['field'] return primaryKey["field"];
} else { } else {
return null return null;
console.warn('在columns中查找primaryKey=true失败，会导致查询详情和删除失败') console.warn(
"在columns中查找primaryKey=true失败，会导致查询详情和删除失败"
);
} }
}, },
// 指定当前实体关联主表的 // 指定当前实体关联主表的
joinColumn() { joinColumn() {
var columnName = this.option.joinColumn let columnName = this.option.joinColumn;
if (this.isBlank(columnName)) { if (this.isBlank(columnName)) {
console.warn('在joinEntity中查找joinColumn属性失败，会导致查询详情和删除失败') console.warn(
columnName = '' "在joinEntity中查找joinColumn属性失败，会导致查询详情和删除失败"
);
columnName = "";
} }
return columnName return columnName;
}, },
// 提交表单中所有的列，因部分翻译字段，表格中和表单中的key不一样，field editField不全，这里补全下， // 提交表单中所有的列，因部分翻译字段，表格中和表单中的key不一样，field editField不全，这里补全下，
formFields() { formFields() {
if (this.option.columns == null) { if (this.option.columns == null) {
return [] return [];
} }
var fields = this.deepClone(this.option.columns) let fields = this.deepClone(this.option.columns);
fields = fields.map((item) => { fields = fields.map(item => {
if (this.isBlank(item['editField'])) { if (this.isBlank(item["editField"])) {
item['editField'] = item['field'] item["editField"] = item["field"];
} }
// 没有设定分组的，全部补全成 其它信息 // 没有设定分组的，全部补全成 其它信息
if (this.isBlank(item['group'])) { if (this.isBlank(item["group"])) {
item['group'] = '其它' item["group"] = this.$lang("crudEditDialogGroupOther");
} }
return item return item;
}) });
return fields return fields;
}, },
// 卡片设定中一行显示几列，每列的col数 // 卡片设定中一行显示几列，每列的col数
cardRowColSpan() { cardRowColSpan() {
return 24 / this.cardRowColNum return 24 / this.cardRowColNum;
}, },
// 如果表单内容较多，启用了分组，这里先算出所有的分组 // 如果表单内容较多，启用了分组，这里先算出所有的分组
columnGroups() { columnGroups() {
if (this.isBlank(this.formFields)) { if (this.isBlank(this.formFields)) {
return [] return [];
} else { } else {
// 找出所有hide != true的关联表 // 找出所有hide != true的关联表
var groups = this.formFields let groups = this.formFields
.map((item) => { .map(item => {
return item['group'] return item["group"];
}) })
.filter((currentValue, index, arr) => { .filter((currentValue, index, arr) => {
return arr.indexOf(currentValue) == index return arr.indexOf(currentValue) == index;
}) });
return groups return groups;
} }
}, },
/* { /* {
@ -187,167 +333,176 @@ export default {
groupFormFields() { groupFormFields() {
if (this.showDialog) { if (this.showDialog) {
// 将每个分组初始化 // 将每个分组初始化
var groupFormFields = {} let groupFormFields = {};
this.columnGroups.forEach((value, index, array) => { this.columnGroups.forEach((value, index, array) => {
groupFormFields[value] = [] groupFormFields[value] = [];
}) });
// 将所有编辑列，按分组存放 // 将所有编辑列，按分组存放
this.formFields.forEach((item, index, array) => { this.formFields.forEach((item, index, array) => {
groupFormFields[item['group']].push(item) groupFormFields[item["group"]].push(item);
}) });
return groupFormFields return groupFormFields;
} }
return [] return [];
}, },
groupModel() { groupModel() {
return this.columnGroups.length > 1 return this.columnGroups.length > 1;
}, }
}, },
created() { created() {
// 如果表单，是做为主表的编辑页面，如果是通过v-model传递进来的值，通过监听value，更新this.editForm // 如果表单，是做为主表的编辑页面，如果是通过v-model传递进来的值，通过监听value，更新this.editForm
this.$watch( this.$watch(
function () { function() {
return this.value return this.value;
}, },
function (newVal, oldVal) { function(newVal, oldVal) {
this.editForm = newVal this.editForm = newVal;
// 通过v-model传递值进来时，说明当前form是主表信息 // 通过v-model传递值进来时，说明当前form是主表信息
this.formChange() this.formChange();
} }
) );
// 如果表单，是做为子表的编辑页面，当relateData中的关联字段发生更新时，触发查询，比如在goods详情中，goodsCode // 如果表单，是做为子表的编辑页面，当relateData中的关联字段发生更新时，触发查询，比如在goods详情中，goodsCode
this.$watch( this.$watch(
function () { function() {
return this.relateData[this.joinColumn] return this.relateData[this.joinColumn];
}, },
function (newVal, oldVal) { function(newVal, oldVal) {
// 如果是父组件(弹出框)关闭时，设置this.relateData = {}时触发，清空本组件的数据 // 如果是父组件(弹出框)关闭时，设置this.relateData = {}时触发，清空本组件的数据
if (this.isBlank(this.relateData)) { if (this.isBlank(this.relateData)) {
this.cardRowColNum = 2 this.cardRowColNum = 2;
this.editForm = {} this.editForm = {};
return return;
} }
// 如果是关联字段发生更新，触发查询 // 如果是关联字段发生更新，触发查询
if (this.isNotBlank(newVal)) { if (this.isNotBlank(newVal)) {
this.queryDetail() this.queryDetail();
} }
} }
) );
}, },
mounted() { mounted() {
// 如果表单，是做为主表的编辑页面，如果是通过v-model传递进来的值 // 如果表单，是做为主表的编辑页面，如果是通过v-model传递进来的值
if (this.isNotBlank(this.value)) { if (this.isNotBlank(this.value)) {
this.editForm = this.value this.editForm = this.value;
this.formChange() this.formChange();
} }
// 如果表单，是做为子表的编辑页面，首次打开时，根据关联属性，加载详情数据 // 如果表单，是做为子表的编辑页面，首次打开时，根据关联属性，加载详情数据
if (this.isNotBlank(this.relateData) && this.isNotBlank(this.relateData[this.joinColumn])) { if (
this.queryDetail() this.isNotBlank(this.relateData) &&
this.isNotBlank(this.relateData[this.joinColumn])
) {
this.queryDetail();
} }
}, },
methods: { methods: {
// 该行是否显示 true/false/ 'hideOnAdd hideOnView hideOnEdit' // 该行是否显示 true/false/ 'hideOnAdd hideOnView hideOnEdit'
fieldIsHide(editHide) { fieldIsHide(editHide) {
if (typeof editHide == 'boolean') { if (typeof editHide == "boolean") {
return editHide return editHide;
} }
if (typeof editHide == 'string') { if (typeof editHide == "string") {
if (this.modelType == 'add') { if (this.modelType == "add") {
return editHide.indexOf('hideOnAdd') >= 0 return editHide.indexOf("hideOnAdd") >= 0;
} }
if (this.modelType == 'view') { if (this.modelType == "view") {
return editHide.indexOf('hideOnView') >= 0 return editHide.indexOf("hideOnView") >= 0;
} }
if (this.modelType == 'edit') { if (this.modelType == "edit") {
return editHide.indexOf('hideOnEdit') >= 0 return editHide.indexOf("hideOnEdit") >= 0;
} }
} }
return false return false;
}, },
// 该行是否禁用 true/false/ 'disableOnAdd disableOnView disableOnEdit' // 该行是否禁用 true/false/ 'disableOnAdd disableOnView disableOnEdit'
fieldIsDisable(disable) { fieldIsDisable(disable) {
if (typeof disable == 'boolean') { if (typeof disable == "boolean") {
return disable return disable;
} }
if (typeof disable == 'string') { if (typeof disable == "string") {
if (this.modelType == 'add') { if (this.modelType == "add") {
return disable.indexOf('disableOnAdd') >= 0 return disable.indexOf("disableOnAdd") >= 0;
} }
if (this.modelType == 'view') { if (this.modelType == "view") {
return disable.indexOf('disableOnView') >= 0 return disable.indexOf("disableOnView") >= 0;
} }
if (this.modelType == 'edit') { if (this.modelType == "edit") {
return disable.indexOf('disableOnEdit') >= 0 return disable.indexOf("disableOnEdit") >= 0;
} }
} }
return false return false;
}, },
// 设置一行显示几列 // 设置一行显示几列
handleSetRowColNum(num) { handleSetRowColNum(num) {
this.cardRowColNum = num this.cardRowColNum = num;
this.$emit('changeRowColNum', num) this.$emit("changeRowColNum", num);
}, },
async queryDetail() { async queryDetail() {
var queryParams = this.relateData let queryParams = this.relateData;
const { data, code } = await this.option.buttons.queryByPrimarykey.api(queryParams) const { data, code } = await this.option.buttons.queryByPrimarykey.api(
if (code != '200') return queryParams
this.editForm = data );
this.formChange() if (code != "200") return;
this.editForm = data;
this.formChange();
}, },
// 校验表单 // 校验表单
validate(callback) { validate(callback) {
this.$refs.editForm.validate(async (valid, obj) => { this.$refs.editForm.validate(async (valid, obj) => {
if (callback != null) { if (callback != null) {
callback(valid) callback(valid);
} }
}) });
}, },
handleSave(callback) { handleSave(callback) {
this.$refs.editForm.validate(async (valid, obj) => { this.$refs.editForm.validate(async (valid, obj) => {
if (valid) { if (valid) {
if (this.modelType == 'add') { if (this.modelType == "add") {
// 当edit-from是作为关联子表的界面，补全关联属性 // 当edit-from是作为关联子表的界面，补全关联属性
if (typeof this.option.beforeInsert == 'function') { if (typeof this.option.beforeInsert == "function") {
this.option.beforeInsert(this.relateData, this.editForm) this.option.beforeInsert(this.relateData, this.editForm);
} }
const { code, message } = await this.option.buttons.add.api(this.editForm) const { code, message } = await this.option.buttons.add.api(
if (code == '200') { this.editForm
);
if (code == "200") {
if (callback != null) { if (callback != null) {
callback() callback();
} }
} else { } else {
console.log(`提交表单调用新增接口失败：${message}`) console.log(`提交表单调用新增接口失败：${message}`);
} }
} else { } else {
// 当edit-from是作为关联子表的界面，补全关联属性 // 当edit-from是作为关联子表的界面，补全关联属性
if (typeof this.option.beforeUpdate == 'function') { if (typeof this.option.beforeUpdate == "function") {
this.option.beforeUpdate(this.relateData, this.editForm) this.option.beforeUpdate(this.relateData, this.editForm);
} }
const { code, message } = await this.option.buttons.edit.api(this.editForm) const { code, message } = await this.option.buttons.edit.api(
if (code == '200') { this.editForm
);
if (code == "200") {
if (callback != null) { if (callback != null) {
callback() callback();
} }
} else { } else {
console.log(`提交表单调用更新接口失败：${message}`) console.log(`提交表单调用更新接口失败：${message}`);
} }
} }
} else { } else {
console.log('表单校验失败') console.log("表单校验失败");
} }
}) });
}, },
// 表单任何一个变动时，通知外部v-model // 表单任何一个变动时，通知外部v-model
formChange(fieldName, fieldVal, fieldExtend) { formChange(fieldName, fieldVal, fieldExtend) {
this.$emit('input', this.editForm) this.$emit("input", this.editForm);
// 表单变动后，回调option中的formChange事件 // 表单变动后，回调option中的formChange事件
if (typeof this.option.formChange == 'function') { if (typeof this.option.formChange == "function") {
this.option.formChange(this.editForm, fieldName, fieldVal, fieldExtend) this.option.formChange(this.editForm, fieldName, fieldVal, fieldExtend);
} }
}, }
}, }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

545
report-ui/src/components/AnjiPlus/anji-crud/edit-table.vue
Unescape Escape View File

@ -1,138 +1,207 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-5-4 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-5-6 11:04:24
!-->
<template> <template>
<div v-if="option['hide'] == null || option['hide'] == false" <div
class="anji-card"> v-if="option['hide'] == null || option['hide'] == false"
class="anji-card"
>
<div class="card-head">{{ option.title }}</div> <div class="card-head">{{ option.title }}</div>
<div class="card-body"> <div class="card-body">
<el-form ref="form" <el-form ref="form" :model="form">
:model="form">
<!-- 表格开始 --> <!-- 表格开始 -->
<el-table :data="formRecordsUndelete" <el-table
border :data="formRecordsUndelete"
:row-class-name="tableRowClassAdapter" border
@selection-change="handleSelectionChange" :row-class-name="tableRowClassAdapter"
@row-click="handleTableRowClick"> @selection-change="handleSelectionChange"
@row-click="handleTableRowClick"
>
<!-- <el-table-column fixed type="selection" width="50" align="center" /> --> <!-- <el-table-column fixed type="selection" width="50" align="center" /> -->
<el-table-column label="序号" <el-table-column
min-width="50" :label="$lang('GLOBAL.table_index')"
align="center"> min-width="50"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.$index + 1 }} {{ scope.$index + 1 }}
</template> </template>
</el-table-column> </el-table-column>
<template v-for="item in option.columns"> <template v-for="item in option.columns">
<el-table-column v-if="fieldIsHide(item.tableHide) != true && item.columnType != 'expand'" <el-table-column
:key="item.field" v-if="
:label="item.label" fieldIsHide(item.tableHide) != true &&
:min-width="item.minWidth || 110" item.columnType != 'expand'
align="center"> "
:key="item.field"
:label="item.label"
:min-width="item.minWidth || 110"
align="center"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-form-item :prop="'records.' + scope.$index + '.' + item.field" <el-form-item
:rules="item.rules"> :prop="'records.' + scope.$index + '.' + item.field"
:rules="item.rules"
>
<!-- 输入框 --> <!-- 输入框 -->
<el-input v-if="item.inputType == 'input'" <el-input
v-model="scope.row[item.field]" v-if="item.inputType == 'input'"
size="small" v-model="scope.row[item.field]"
:placeholder="item.placeholder || '请输入'" size="small"
:clearable="item.clearable !== false" :placeholder="
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled" item.placeholder || $lang('placeholder_input')
@change="(value) => tableRowChange(scope.$index, item.field, value)" /> "
:clearable="item.clearable !== false"
:disabled="
saveButtonStatus[scope.$index] == 'inShow' ||
item.disabled
"
@change="
value => tableRowChange(scope.$index, item.field, value)
"
/>
<!-- 开关 --> <!-- 开关 -->
<el-switch v-else-if="item.inputType == 'switch'" <el-switch
v-model="scope.row[item.field]" v-else-if="item.inputType == 'switch'"
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled" v-model="scope.row[item.field]"
:active-value="item.switchOption.disableValue" :disabled="
:inactive-value="item.switchOption.enableValue" saveButtonStatus[scope.$index] == 'inShow' ||
@change="(value) => tableRowChange(scope.$index, item.field, value)" item.disabled
active-color="#5887fb" "
inactive-color="#ccc"> :active-value="item.switchOption.disableValue"
:inactive-value="item.switchOption.enableValue"
@change="
value => tableRowChange(scope.$index, item.field, value)
"
active-color="#5887fb"
inactive-color="#ccc"
>
</el-switch> </el-switch>
<el-input v-else-if="item.inputType == 'input-number'" <el-input
v-model="scope.row[item.field]" v-else-if="item.inputType == 'input-number'"
size="small" v-model="scope.row[item.field]"
:min="item.inputNumberOption.min" size="small"
:max="item.inputNumberOption.max" :min="item.inputNumberOption.min"
:placeholder="item.placeholder || '请输入'" :max="item.inputNumberOption.max"
:clearable="item.clearable !== false" :placeholder="
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled" item.placeholder || $lang('placeholder_input')
@change="(value) => tableRowChange(scope.$index, item.field, value)" /> "
:clearable="item.clearable !== false"
:disabled="
saveButtonStatus[scope.$index] == 'inShow' ||
item.disabled
"
@change="
value => tableRowChange(scope.$index, item.field, value)
"
/>
<!-- 自定义input --> <!-- 自定义input -->
<anji-input v-else-if="item.inputType == 'anji-input'" <anji-input
v-model.trim="scope.row[item.field]" v-else-if="item.inputType == 'anji-input'"
:default-value="item.defaultValue" v-model.trim="scope.row[item.field]"
:unit="item.anjiInput.unit" :default-value="item.defaultValue"
:conversion="item.anjiInput.conversion" :unit="item.anjiInput.unit"
:placeholder="item.placeholder || '请输入'" :conversion="item.anjiInput.conversion"
:clearable="item.clearable !== false" :placeholder="
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled" item.placeholder || $lang('placeholder_input')
@change="(value) => tableRowChange(scope.$index, item.field, value)" /> "
:clearable="item.clearable !== false"
:disabled="
saveButtonStatus[scope.$index] == 'inShow' ||
item.disabled
"
@change="
value => tableRowChange(scope.$index, item.field, value)
"
/>
<!-- 下拉框 --> <!-- 下拉框 -->
<anji-select v-else-if="item.inputType == 'anji-select'" <anji-select
v-model.trim="scope.row[item.field]" v-else-if="item.inputType == 'anji-select'"
:multiple="item.anjiSelectOption.multiple" v-model.trim="scope.row[item.field]"
:default-value="item.defaultValue" :multiple="item.anjiSelectOption.multiple"
:dict-code="item.anjiSelectOption.dictCode" :default-value="item.defaultValue"
:url="item.anjiSelectOption.url" :dict-code="item.anjiSelectOption.dictCode"
:method="item.anjiSelectOption.method" :url="item.anjiSelectOption.url"
:query-param="item.anjiSelectOption.queryParam" :method="item.anjiSelectOption.method"
:option="item.anjiSelectOption.option" :query-param="item.anjiSelectOption.queryParam"
:label="item.anjiSelectOption.label" :option="item.anjiSelectOption.option"
:disabled-options="item.anjiSelectOption.disabledOptions" :label="item.anjiSelectOption.label"
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled" :disabled-options="item.anjiSelectOption.disabledOptions"
@change="(value, option) => tableRowChange(scope.$index, item.field, value, option)" /> :disabled="
saveButtonStatus[scope.$index] == 'inShow' ||
item.disabled
"
@change="
(value, option) =>
tableRowChange(scope.$index, item.field, value, option)
"
/>
<!-- 日期时间框 --> <!-- 日期时间框 -->
<el-date-picker v-else-if="item.inputType.indexOf('date') >= 0" <el-date-picker
v-model="scope.row[item.field]" v-else-if="item.inputType.indexOf('date') >= 0"
style="width: 100%" v-model="scope.row[item.field]"
:placeholder="item.placeholder || '请选择'" style="width: 100%"
:type="item.inputType" :placeholder="
:clearable="item.clearable !== false" item.placeholder || $lang('placeholder_select')
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled" "
@change="(value) => tableRowChange(scope.$index, item.field, value)" /> :type="item.inputType"
:clearable="item.clearable !== false"
:disabled="
saveButtonStatus[scope.$index] == 'inShow' ||
item.disabled
"
@change="
value => tableRowChange(scope.$index, item.field, value)
"
/>
<!-- 待扩展的表单类型，请自行扩展 --> <!-- 待扩展的表单类型，请自行扩展 -->
<el-input v-else <el-input
placeholder="组件不支持此类型表单请至组件内部自行扩展" v-else
disabled /> placeholder="组件不支持此类型表单请至组件内部自行扩展"
disabled
/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
<el-table-column fixed="right" <el-table-column
label="操作" fixed="right"
width="100"> :label="$lang('GLOBAL.table_operation')"
width="100"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" <el-button
size="small" type="text"
@click="handleAddOrUpdate(scope.row, scope.$index)">{{ getRowEditButton(scope.$index) }}</el-button> size="small"
<el-button type="text" @click="handleAddOrUpdate(scope.row, scope.$index)"
size="small" >{{ getRowEditButton(scope.$index) }}</el-button
@click="handleDelete(scope.row, scope.$index)">删除</el-button> >
<el-button
type="text"
size="small"
@click="handleDelete(scope.row, scope.$index)"
>{{ $lang("btn_delete") }}</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 表格结束 --> <!-- 表格结束 -->
</el-form> </el-form>
<button v-if="modelType != 'view'" <button
class="table-add-row-button" v-if="modelType != 'view'"
@click="handleAdd"> class="table-add-row-button"
@click="handleAdd"
>
<i class="el-icon-plus" /> <i class="el-icon-plus" />
<span>新增</span> <span>{{ $lang("btn_add") }}</span>
</button> </button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
const ROW_DELETE_FLAG = 'deletedFlag' const ROW_DELETE_FLAG = "deletedFlag";
export default { export default {
components: {}, components: {},
props: { props: {
@ -142,242 +211,268 @@ export default {
type: [Object], type: [Object],
default: () => { default: () => {
return { return {
title: '', // 页面标题 title: "", // 页面标题
labelWidth: '', labelWidth: "",
queryFormFields: [], // 查询表单条件 queryFormFields: [], // 查询表单条件
buttons: { buttons: {
// 按钮 // 按钮
query: {}, query: {},
edit: {}, edit: {},
delete: {}, delete: {},
add: {}, add: {}
}, },
columns: [], // 表格列 columns: [] // 表格列
} };
}, }
}, },
relateData: { relateData: {
// 关联的主记录 // 关联的主记录
type: [Object], type: [Object],
default: () => { default: () => {
return {} return {};
}, }
}, },
value: { value: {
type: [Array], type: [Array],
default: () => { default: () => {
return [] return [];
}, }
}, },
valueNew: { valueNew: {
type: [Array], type: [Array],
default: () => { default: () => {
return [] return [];
}, }
} }
}, },
data () { data() {
return { return {
checkRecords: [], // 表格中当前选中的记录 checkRecords: [], // 表格中当前选中的记录
form: { form: {
records: [], // 接口返回的记录列表 records: [], // 接口返回的记录列表
total: 0, // 接口返回的总条数 total: 0 // 接口返回的总条数
}, },
saveButtonStatus: [], // 维护表格中每行编辑按钮的状态 inShow inEditing inAdding saveButtonStatus: [], // 维护表格中每行编辑按钮的状态 inShow inEditing inAdding
rowIdList: [] rowIdList: []
} };
}, },
computed: { computed: {
// 主键的列名 // 主键的列名
primaryKeyFieldName () { primaryKeyFieldName() {
var primaryKey = this.option.columns.find((item) => item['primaryKey'] == true) let primaryKey = this.option.columns.find(
item => item["primaryKey"] == true
);
if (primaryKey != null) { if (primaryKey != null) {
return primaryKey['field'] return primaryKey["field"];
} else { } else {
return null return null;
console.warn('在columns中查找primaryKey=true失败，会导致查询详情和删除失败') console.warn(
"在columns中查找primaryKey=true失败，会导致查询详情和删除失败"
);
} }
}, },
// 指定当前实体关联主表的关联字段，孙子关联表，没有该属性 // 指定当前实体关联主表的关联字段，孙子关联表，没有该属性
joinColumn () { joinColumn() {
var columnName = this.option.joinColumn let columnName = this.option.joinColumn;
if (this.isBlank(columnName)) { if (this.isBlank(columnName)) {
console.warn('在columns中查找关联字段失败，会导致查询详情和删除失败，孙子关联表忽略该错误') console.warn(
columnName = '' "在columns中查找关联字段失败，会导致查询详情和删除失败，孙子关联表忽略该错误"
);
columnName = "";
} }
return columnName return columnName;
}, },
// 未删除的记录 // 未删除的记录
formRecordsUndelete () { formRecordsUndelete() {
if (this.form.records == null) { if (this.form.records == null) {
return [] return [];
} }
return this.form.records.filter((item) => item[ROW_DELETE_FLAG] == null || item[ROW_DELETE_FLAG] == false) return this.form.records.filter(
}, item => item[ROW_DELETE_FLAG] == null || item[ROW_DELETE_FLAG] == false
);
}
}, },
watch: {}, watch: {},
created () { created() {
// 主表 relateData 的关联字段 joinColumn 变动时，触发查询子表的查询，孙子关联儿子的无效 // 主表 relateData 的关联字段 joinColumn 变动时，触发查询子表的查询，孙子关联儿子的无效
if (this.isNotBlank(this.joinColumn)) { if (this.isNotBlank(this.joinColumn)) {
this.$watch( this.$watch(
function () { function() {
return this.relateData[this.joinColumn] return this.relateData[this.joinColumn];
}, },
function (newVal, oldVal) { function(newVal, oldVal) {
// 如果是关联字段发生更新，触发查询 // 如果是关联字段发生更新，触发查询
if (this.isNotBlank(newVal)) { if (this.isNotBlank(newVal)) {
this.handleQueryPageList(newVal) this.handleQueryPageList(newVal);
} else { } else {
// 如果关联字段为空，清空本表格的数据，如果是父组件(弹出框)关闭时，设置this.relateData = {默认值}时触发 // 如果关联字段为空，清空本表格的数据，如果是父组件(弹出框)关闭时，设置this.relateData = {默认值}时触发
this.checkRecords = [] this.checkRecords = [];
this.form.records = [] this.form.records = [];
this.form.total = 0 this.form.total = 0;
this.saveButtonStatus = [] this.saveButtonStatus = [];
} }
} }
) );
} }
}, },
mounted () { mounted() {
// 首次打开时，根据主表关联字段查询子表，加载表格数据 // 首次打开时，根据主表关联字段查询子表，加载表格数据
if (this.isNotBlank(this.relateData) && this.isNotBlank(this.relateData[this.joinColumn])) { if (
this.handleQueryPageList() this.isNotBlank(this.relateData) &&
this.isNotBlank(this.relateData[this.joinColumn])
) {
this.handleQueryPageList();
} }
}, },
methods: { methods: {
// 该行是否显示 true/false/ 'hideOnAdd hideOnView hideOnEdit' // 该行是否显示 true/false/ 'hideOnAdd hideOnView hideOnEdit'
fieldIsHide (tableHide) { fieldIsHide(tableHide) {
if (typeof tableHide == 'boolean') { if (typeof tableHide == "boolean") {
return tableHide return tableHide;
} }
if (typeof tableHide == 'string') { if (typeof tableHide == "string") {
if (this.modelType == 'add') { if (this.modelType == "add") {
return tableHide.indexOf('hideOnAdd') >= 0 return tableHide.indexOf("hideOnAdd") >= 0;
} }
if (this.modelType == 'view') { if (this.modelType == "view") {
return tableHide.indexOf('hideOnView') >= 0 return tableHide.indexOf("hideOnView") >= 0;
} }
if (this.modelType == 'edit') { if (this.modelType == "edit") {
return tableHide.indexOf('hideOnEdit') >= 0 return tableHide.indexOf("hideOnEdit") >= 0;
} }
} }
return false return false;
}, },
// 获取行的提交按钮文字 // 获取行的提交按钮文字
getRowEditButton (index) { getRowEditButton(index) {
if (this.saveButtonStatus[index] == 'inEditing') { if (this.saveButtonStatus[index] == "inEditing") {
return 'btn_savetemp' return this.$lang("btn_savetemp");
} else if (this.saveButtonStatus[index] == 'inAdding') { } else if (this.saveButtonStatus[index] == "inAdding") {
return 'btn_savetemp' return this.$lang("btn_savetemp");
} else if (this.saveButtonStatus[index] == 'inShow') { } else if (this.saveButtonStatus[index] == "inShow") {
return 'btn_edit' return this.$lang("btn_edit");
} else { } else {
return 'not_permission' return "not_permission";
} }
}, },
// 表格行渲染前前置处理 // 表格行渲染前前置处理
tableRowClassAdapter ({ row, rowIndex }) { tableRowClassAdapter({ row, rowIndex }) {
row.index = rowIndex row.index = rowIndex;
}, },
// 查询 // 查询
async handleQueryPageList (joinColumnValue) { async handleQueryPageList(joinColumnValue) {
if (this.isBlank(joinColumnValue)) { if (this.isBlank(joinColumnValue)) {
joinColumnValue = this.relateData[this.joinColumn] joinColumnValue = this.relateData[this.joinColumn];
} }
var params = {} let params = {};
params[this.joinColumn] = joinColumnValue params[this.joinColumn] = joinColumnValue;
this.queryPageList(params) this.queryPageList(params);
}, },
// 暴露给外部直接调用带参数 // 暴露给外部直接调用带参数
async queryPageList (params) { async queryPageList(params) {
// 默认的排序 // 默认的排序
if (this.isNotBlank(this.option.buttons.query.order)) { if (this.isNotBlank(this.option.buttons.query.order)) {
params['sort'] = this.option.buttons.query.sort params["sort"] = this.option.buttons.query.sort;
params['order'] = this.option.buttons.query.order params["order"] = this.option.buttons.query.order;
} }
const { data, code } = await this.option.buttons.query.api(params) const { data, code } = await this.option.buttons.query.api(params);
if (code != '200') return if (code != "200") return;
this.form.records = data.records this.form.records = data.records;
this.form.total = data.total this.form.total = data.total;
this.$emit('input', this.form.records) this.$emit("input", this.form.records);
for (var i = 0; i < this.form.total; i++) { for (let i = 0; i < this.form.total; i++) {
this.saveButtonStatus.push('inShow') this.saveButtonStatus.push("inShow");
} }
}, },
// 选择项改变时 // 选择项改变时
handleSelectionChange (val) { handleSelectionChange(val) {
this.checkRecords = val this.checkRecords = val;
}, },
// 表格选中某一行时 // 表格选中某一行时
handleTableRowClick (row, column, event) { handleTableRowClick(row, column, event) {
// console.log(row) // console.log(row)
// console.log(column) // console.log(column)
// 行点击后，回调option中的tableRowClick事件 // 行点击后，回调option中的tableRowClick事件
if (typeof this.option.tableRowClick == 'function') { if (typeof this.option.tableRowClick == "function") {
this.option.tableRowClick(this.form.records, row, row.index, this.relateData) this.option.tableRowClick(
this.form.records,
row,
row.index,
this.relateData
);
} }
}, },
// 行数据更新时回调 // 行数据更新时回调
tableRowChange (rowIndex, fieldName, fieldVal, fieldExtend) { tableRowChange(rowIndex, fieldName, fieldVal, fieldExtend) {
// 通知外面的组件 // 通知外面的组件
this.$emit('input', this.form.records) this.$emit("input", this.form.records);
// 表单变动后，回调option中的tableRowChange事件 // 表单变动后，回调option中的tableRowChange事件
if (typeof this.option.tableChange == 'function') { if (typeof this.option.tableChange == "function") {
this.option.tableChange(this.form.records, rowIndex, fieldName, fieldVal, fieldExtend, this.relateData) this.option.tableChange(
this.form.records,
rowIndex,
fieldName,
fieldVal,
fieldExtend,
this.relateData
);
} }
}, },
// 新增 // 新增
handleAdd () { handleAdd() {
this.saveButtonStatus.push('inAdding') this.saveButtonStatus.push("inAdding");
this.form.records.push({}) this.form.records.push({});
}, },
// 父节点Change,子节点表格更新 // 父节点Change,子节点表格更新
handleUpdata () { handleUpdata() {
this.saveButtonStatus = [] this.saveButtonStatus = [];
this.form.records = [] this.form.records = [];
}, },
// 提交和修改 // 提交和修改
handleAddOrUpdate (row, index) { handleAddOrUpdate(row, index) {
// 编辑状态下点击保存提交 // 编辑状态下点击保存提交
if (this.saveButtonStatus[index] == 'inEditing' || this.saveButtonStatus[index] == 'inAdding') { if (
this.handleSaveTemp(row, index) this.saveButtonStatus[index] == "inEditing" ||
this.saveButtonStatus[index] == "inAdding"
) {
this.handleSaveTemp(row, index);
} else { } else {
this.$set(this.saveButtonStatus, index, 'inEditing') this.$set(this.saveButtonStatus, index, "inEditing");
} }
}, },
// 校验表单 // 校验表单
validate (callback) { validate(callback) {
this.$refs['form'].validate(async (valid, obj) => { this.$refs["form"].validate(async (valid, obj) => {
if (callback != null) { if (callback != null) {
callback(valid) callback(valid);
} }
}) });
}, },
// 暂存 // 暂存
async handleSaveTemp (row, index) { async handleSaveTemp(row, index) {
this.$refs['form'].validate((valid) => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
if (this.isBlank(row[this.primaryKeyFieldName])) { if (this.isBlank(row[this.primaryKeyFieldName])) {
// 补全关联属性 // 补全关联属性
if (typeof this.option.beforeInsert == 'function') { if (typeof this.option.beforeInsert == "function") {
this.option.beforeInsert(this.relateData, row) this.option.beforeInsert(this.relateData, row);
} }
} else { } else {
// 补全关联属性 // 补全关联属性
if (typeof this.option.beforeUpdate == 'function') { if (typeof this.option.beforeUpdate == "function") {
this.option.beforeUpdate(this.relateData, row) this.option.beforeUpdate(this.relateData, row);
} }
} }
// 将行按钮的文字改成编辑 // 将行按钮的文字改成编辑
this.$set(this.saveButtonStatus, index, 'inShow') this.$set(this.saveButtonStatus, index, "inShow");
// 通知外面的组件 // 通知外面的组件
this.$emit('input', this.form.records) this.$emit("input", this.form.records);
} }
}) });
/* /*
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
if (valid) { if (valid) {
@ -417,32 +512,34 @@ export default {
*/ */
}, },
// 删除 // 删除
handleDelete (row, index) { handleDelete(row, index) {
this.saveButtonStatus.splice(index, 1) // 清空状态 this.saveButtonStatus.splice(index, 1); // 清空状态
// 界面上临时新增出来的一行，还没有提交到数据库，可以直接删除 // 界面上临时新增出来的一行，还没有提交到数据库，可以直接删除
if (this.saveButtonStatus[index] == 'inAdding') { if (this.saveButtonStatus[index] == "inAdding") {
this.form.records.splice(index, 1) this.form.records.splice(index, 1);
this.saveButtonStatus.splice(index, 1) this.saveButtonStatus.splice(index, 1);
this.$emit('input', this.form.records) this.$emit("input", this.form.records);
return return;
} }
// if (this.isBlank(row) || this.isBlank(row[this.primaryKeyFieldName])) { // if (this.isBlank(row) || this.isBlank(row[this.primaryKeyFieldName])) {
// return // return
// } // }
// 将对应的行标识成删除 // 将对应的行标识成删除
// 找出该行在原始记录中的index // 找出该行在原始记录中的index
// var realIndex = this.form.records.findIndex((item) => item[this.primaryKeyFieldName] == row[this.primaryKeyFieldName]) let realIndex = this.form.records.findIndex(
// row[ROW_DELETE_FLAG] = true item => item[this.primaryKeyFieldName] == row[this.primaryKeyFieldName]
// this.$set(this.form.records, realIndex, row) );
row[ROW_DELETE_FLAG] = true;
this.$set(this.form.records, realIndex, row);
this.$emit("input", this.form.records);
// this.form.records.splice(index, 1)
// this.rowIdList.push(row.id)
// this.$emit('input', this.form.records) // this.$emit('input', this.form.records)
this.form.records.splice(index, 1) // this.$emit('update:valueNew', this.rowIdList)
this.rowIdList.push(row.id)
this.$emit('input', this.form.records)
this.$emit('update:valueNew', this.rowIdList)
/* /*
之前是直接调用接口删除，后面统一改成在主表接口中增加、更新、删除 之前是直接调用接口删除，后面统一改成在主表接口中增加、更新、删除
// 已经保存在数据库的的行，要调用删除按钮 // 已经保存在数据库的的行，要调用删除按钮
var primaryKey = row[this.primaryKeyFieldName] let primaryKey = row[this.primaryKeyFieldName]
this.$confirm(this.$lang('promptMessage_deleteTip'), this.$lang('promptMessage_deleteTipTitle'), { this.$confirm(this.$lang('promptMessage_deleteTip'), this.$lang('promptMessage_deleteTipTitle'), {
type: 'warning', type: 'warning',
confirmButtonClass: 'delete_sure', confirmButtonClass: 'delete_sure',
@ -459,9 +556,9 @@ export default {
e e
}) })
*/ */
}, }
}, }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

315
report-ui/src/components/AnjiPlus/anji-crud/edit.vue
Unescape Escape View File

@ -1,13 +1,7 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-3-13 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-3-13 11:04:24
!-->
<template> <template>
<el-dialog <el-dialog
:width="dialogWidth" :width="dialogWidth"
:class="dialogFullScreen?'full-screen':'notfull-screen'" :class="dialogFullScreen ? 'full-screen' : 'notfull-screen'"
:close-on-click-modal="false" :close-on-click-modal="false"
center center
:visible.sync="showDialog" :visible.sync="showDialog"
@ -15,7 +9,7 @@
@close="handleCloseDialog('close')" @close="handleCloseDialog('close')"
> >
<template v-slot:title> <template v-slot:title>
{{ option.title + '--' + modelType }} {{ option.title + "--" + $lang(`btn_${modelType}`) }}
<button <button
type="button" type="button"
aria-label="Close" aria-label="Close"
@ -67,49 +61,55 @@
<!--自定义的卡片插槽--> <!--自定义的卡片插槽-->
<slot name="customCard" /> <slot name="customCard" />
<div <div slot="footer" style="text-align: center">
slot="footer" <slot v-if="modelType == 'edit'" name="editBtn" :rowData="rowData" />
style="text-align: center" <el-button type="danger" plain @click="handleCloseDialog('close')">{{
> $lang("btn_close")
<slot }}</el-button>
v-if="modelType =='edit'"
name="editBtn"
:rowData="rowData"
/>
<el-button
type="danger"
plain
@click="handleCloseDialog('close')"
>关闭</el-button>
<el-button <el-button
v-if="modelType!='view'" v-if="modelType != 'view'"
type="primary" type="primary"
plain plain
@click="handleValidateAndSave" @click="handleValidateAndSave"
>保存</el-button> >{{ $lang("btn_save") }}</el-button
>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import EditForm from './edit-form' import EditForm from "./edit-form";
import EditTable from './edit-table' import EditTable from "./edit-table";
export default { export default {
name: 'EditDialog', name: "EditDialog",
components: { EditForm, EditTable }, components: { EditForm, EditTable },
props: { props: {
visible: { visible: {
type: [Boolean], type: [Boolean],
default: () => { default: () => {
return false return false;
}, }
}, },
rowData: { rowData: {
// 查询参数，对应表格那行数据 // 查询参数，对应表格那行数据
type: [Object], type: [Object],
default: () => { default: () => {
return {} return {};
}, }
},
// 预处理详情接口数据
handleDetailData: {
type: Function,
default: data => {
return data;
}
},
// 预处理提交数据
submitDetailData: {
type: Function,
default: (data, tpe) => {
return data;
}
}, },
modelType: String, // add view edit modelType: String, // add view edit
option: { option: {
@ -117,20 +117,20 @@ export default {
type: Object, type: Object,
default: () => { default: () => {
return { return {
title: '', // 页面标题 title: "", // 页面标题
labelWidth: '', // 表单输入框label宽度 labelWidth: "", // 表单输入框label宽度
queryFormFields: [], // 查询表单条件 queryFormFields: [], // 查询表单条件
buttons: { buttons: {
// 按钮 // 按钮
query: {}, query: {},
edit: {}, edit: {},
delete: {}, delete: {},
add: {}, add: {}
}, },
columns: [], // 表格列 columns: [] // 表格列
} };
}, }
}, }
}, },
data() { data() {
return { return {
@ -141,191 +141,230 @@ export default {
// 提交表单的数据 // 提交表单的数据
saveForm: {}, saveForm: {},
// 已成功校验的关联表单个数 // 已成功校验的关联表单个数
countForValidJoinForm: 0, countForValidJoinForm: 0
} };
}, },
computed: { computed: {
// 弹出框的宽度，根据一行显示几列动态调整 // 弹出框的宽度，根据一行显示几列动态调整
dialogWidth() { dialogWidth() {
if (this.cardRowColNum == 2) { if (this.cardRowColNum == 2) {
return '60%' return "60%";
} }
if (this.cardRowColNum == 3) { if (this.cardRowColNum == 3) {
return '70%' return "70%";
} }
if (this.cardRowColNum == 4) { if (this.cardRowColNum == 4) {
return '80%' return "80%";
} }
return '60%' return "60%";
}, },
// 关联属性表 // 关联属性表
joinEntitys() { joinEntitys() {
if (this.isBlank(this.option.joinEntitys)) { if (this.isBlank(this.option.joinEntitys)) {
return [] return [];
} else { } else {
return this.option.joinEntitys return this.option.joinEntitys;
// 找出所有hide != true的关联表 // 找出所有hide != true的关联表
// var entitys = this.option.joinEntitys.filter((item) => item['hide'] == null || item['hide'] == false) // let entitys = this.option.joinEntitys.filter((item) => item['hide'] == null || item['hide'] == false)
// return entitys // return entitys
} }
}, },
// 一对一关联表的个数 // 一对一关联表的个数
countJoinEntityOneToOne() { countJoinEntityOneToOne() {
var entitys = this.joinEntitys.filter((item) => item['joinType'] == 'OneToOne') let entitys = this.joinEntitys.filter(
item => item["joinType"] == "OneToOne"
);
if (entitys == null) { if (entitys == null) {
return 0 return 0;
} }
return entitys.length return entitys.length;
}, }
}, },
watch: { watch: {
// 监控dialog的显示隐藏变量 // 监控dialog的显示隐藏变量
visible(newValue, oldValue) { visible(newValue, oldValue) {
this.showDialog = newValue this.showDialog = newValue;
// 为主表的编辑表单，渲染上默认值 // 为主表的编辑表单，渲染上默认值
this.initDefaultSaveForm() this.initDefaultSaveForm();
}, },
rowData(newValue, oldValue) { rowData(newValue, oldValue) {
if (newValue != null) { if (newValue != null) {
this.queryByPrimarykey(newValue) this.queryByPrimarykey(newValue);
} }
}, }
}, },
mounted() { mounted() {
// 为主表的编辑表单，渲染上默认值 // 为主表的编辑表单，渲染上默认值
this.initDefaultSaveForm() this.initDefaultSaveForm();
}, },
methods: { methods: {
// 暴露给外部crud页面，回传saveForm的值 // 暴露给外部crud页面，回传saveForm的值
getSaveForm() { getSaveForm() {
return this.saveForm return this.saveForm;
}, },
setSaveForm(saveForm) { setSaveForm(saveForm) {
this.saveForm = saveForm this.saveForm = saveForm;
}, },
initDefaultSaveForm() { initDefaultSaveForm() {
// saveForm的默认值 // saveForm的默认值
var defaultSaveForm = {} let defaultSaveForm = {};
this.option.columns.forEach((item) => { this.option.columns.forEach(item => {
var key = item.editField let key = item.editField;
if (this.isBlank(key)) { if (this.isBlank(key)) {
key = item.field key = item.field;
} }
var val = item.defaultValue let val = item.defaultValue;
if (this.isNotBlank(val)) { if (this.isNotBlank(val)) {
defaultSaveForm[key] = val defaultSaveForm[key] = val;
} }
}) });
// 为主表的编辑表单，渲染上默认值 // 为主表的编辑表单，渲染上默认值
this.saveForm = this.deepClone(defaultSaveForm) this.saveForm = this.deepClone(defaultSaveForm);
console.log('编辑框默认值:' + JSON.stringify(this.saveForm)) console.log("编辑框默认值:" + JSON.stringify(this.saveForm));
}, },
handleCloseDialog(val) { handleCloseDialog(val) {
// 为主表的编辑表单，渲染上默认值 // 为主表的编辑表单，渲染上默认值
this.initDefaultSaveForm() this.initDefaultSaveForm();
this.showDialog = false, // 编辑详情弹框是否显示 this.showDialog = false; // 编辑详情弹框是否显示
this.dialogFullScreen = false, // 弹出框全屏 this.dialogFullScreen = false; // 弹出框全屏
this.cardRowColNum = 2, // 主信息一行显示几列 this.cardRowColNum = 2; // 主信息一行显示几列
this.countForValidJoinForm = 0, // 已成功校验的关联表单个数 this.countForValidJoinForm = 0; // 已成功校验的关联表单个数
this.$emit('closeEvent', val) this.$emit("closeEvent", val);
},
handleTopCloseDialog() {
// 为主表的编辑表单，渲染上默认值
this.initDefaultSaveForm();
this.showDialog = false; // 编辑详情弹框是否显示
this.dialogFullScreen = false; // 弹出框全屏
this.cardRowColNum = 2; // 主信息一行显示几列
this.countForValidJoinForm = 0; // 已成功校验的关联表单个数
}, },
// 设置一行显示几列 // 设置一行显示几列
handleSetRowColNum(num) { handleSetRowColNum(num) {
this.cardRowColNum = num this.cardRowColNum = num;
}, },
// 根据关联类型计算组件 // 根据关联类型计算组件
getComponentByJoinType(type, item) { getComponentByJoinType(type, item) {
if (type == 'OneToOne') { if (type == "OneToOne") {
return 'EditForm' return "EditForm";
} else if (type == 'OneToMany') { } else if (type == "OneToMany") {
return 'EditTable' return "EditTable";
} else { } else {
return '' return "";
} }
}, },
async queryByPrimarykey(rowData) { async queryByPrimarykey(rowData) {
const { data, code } = await this.option.buttons.queryByPrimarykey.api(rowData) const { data, code } = await this.option.buttons.queryByPrimarykey.api(
if (code != '200') return rowData
this.showDialog = true );
this.saveForm = data if (code != "200") return;
this.showDialog = true;
this.saveForm = this.handleDetailData(data);
}, },
// 保存前，先调用校验 // 保存前，先调用校验
handleValidateAndSave() { handleValidateAndSave() {
this.countForValidJoinForm = 0 this.countForValidJoinForm = 0;
// 主表单校验 // 主表单校验
this.$refs.mainForm.validate((mainValid) => { this.$refs.mainForm.validate(mainValid => {
if (mainValid == false) { if (mainValid == false) {
console.warn('主表单校验失败') console.warn("主表单校验失败");
return return;
} }
console.log('主表单校验完成') console.log("主表单校验完成");
if (this.joinEntitys == null || this.joinEntitys.length == 0) { if (this.joinEntitys == null || this.joinEntitys.length == 0) {
// 如果子表没有信息，直接提交 // 如果子表没有信息，直接提交
this.handleSave() this.handleSave();
return return;
} }
for (var i = 0; i < this.joinEntitys.length; i++) { for (let i = 0; i < this.joinEntitys.length; i++) {
console.log(`开始校验子表单-${i} 校验`) console.log(`开始校验子表单-${i} 校验`);
var item = this.joinEntitys[i] let item = this.joinEntitys[i];
if (this.$refs['joinForm' + i] == null || item.hide == true || this.saveForm[item.fieldNameInMainEntityOnSave] == null || this.saveForm[item.fieldNameInMainEntityOnSave].length == 0) { console.log(item);
console.log('子表单没有数据，直接跳过') if (
this.countForValidJoinForm++ this.$refs["joinForm" + i] == null ||
console.log('已经校验的子表单：' + this.countForValidJoinForm + ' 共：' + this.joinEntitys.length) item.hide == true ||
this.saveForm[item.fieldNameInMainEntityOnSave] == null ||
this.saveForm[item.fieldNameInMainEntityOnSave].length == 0
) {
console.warn("子表单校验失败");
} else {
const childrenChecked = this.checkedChildrenValidate(
this.saveForm[item.fieldNameInMainEntityOnSave],
item.columns
);
if (!childrenChecked) {
return;
}
// console.log('子表单没有数据，直接跳过')
this.countForValidJoinForm++;
console.log(
"已经校验的子表单：" +
this.countForValidJoinForm +
" 共：" +
this.joinEntitys.length
);
// 所有关联表单校验通过 // 所有关联表单校验通过
if (this.countForValidJoinForm == this.joinEntitys.length) { if (this.countForValidJoinForm == this.joinEntitys.length) {
console.log('子表单校验完成，提交主表单') console.log("子表单校验完成，提交主表单");
this.handleSave() this.handleSave();
} }
continue continue;
} }
var joinForm = this.$refs['joinForm' + i] let joinForm = this.$refs["joinForm" + i];
if (toString.call(joinForm) == '[object Array]') { if (toString.call(joinForm) == "[object Array]") {
joinForm = joinForm[0] joinForm = joinForm[0];
} }
joinForm.validate((joinValid) => { joinForm.validate(joinValid => {
if (joinValid) { if (joinValid) {
this.countForValidJoinForm++ this.countForValidJoinForm++;
console.log('已经校验的子表单：' + this.countForValidJoinForm + ' 共：' + this.joinEntitys.length) console.log(
"已经校验的子表单：" +
this.countForValidJoinForm +
" 共：" +
this.joinEntitys.length
);
// 所有关联表单校验通过 // 所有关联表单校验通过
if (this.countForValidJoinForm == this.joinEntitys.length) { if (this.countForValidJoinForm == this.joinEntitys.length) {
console.log('子表单校验完成，提交主表单') console.log("子表单校验完成，提交主表单");
this.handleSave() this.handleSave();
} }
} else { } else {
console.warn(`子表单${i}校验失败:`) console.warn(`子表单${i}校验失败:`);
} }
}) });
} }
}) });
}, },
async handleSave() { async handleSave() {
const params = this.submitDetailData(this.saveForm, this.modelType);
// 新增 // 新增
if (this.modelType == 'add') { if (this.modelType == "add") {
const { code, message } = await this.option.buttons.add.api(this.saveForm) const { code, message } = await this.option.buttons.add.api(params);
if (code == '200') { if (code == "200") {
// 保存结束，关闭对话框 // 保存结束，关闭对话框
this.handleCloseDialog() this.handleCloseDialog();
// 向外层发关闭事件 // 向外层发关闭事件
this.$emit('closeEvent') // this.$emit('closeEvent')
return return;
} else { } else {
this.countForValidJoinForm = 0, // 已成功校验的关联表单个数 // ;(this.countForValidJoinForm = 0), // 已成功校验的关联表单个数
console.log(`提交表单调用新增接口失败：${message}`) console.log(`提交表单调用新增接口失败：${message}`);
} }
} }
// 修改 // 修改
if (this.modelType == 'edit') { if (this.modelType == "edit") {
// console.log(this.$slots.customCard[0].context.$refs.cardInEditData.updateData.settingValue) // console.log(this.$slots.customCard[0].context.$refs.cardInEditData.updateData.settingValue)
const { code, message } = await this.option.buttons.edit.api(this.saveForm) const { code, message } = await this.option.buttons.edit.api(params);
if (code == '200') { if (code == "200") {
// 保存结束，关闭对话框 // 保存结束，关闭对话框
this.handleCloseDialog() this.handleCloseDialog();
// 向外层发关闭事件 // 向外层发关闭事件
this.$emit('closeEvent') // this.$emit('closeEvent')
return return;
} else { } else {
this.countForValidJoinForm = 0, // 已成功校验的关联表单个数 // ;(this.countForValidJoinForm = 0), // 已成功校验的关联表单个数
console.log(`提交表单调用更新接口失败：${message}`) console.log(`提交表单调用更新接口失败：${message}`);
} }
} }
/* 分步提交 /* 分步提交
@ -340,7 +379,7 @@ export default {
return return
} }
// 主表保存成功后，保存子表 // 主表保存成功后，保存子表
for (var i = 0; i < this.joinEntitys.length; i++) { for (let i = 0; i < this.joinEntitys.length; i++) {
if (this.joinEntitys[i].joinType == 'OneToOne') { if (this.joinEntitys[i].joinType == 'OneToOne') {
this.$refs['joinForm' + i].handleSave(() => { this.$refs['joinForm' + i].handleSave(() => {
this.countForSavedOneToOneJoinEntity++ this.countForSavedOneToOneJoinEntity++
@ -355,8 +394,24 @@ export default {
} }
})*/ })*/
}, },
}, // 子表单数据校验
} checkedChildrenValidate(list, confingList) {
const configFileds = confingList.map(item => item.field);
for (let i = 0; i < list.length; i++) {
const item = list[i];
for (let key = 0; key < configFileds.length; key++) {
if (
item.hasOwnProperty(configFileds[key]) &&
!item[configFileds[key]]
) {
return false;
}
}
}
return true;
}
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

151
report-ui/src/components/AnjiPlus/anji-daterange.vue
Unescape Escape View File

@ -0,0 +1,151 @@
<!--
:v-model=""
:format="'yyyy-MM-dd HH:mm:ss'" 绑定值的格式,一般是参数传到后台的数据格式
:defaultValue="['00:00:00','23:59:59']" 选中日期后的默认具体时刻 数据格式为数组 ['00:00:00', '23:59:59']
@change=""
-->
<template>
<div>
<el-date-picker
v-model="selectedRangeValue"
style="width: 100%"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:value-format="format"
unlink-panels
:picker-options="pickerOptions"
:default-time="defaultValue"
@change="valueChanged"
/>
</div>
</template>
<script>
import miment from "miment";
export default {
props: {
format: {
type: String,
default: "yyyy-MM-dd HH:mm:ss"
},
defaultValue: {
type: Array,
default: () => {
return [];
}
},
value: {
type: String,
default: ""
}
},
data() {
return {
selectedRangeValue: [],
pickerOptions: {
shortcuts: [
{
text: "今天",
onClick(picker) {
const end = new Date();
const start = new Date(
new Date(new Date().getTime()).setHours(0, 0, 0, 0)
);
picker.$emit("pick", [start, end]);
}
},
{
text: "昨天",
onClick(picker) {
const start = new Date(
new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(
0,
0,
0,
0
)
);
const end = new Date(
new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(
23,
59,
59,
999
)
);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(
miment()
.add(-1, "ww")
.stamp()
);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(
miment()
.add(-1, "MM")
.stamp()
);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(
miment()
.add(-3, "MM")
.stamp()
);
picker.$emit("pick", [start, end]);
}
}
],
onPick: ({ maxDate, minDate }) => {
this.minDate = minDate;
this.maxDate = maxDate;
}
}
};
},
watch: {
value(val) {
this.parseDefaultVal(val);
}
},
created() {},
methods: {
// el-date-range的值默认是数组，gaea需要的是'start,end'字符串，这里做下转换
parseDefaultVal(val) {
if (val != null) {
this.selectedRangeValue = val.split(",");
} else {
this.selectedRangeValue = [];
}
},
valueChanged(val) {
if (val != null) {
let rangeVal = val.toString();
this.$emit("change", rangeVal);
this.$emit("input", rangeVal);
}
}
}
};
</script>

209
report-ui/src/components/AnjiPlus/anji-dialog.vue
Unescape Escape View File

@ -0,0 +1,209 @@
<template>
<el-dialog
:width="dialogWidth"
:class="dialogFullScreen ? 'full-screen' : 'notfull-screen'"
center
:fullscreen="dialogFullScreen"
:visible.sync="dialogConfig.dialogVisible"
:before-close="handleDialogClose"
append-to-body
modal-append-to-body
>
<template v-slot:title>
{{ getDialogTitle(dialogConfig.dialogType) }}
<button
v-if="dialogConfig.isFullScreen"
type="button"
aria-label="Close"
class="el-dialog__headerbtn"
style="right: 50px"
@click="dialogFullScreen = !dialogFullScreen"
>
<i class="el-dialog__close el-icon el-icon-full-screen" />
</button>
</template>
<div class="card-body">
<div class="anji-card">
<div v-if="dialogConfig.isSetColRow" class="card-head">
<div class="main-card-header-button">
<el-button type="text" @click="handleSetRowColNum(4)"
>||||</el-button
>
<el-button type="text" @click="handleSetRowColNum(3)"
>|||</el-button
>
<el-button type="text" @click="handleSetRowColNum(2)">||</el-button>
</div>
</div>
<slot name="dialogCont" />
<slot />
</div>
</div>
<div slot="footer" class="anji-button">
<el-button
v-if="isBtnClose"
type="danger"
plain
@click="handleDialogClose"
>{{ dialogConfig.isBtnClose.text || $lang("btn_close") }}</el-button
>
<el-button
v-if="isBtnSave"
type="primary"
plain
@click="handleDialogSave"
>{{ dialogConfig.isBtnSave.text || $lang("btn_save") }}</el-button
>
<slot name="dialogBtn" />
</div>
</el-dialog>
</template>
<script>
export default {
props: {
// 弹框配置文件
dialogConfig: {
required: true,
type: Object,
default: () => {
return {
dialogVisible: false,
dialogType: "add",
dialogWidth: "60%",
isFullScreen: true,
isSetColRow: true,
isBtnClose: {
value: true,
text: this.$lang("btn_close")
},
isBtnSave: {
value: true,
text: this.$lang("btn_save")
},
column: 2,
setColumnFn: () => {}
};
}
}
},
data() {
return {
dialogFullScreen: false // 弹出框全屏
};
},
computed: {
dialogWidth() {
if (this.dialogConfig.dialogWidth) {
return this.dialogConfig.dialogWidth;
} else {
if (this.dialogConfig.column == 2) {
return "60%";
}
if (this.dialogConfig.column == 3) {
return "70%";
}
if (this.dialogConfig.column == 4) {
return "80%";
}
}
return "60%";
},
isBtnClose() {
return this.dialogConfig.isBtnClose || this.dialogConfig.isBtnClose.value;
},
isBtnSave() {
return this.dialogConfig.isBtnSave || this.dialogConfig.isBtnSave.value;
}
},
methods: {
getDialogTitle(type) {
let title = this.$lang("btn_add");
switch (type) {
case "add":
title = this.$lang("btn_add");
break;
case "edit":
title = this.$lang("btn_edit");
break;
case "view":
title = this.$lang("btn_view");
break;
default:
title = type;
break;
}
return title;
},
handleSetRowColNum(val) {
const cardRowColSpan = 24 / val;
this.dialogConfig.setColumnFn(cardRowColSpan);
},
handleDialogClose() {
this.$emit("handleClose");
},
handleDialogSave() {
this.$emit("handleDialogSave");
}
}
};
</script>
<style scoped lang="scss">
.notfull-screen {
/deep/.el-dialog__body {
background-color: rgb(240, 242, 245);
padding: 5px;
max-height: 60vh;
overflow: auto;
}
}
.full-screen {
/deep/.el-dialog__body {
background-color: rgb(240, 242, 245);
padding: 5px;
height: calc(100vh - 110px);
overflow: auto;
}
}
.anji-card {
margin-bottom: 5px;
box-sizing: border-box;
padding: 0 20px;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
font-letiant: tabular-nums;
line-height: 1.5;
list-style: none;
font-feature-settings: "tnum";
position: relative;
background: #fff;
border-radius: 2px;
transition: all 0.3s;
}
.drawerContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.drawerMain {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 0 20px;
}
.footer {
border-top: 1px solid #eff0f3;
height: 66px;
display: flex;
justify-content: center;
align-items: center;
}
}
.addForm {
text-align: center;
}
.activeColor /deep/.el-form-item__label {
color: #5887fb;
}
</style>

72
report-ui/src/components/AnjiPlus/anji-fourLevel.vue
Unescape Escape View File

@ -0,0 +1,72 @@
<template>
<el-cascader ref="country" v-model="countryValue" size="mini" :props="props" :options="countryOptions" style="width: 100%" clearable @change="handleChange" />
</template>
<script>
import { postRequest } from '@/api/common.js'
export default {
props: {
value: null,
},
data() {
return {
countryValue: [],
props: {
value: 'value',
label: 'label',
children: 'children',
},
countryOptions: [],
}
},
watch: {
value(val) {
this.handleCountryEcho(val)
},
},
created() {
this.provinceFn()
this.handleCountryEcho(this.value)
},
methods: {
// 获取省市区
async provinceFn() {
const { code, data } = await postRequest()
if (code != 200) return
this.countryOptions = data
},
handleChange(value) {
if (value.length > 0) {
const countryNameArr = this.$refs.country.getCheckedNodes()[0].pathLabels
const countryObj = {
countryName: countryNameArr[0],
provinceName: countryNameArr[1],
cityName: countryNameArr[2],
areaName: countryNameArr[3],
countryCode: value[0],
provinceCode: value[1],
cityCode: value[2],
areaCode: value[3],
}
this.$emit('input', countryObj)
this.$emit('change', countryObj)
} else {
this.$emit('input', {})
this.$emit('change', {})
}
},
handleCountryEcho(val) {
if (val) {
this.countryValue = [val.countryCode, val.provinceCode, val.cityCode, val.areaCode || val.regionCode]
} else {
this.countryValue = []
}
},
},
}
</script>
<style lang="scss" scoped>
.con {
display: inline-block;
}
</style>

180
report-ui/src/components/AnjiPlus/anji-input.vue
Unescape Escape View File

@ -0,0 +1,180 @@
<template>
<div class="anji-input">
<el-input v-model="inputValue" type="number" :placeholder="placeholder" :disabled="disabled" clearable @change="change">
<template slot="append">
<el-dropdown @command="handleClick">
<el-button type="primary"> {{ systemUnit }}</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="item in SystemTimeConversionRadioGroup" :key="item.label" :command="item">{{ item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-input>
</div>
</template>
<script>
export default {
props: {
value: null,
placeholder: null,
unit: String,
defaultUnit: String,
disabled: Boolean,
},
data() {
return {
inputValue: '',
input: '',
unitObj: {},
systemUnit: '', // 单位
systemConversion: '', // 转换单位
systemKeepPoint: '', // 保留小数位
systemRounding: '', // 取整方案
SystemTimeConversionRadioGroup: [], // 单位选择
}
},
watch: {
value: function (val, oldVal) {
this.echoInputValue(val)
},
},
mounted() {
this.getLocalStorage()
this.getSystemData()
this.echoInputValue(this.value)
},
methods: {
getSystemData() {
const defaultUnit = this.defaultUnit
this.systemKeepPoint = this.getSystemKeepPoint()
this.systemRounding = this.getSystemRounding()
this.SystemTimeConversionRadioGroup = this.getSystemTimeConversionRadioGroup()
if (defaultUnit == undefined) {
this.systemUnit = this.getSystemUnit()
this.systemConversion = this.getSystemConversion()
} else {
this.systemUnit = defaultUnit
this.systemConversion = this.SystemTimeConversionRadioGroup.find((item) => item.label == this.systemUnit)['value']
}
},
// 获取单位
getSystemUnit() {
let unit = ''
for (const key in this.unitObj) {
if (key.toLowerCase().indexOf('conversiontext') != -1) {
unit = this.unitObj[key]
}
}
return unit
},
// 获取转换关系
getSystemConversion() {
let conversion = ''
for (const key in this.unitObj) {
if (key.toLowerCase().indexOf('conversion') != -1 && key.toLowerCase().indexOf('conversiontext') == -1 && key.toLowerCase().indexOf('conversionradiogroup') == -1) {
conversion = this.unitObj[key]
}
}
return conversion
},
// 获取保留几位小数
getSystemKeepPoint() {
let keepPoint = ''
for (const key in this.unitObj) {
if (key.toLowerCase().indexOf('keeppoint') != -1) {
keepPoint = this.unitObj[key]
}
}
return keepPoint
},
// 获取怎么取整
getSystemRounding() {
let rounding = ''
for (const key in this.unitObj) {
if (key.toLowerCase().indexOf('pointrounding') != -1) {
rounding = this.unitObj[key]
}
}
return rounding
},
// 获取各类型的全部单位
getSystemTimeConversionRadioGroup() {
let radionGroup = ''
for (const key in this.unitObj) {
if (key.toLowerCase().indexOf('radiogroup') != -1) {
radionGroup = this.unitObj[key]
}
}
return radionGroup
},
handleClick(command) {
this.systemUnit = command.label
this.systemConversion = command.value
this.echoInputValue(this.value)
},
// 从本地获取数据
getLocalStorage() {
const localstorageData = this.getSettingByName('unit_conversion')
const unitObj = {}
for (const key in localstorageData) {
if (key.toLowerCase().indexOf(this.unit.toLowerCase()) != -1) {
unitObj[key] = localstorageData[key]
}
}
this.unitObj = unitObj
},
change(val) {
if (val === null || val === '') {
this.$emit('input', val)
this.$emit('change', val)
return
}
this.inputValue = val
if (this.systemRounding != undefined) {
let newVal
if (this.systemRounding == 'up') {
newVal = this.upFixed(val, this.systemKeepPoint)
}
if (this.systemRounding == 'down') {
newVal = this.downFixed(val, this.systemKeepPoint)
}
this.inputValue = newVal
const value = (newVal || val) * this.systemConversion
this.$emit('input', value)
this.$emit('change', value)
} else {
const value = val * this.systemConversion
this.inputValue = val
this.$emit('input', value)
this.$emit('change', value)
}
},
echoInputValue(val) {
if (val === undefined || val === '') {
this.inputValue = ''
} else {
this.inputValue = val / this.systemConversion
}
},
// 向上取整
upFixed(num, fix) {
return Math.ceil(num * Math.pow(10, fix)) / Math.pow(10, fix).toFixed(fix)
},
// 向下取整
downFixed(num, fix) {
return Math.floor(num * Math.pow(10, fix)) / Math.pow(10, fix).toFixed(fix)
},
},
}
</script>
<style lang="less" scoped>
// /deep/.el-input-group__append {
// padding: 0 5px;
// }
/deep/.el-input__suffix {
padding: 0 6px;
}
.anji-input /deep/ .el-input__inner {
padding-right: 0 !important;
}
</style>

132
report-ui/src/components/AnjiPlus/anji-select.vue
Unescape Escape View File

@ -25,6 +25,8 @@
<el-select <el-select
v-model="selectValue" v-model="selectValue"
:clearable="clearable" :clearable="clearable"
:allow-create="!!allowCreate"
:default-first-option="!!allowCreate"
:collapse-tags="collapseTags" :collapse-tags="collapseTags"
filterable filterable
class="filter-item" class="filter-item"
@ -39,29 +41,39 @@
v-for="(item, index) in options" v-for="(item, index) in options"
:key="index" :key="index"
:label="getItemLabel(item, label)" :label="getItemLabel(item, label)"
:value="item[option]" :value="item[option] + ''"
:disabled="isDisabledOption(item)" :disabled="isDisabledOption(item)"
> >
<template v-if="mergeLabel"> <template v-if="mergeLabel">
<span style="float: left">{{ getItemLabel(item, label) }}</span> <span style="float: left">{{ getItemLabel(item, label) }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ <span
item[option] v-if="!dictCode && !localOptions"
}}</span> style="float: right; color: #8492a6; font-size: 13px"
>{{ item[option] }}</span
>
</template> </template>
</el-option> </el-option>
<el-option v-if="totalPage > 1" label="搜索更多" value="" disabled /> <el-option v-if="totalPage >= 1" value="" disabled>{{
$lang("GLOBAL.placeholder_select_remote_search")
}}</el-option>
</el-select> </el-select>
</div> </div>
</template> </template>
<script> <script>
import request from "@/utils/request"; import request from "@/utils/request";
import { getStorageItem } from "@/utils/storage";
export default { export default {
props: { props: {
dictCode: null, // 当传入dictCode时，可以不用传递url dictCode: null, // 当传入dictCode时，可以不用传递url
url: null, url: null,
method: null, allowCreate: {
type: Boolean,
default: false
},
method: {
type: String,
default: "get"
},
queryParam: { queryParam: {
type: Object, type: Object,
default: () => { default: () => {
@ -91,7 +103,7 @@ export default {
}, },
mergeLabel: { mergeLabel: {
type: Boolean, type: Boolean,
default: false default: true
}, },
// 禁用的下拉选项 // 禁用的下拉选项
disabledOptions: { disabledOptions: {
@ -117,10 +129,13 @@ export default {
computed: { computed: {
// 根据dictCode和url拼出最终的请求url // 根据dictCode和url拼出最终的请求url
requestUrl() { requestUrl() {
if (this.localOptions) {
return null;
}
if (this.url != null && this.url.trim() != "") { if (this.url != null && this.url.trim() != "") {
if (this.url.indexOf("?") > 0) { if (this.url.indexOf("?") > 0) {
if (this.option == null) { if (this.option == null) {
console.log("url-" + this.url.substring(this.url.indexOf("?"))); // console.log('url-' + this.url.substring(this.url.indexOf('?')))
} }
if (this.label == null) { if (this.label == null) {
} }
@ -134,20 +149,39 @@ export default {
} }
}, },
watch: { watch: {
value: function(val, oldVal) { dictCode(val) {
if (this.multiple != null) { if (val) {
if (!this.value) { this.queryData();
this.selectValue = []; }
} else { },
this.selectValue = this.value; // 监听接口地址变化时，触发刷新请求
localOptions(val) {
this.options = val;
},
value: {
handler(val) {
if (
typeof val == "string" &&
this.url != null &&
this.url.trim() != ""
) {
this.remoteQuery(val);
} }
} else { if (this.multiple != null) {
if (this.value != null && this.value != undefined) { if (!this.value) {
this.selectValue = this.value; this.selectValue = [];
} else {
this.selectValue = this.value;
}
} else { } else {
this.selectValue = ""; if (this.value != null && this.value != undefined) {
this.selectValue = this.value + "";
} else {
this.selectValue = "";
}
} }
} },
immediate: true
}, },
url() { url() {
setTimeout(() => { setTimeout(() => {
@ -160,7 +194,7 @@ export default {
this.selectValue = this.value; this.selectValue = this.value;
} else { } else {
if (this.value != null) { if (this.value != null) {
this.selectValue = this.value; this.selectValue = this.value + "";
} }
} }
}, },
@ -181,17 +215,17 @@ export default {
) { ) {
return false; return false;
} }
var currentOptionVal = option[this.option]; let currentOptionVal = option[this.option];
return this.disabledOptions.indexOf(currentOptionVal) >= 0; return this.disabledOptions.indexOf(currentOptionVal) >= 0;
}, },
change(value) { change(value) {
if (value === "") { if (value === "") {
value = null; value = "";
} }
this.$emit("input", value); this.$emit("input", value);
// 根据当前值，找出对应的选项 // 根据当前值，找出对应的选项
var optionItem = this.options.find(item => item[this.option] == value); let optionItem = this.options.find(item => item[this.option] == value);
this.$emit("change", value, optionItem); this.$emit("change", value, optionItem);
}, },
// 根据用户配置的label，生成对应的标签 // 根据用户配置的label，生成对应的标签
@ -199,34 +233,38 @@ export default {
if (label.indexOf("${") < 0 && label.indexOf("}" < 0)) { if (label.indexOf("${") < 0 && label.indexOf("}" < 0)) {
return item[label]; return item[label];
} }
var reg = /\$\{[a-zA-Z0-9]*\}/g; let reg = /\$\{[a-zA-Z0-9]*\}/g;
var list = label.match(reg); let list = label.match(reg);
// ["${id}", "${text}"] // ["${id}", "${text}"]
var result = label; let result = label;
for (var i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
var sub = list[i]; let sub = list[i];
var key = sub.replace("${", "").replace("}", ""); let key = sub.replace("${", "").replace("}", "");
result = result.replace(sub, item[key]); result = result.replace(sub, item[key]);
} }
return result; return result;
}, },
// 从本地localStorage取 gaeaDict // 从本地localStorage取 gaeaDict
getOptionsFromLocalStorage() { getOptionsFromLocalStorage() {
var dicts = getStorageItem("gaeaDict"); let dicts = JSON.parse(localStorage.getItem("gaeaDict"));
var options = []; let options = [];
if (!dicts.hasOwnProperty(this.dictCode)) { if (!dicts.hasOwnProperty(this.dictCode)) {
return []; return [];
} }
var dictItems = dicts[this.dictCode]; let dictItems = dicts[this.dictCode];
for (var i = 0; i < dictItems.length; i++) { for (let i = 0; i < dictItems.length; i++) {
var dictItem = dictItems[i]; let dictItem = dictItems[i];
options.push({ id: dictItem.id, text: dictItem.text }); options.push({
id: dictItem.id.toString(),
text: dictItem.text,
extend: dictItem.extend
});
} }
return options; return options;
}, },
queryData() { queryData() {
// 所有从本地localStorage取，因为在App.vue中已经请求远程保存到本地了 // 所有从本地localStorage取，因为在App.vue中已经请求远程保存到本地了
var options = this.getOptionsFromLocalStorage(); let options = this.getOptionsFromLocalStorage();
if (this.isNotBlank(options)) { if (this.isNotBlank(options)) {
this.options = options; this.options = options;
return; return;
@ -245,7 +283,7 @@ export default {
} }
}, },
queryDataByGet(keyword) { queryDataByGet(keyword) {
var param = this.deepClone(this.queryParam); let param = this.deepClone(this.queryParam);
if (this.isNotBlank(keyword)) { if (this.isNotBlank(keyword)) {
param["keyword"] = keyword; param["keyword"] = keyword;
} }
@ -255,11 +293,12 @@ export default {
headers: { noPrompt: true }, headers: { noPrompt: true },
params: param params: param
}).then(response => { }).then(response => {
// console.log(response)
this.setOptions(response.data); this.setOptions(response.data);
}); });
}, },
queryDataByPost(keyword) { queryDataByPost(keyword) {
var param = this.deepClone(this.queryParam); let param = this.deepClone(this.queryParam);
if (this.isNotBlank(keyword)) { if (this.isNotBlank(keyword)) {
param["keyword"] = keyword; param["keyword"] = keyword;
} }
@ -299,9 +338,9 @@ export default {
this.options = resData.records; this.options = resData.records;
}, },
remoteQuery(keyword) { remoteQuery(keyword) {
if (this.isBlank(keyword)) { // if (this.isBlank(keyword)) {
return; // return
} // }
setTimeout(() => { setTimeout(() => {
if ( if (
this.method != null && this.method != null &&
@ -316,8 +355,11 @@ export default {
} }
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
.filter-item { .el-select-dropdown__item.selected {
width: 100%; text-align: center;
}
.el-select-dropdown__item.is-disabled {
text-align: center;
} }
</style> </style>

85
report-ui/src/components/AnjiPlus/anji-tree.vue
Unescape Escape View File

@ -6,90 +6,107 @@
!--> !-->
<template> <template>
<div> <div>
<el-input class="filterInput" placeholder="搜索" v-model="filterText" v-if="enableFilter" /> <el-input
class="filterInput"
placeholder="搜索"
v-model="filterText"
v-if="enableFilter"
/>
<div class="title">{{ labelName }}</div> <div class="title">{{ labelName }}</div>
<el-tree ref="table_tree" :data="treeData" node-key="id" :default-expand-all="isOpen" :expand-on-click-node="false" :filter-node-method="filterNode" @node-click="nodeClick" @check="checkedEvent" /> <el-tree
ref="table_tree"
:data="treeData"
node-key="id"
:default-expand-all="isOpen"
:expand-on-click-node="false"
:filter-node-method="filterNode"
@node-click="nodeClick"
@check="checkedEvent"
/>
</div> </div>
</template> </template>
<script> <script>
import request from '@/utils/request' import request from "@/utils/request";
export default { export default {
components: {}, components: {},
props: { props: {
url: { url: {
type: [String], type: [String],
default: () => { default: () => {
return '' return "";
}, }
}, },
id: { id: {
type: [String], type: [String],
default: () => { default: () => {
return 'id' return "id";
}, }
}, },
label: { label: {
type: [String], type: [String],
default: () => { default: () => {
return '' return "";
}, }
}, },
value: { value: {
type: [String], type: [String],
default: () => { default: () => {
return '' return "";
}, }
}, },
labelName: String, labelName: String,
enableFilter: Boolean, enableFilter: Boolean,
isOpen: Boolean, isOpen: Boolean
}, },
data() { data() {
return { return {
filterText: '', filterText: "",
treeData: [], treeData: []
} };
}, },
computed: {}, computed: {},
watch: { watch: {
filterText(val) { filterText(val) {
this.$refs.table_tree.filter(val) this.$refs.table_tree.filter(val);
}, }
}, },
mounted() { mounted() {
this.queryData() this.queryData();
}, },
methods: { methods: {
filterNode(val, data) { filterNode(val, data) {
if (!val) return true if (!val) return true;
return data.label.indexOf(val) !== -1 return data.label.indexOf(val) !== -1;
}, },
queryData() { queryData() {
if (this.isBlank(this.url)) { if (this.isBlank(this.url)) {
return return;
} }
request({ request({
url: this.url, url: this.url,
method: 'GET', method: "GET"
}).then((response) => { }).then(response => {
if (response.code != '200') { if (response.code != "200") {
return return;
} }
this.treeData = Object.prototype.toString.call(response.data) == '[object Array]' ? response.data : response.data.tree|| response.data.menuTree this.treeData =
}) Object.prototype.toString.call(response.data) == "[object Array]"
? response.data
: response.data.tree || response.data.menuTree;
});
}, },
// 点击tree节点时 将tree的id作为上级机构代码 查询列表 // 点击tree节点时 将tree的id作为上级机构代码 查询列表
nodeClick(node) { nodeClick(node) {
this.$emit('input', node['id']) this.$emit("input", node["id"]);
this.$emit('node-click', node['id']) this.$emit("node-click", node["id"]);
}, },
checkedEvent(item, evt) { checkedEvent(item, evt) {
var ids = evt.checkedKeys.toString() let ids = evt.checkedKeys.toString();
this.$emit('input', ids) this.$emit("input", ids);
}, }
}, }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

146
report-ui/src/components/AnjiPlus/anji-upload.vue
Unescape Escape View File

@ -13,7 +13,43 @@
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
:class="fileList && fileList.length >= limit ? 'hide_box' : ''" :class="fileList && fileList.length >= limit ? 'hide_box' : ''"
> >
<i class="el-icon-plus" /> <i slot="default" class="el-icon-plus" />
<div slot="file" slot-scope="{ file }" class="imgBox">
<img
v-if="typeImgShow(file)"
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<svg-icon
v-else-if="typePdfShow(file)"
icon-class="PDF"
class="iconFont"
/>
<svg-icon
v-else-if="typeExcelShow(file)"
icon-class="Excel"
class="iconFont"
/>
<span class="el-upload-list__item-actions">
<span
v-if="typeImgShow(file)"
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in" />
</span>
<span
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download" />
</span>
<span class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete" />
</span>
</span>
</div>
</el-upload> </el-upload>
<el-dialog :visible.sync="dialogVisibleImageUpload" :modal="false"> <el-dialog :visible.sync="dialogVisibleImageUpload" :modal="false">
<img width="100%" :src="imageUploadUrl" alt="" /> <img width="100%" :src="imageUploadUrl" alt="" />
@ -33,19 +69,25 @@ export default {
viewUrl: { viewUrl: {
type: String, type: String,
default: () => { default: () => {
return process.env.BASE_API + "/file/download/"; return "";
} }
}, },
limit: { limit: {
type: Number, type: Number,
default: () => { default: () => {
return 1; return 3;
} }
}, },
value: { value: {
type: Array,
default: () => {
return [];
}
},
uploadType: {
type: String, type: String,
default: () => { default: () => {
return ""; return "img";
} }
} }
}, },
@ -53,15 +95,16 @@ export default {
return { return {
imageUploadUrl: "", imageUploadUrl: "",
dialogVisibleImageUpload: false, dialogVisibleImageUpload: false,
fileList: [] fileList: [],
modeString: ""
}; };
}, },
computed: { computed: {
requestUrl() { requestUrl() {
if (this.upLoadUrl != null && this.upLoadUrl.trim() != "") { if (this.upLoadUrl != null && this.upLoadUrl.trim() != "") {
return process.env.BASE_API + this.upLoadUrl; return process.env.VUE_APP_BASE_API + this.upLoadUrl;
} else { } else {
return process.env.BASE_API + "/file/upload"; return process.env.VUE_APP_BASE_API + "/meta/file/upload";
} }
}, },
headers() { headers() {
@ -73,37 +116,80 @@ export default {
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
this.echoUpload(this.value); this.echoUpload(val);
}, },
immediate: true immediate: true
} }
}, },
mounted() { mounted() {},
this.echoUpload(this.value);
},
methods: { methods: {
// 图片
typeImgShow(file) {
if (!file.fileType) return;
const fileType = file.fileType.toLowerCase();
if (
fileType == "jpg" ||
fileType == "png" ||
fileType == "gif" ||
fileType == "icon"
) {
return true;
}
return false;
},
// pdf
typePdfShow(file) {
if (!file.fileType) return;
const fileType = file.fileType.toLowerCase();
if (fileType == "pdf") {
return true;
}
return false;
},
// excel
typeExcelShow(file) {
if (!file.fileType) return;
const fileType = file.fileType.toLowerCase();
if (fileType == "xlsx" || fileType == "xls" || fileType == "csv") {
return true;
}
return false;
},
handleRemove(file) { handleRemove(file) {
this.fileList = []; const fileList = [];
this.fileList.forEach(el => {
if (el.fileId != file.fileId) {
fileList.push(el);
}
});
this.fileList = fileList;
this.change(); this.change();
}, },
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
this.imageUploadUrl = file.url; this.imageUploadUrl = file.url;
this.dialogVisibleImageUpload = true; this.dialogVisibleImageUpload = true;
}, },
// 下载
handleDownload(file) {
window.open(file.url);
},
// 上传成功的回调 // 上传成功的回调
handleSuccess(response, file, fileList) { handleSuccess(response, file, fileList) {
console.log(fileList);
if (response.code != 200) { if (response.code != 200) {
this.$message.error("上传失败"); this.$message.error("上传失败");
return; return;
} }
this.fileList.push({ this.fileList.push({
url: file.response.data.urlPath url: file.response.data.urlPath,
fileId: file.response.data.fileId,
fileType: file.response.data.fileType
}); });
this.change(); this.change();
}, },
// 回传出去 // 回传出去
change() { change() {
const fileList = (this.fileList.length > 0 && this.fileList[0].url) || ""; const fileList = this.fileList;
this.$emit("input", fileList); this.$emit("input", fileList);
this.$emit("change", fileList); this.$emit("change", fileList);
}, },
@ -113,7 +199,18 @@ export default {
.split(".") .split(".")
[file.name.split(".").length - 1].toLowerCase(); [file.name.split(".").length - 1].toLowerCase();
// .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi // .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi
const extensionList = ["png", "jpg", "gif", "icon"]; const extensionList = [
"png",
"jpg",
"gif",
"icon",
"pdf",
"xlsx",
"xls",
"csv",
"mp4",
"avi"
];
if (extensionList.indexOf(extension) < 0) { if (extensionList.indexOf(extension) < 0) {
this.$message.warning("请上传正确的格式文件"); this.$message.warning("请上传正确的格式文件");
return false; return false;
@ -122,11 +219,20 @@ export default {
}, },
// 回显 // 回显
echoUpload(val) { echoUpload(val) {
if (!val) { if (val && val.length > 0) {
this.fileList = []; const fileList = [];
for (let i = 0; i < val.length; i++) {
const obj = {};
obj.url = val[i].urlPath || val[i].url;
obj.fileType = val[i].fileType;
obj.fileId = val[i].fileId;
fileList.push(obj);
}
fileList.forEach((el, index) => {
this.$set(this.fileList, index, el);
});
} else { } else {
const list = [{ url: val }]; this.fileList = [];
this.fileList = list;
} }
} }
} }
@ -142,7 +248,7 @@ export default {
width: 60px; width: 60px;
height: 60px; height: 60px;
} }
.hide_box /deep/ .el-upload--picture-card { .hide_box .el-upload--picture-card {
display: none; display: none;
} }
.el-upload-list__item { .el-upload-list__item {

808
report-ui/src/components/AnjiPlus备份/anji-crud/anji-crud.vue
Unescape Escape View File

@ -0,0 +1,808 @@
<template>
<div :class="[hasTreeFieldInQueryForm ? 'page-container' : 'app-container']">
<div v-if="hasTreeFieldInQueryForm" class="left-container">
<AnjiTree
ref="queryFormTree"
v-model.trim="queryParams[queryFormTreeField.field]"
:is-open="queryFormTreeField.anjiTreeOption.isOpen"
:enable-filter="queryFormTreeField.anjiTreeOption.enableFilter"
:label-name="queryFormTreeField.label"
:url="queryFormTreeField.anjiTreeOption.url"
@node-click="handleTreeNodeCheck"
/>
</div>
<div class="right-container">
<!-- 查询表单开始 -->
<el-form
ref="formSearch"
:model="queryParams"
label-width="100px"
v-permission="option.buttons.query.permission"
>
<el-row>
<el-col
v-for="(item, index) in queryFormFieldExcludeTree"
:key="item.field"
:span="queryFormFieldSpan(item)"
>
<el-form-item
v-if="index <= 2 || (index > 2 && queryParams.showMoreSearch)"
:label="item.label"
:rules="item.rules"
:prop="item.field"
>
<!-- 输入框 -->
<el-input
v-if="
item.inputType == 'input' || item.inputType == 'input-number'
"
v-model.trim="queryParams[item.field]"
:placeholder="item.placeholder || '请输入'"
:clearable="item.clearable !== false"
:disabled="item.disabled"
@change="value => queryFormChange(item.field, value)"
/>
<!-- 开关 -->
<el-switch
v-else-if="item.inputType == 'switch'"
v-model.trim="queryParams[item.field]"
:disabled="item.disabled"
:active-value="item.switchOption.disableValue"
:inactive-value="item.switchOption.enableValue"
active-color="#5887fb"
inactive-color="#ccc"
@change="value => queryFormChange(item.field, value)"
/>
<!-- 下拉框 -->
<anji-select
v-else-if="item.inputType == 'anji-select'"
v-model.trim="queryParams[item.field]"
:multiple="item.anjiSelectOption.multiple"
:dict-code="item.anjiSelectOption.dictCode"
:url="item.anjiSelectOption.url"
:method="item.anjiSelectOption.method"
:query-param="item.anjiSelectOption.queryParam"
:option="item.anjiSelectOption.option"
:label="item.anjiSelectOption.label"
:disabled-options="item.anjiSelectOption.disabledOptions"
:disabled="item.disabled"
:merge-label="item.anjiSelectOption.mergeLabel"
@change="value => queryFormChange(item.field, value)"
/>
<!-- 日期时间框 -->
<el-date-picker
v-else-if="item.inputType.indexOf('date') >= 0"
v-model="queryParams[item.field]"
style="width: 100%"
:placeholder="item.placeholder || '请选择'"
:type="item.inputType"
:clearable="item.clearable !== false"
@change="value => queryFormChange(item.field, value)"
/>
<!-- 待扩展的表单类型，请自行扩展 -->
<el-input
v-else
placeholder="组件不支持此类型表单请至组件内部自行扩展"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="6" style="text-align: center">
<el-button type="primary" @click="handleQueryForm('query')"
>查询</el-button
>
<el-button type="danger" @click="handleResetForm()">重置</el-button>
<a
v-if="queryFormFieldExcludeTree.length > 3"
style="margin-left: 8px"
@click="handleToggleMoreSearch"
>
{{ queryParams.showMoreSearch == true ? "收起" : "展开" }}
<i
:class="
queryParams.showMoreSearch
? 'el-icon-arrow-up'
: 'el-icon-arrow-down'
"
/>
</a>
</el-col>
</el-row>
</el-form>
<!-- 查询表单结束 -->
<!-- 批量操作 -->
<slot name="buttonLeftOnTable" />
<el-button
v-if="
option.buttons.add.isShow == undefined
? true
: option.buttons.add.isShow
"
v-permission="option.buttons.add.permission"
type="primary"
icon="el-icon-plus"
@click="handleOpenEditView('add')"
>新增</el-button
>
<el-button
v-if="
option.buttons.delete.isShow == undefined
? true
: option.buttons.delete.isShow
"
v-permission="option.buttons.delete.permission"
:disabled="disableBatchDelete"
type="danger"
icon="el-icon-delete"
@click="handleDeleteBatch()"
>删除</el-button
>
<!-- 表格开始 -->
<el-table
class="anji_curd_table"
:data="records"
border
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
>
<!--多选-->
<el-table-column fixed type="selection" width="50" align="center" />
<!--隐藏列-->
<el-table-column v-if="tableExpandColumns.length > 0" type="expand">
<template slot-scope="scope">
<p
v-for="item in tableExpandColumns"
:key="item.field"
class="table-expand-item"
>
<span class="titel"> {{ item.label }}: </span>
<span>{{ scope.row[item.field] }}</span>
</p>
</template>
</el-table-column>
<!--序号-->
<el-table-column label="序号" min-width="50" align="center">
<template slot-scope="scope">
{{
queryParams.pageSize * (queryParams.pageNumber - 1) +
scope.$index +
1
}}
</template>
</el-table-column>
<template v-for="item in option.columns">
<el-table-column
v-if="item.tableHide != true && item.columnType != 'expand'"
:key="item.field"
:prop="item.field"
:label="fieldLabel(item)"
:min-width="item.minWidth || 110"
:sortable="item.sortable"
:show-overflow-tooltip="true"
align="center"
>
<template slot-scope="scope">
<div v-if="item.columnType == 'imgPreview'">
<!-- 图片缩略图-->
<el-image
style="width: 25%; height: 50%"
fit="contain"
:src="scope.row[item.field]"
:preview-src-list="[scope.row[item.field]]"
/>
</div>
<div v-else>
<span v-if="item.inputType == 'switch' && !item.colorStyle">
<el-switch
v-model.trim="scope.row[item.field]"
:active-value="1"
:inactive-value="0"
active-color="#5887fb"
inactive-color="#ccc"
@change="switchChange(scope.row, item.switchOption)"
/>
</span>
<!-- 带单位 -->
<span v-else-if="item.inputType == 'anji-input'">{{
fieldValueByAnjiInput(scope.row[item.field], item)
}}</span>
<!--表格 a 合并 b上-->
<span v-else-if="item.mergeColumn"
>{{ scope.row[item.field] }}({{
scope.row[item.mergeColumn]
}})</span
>
<!-- 没有单位 -->
<span
v-else-if="item.colorStyle"
:class="item.colorStyle[scope.row[item.editField]]"
>{{ fieldValueByRowRenderer(scope.row, item) }}</span
>
<span v-else>{{
fieldValueByRowRenderer(scope.row, item)
}}</span>
<!-- 正常展示模式
<div v-if="!item.custom">
是第一列数据 && 需要高亮字段不为false 高亮并且可以点击
<span v-if="!index && item.operate !== false" class="view" @click="handleOpenEditView('view', scope.row)">{{ scope.row[item.field] }}</span>
<span v-else>{{ scope.row[item.field] }}</span>
</div>
-->
<!-- 自定义展示数据
<div v-else v-html="item.renderer(scope.row)" />-->
</div>
</template>
</el-table-column>
</template>
<!--操作栏-->
<el-table-column
align="center"
fixed="right"
label="操作"
:width="
option.buttons.customButton &&
option.buttons.customButton.operationWidth
? option.buttons.customButton.operationWidth
: 100
"
>
<template slot-scope="scope">
<slot name="edit" :msg="scope.row" />
<el-button
v-if="
(option.buttons.query.isShow == undefined
? true
: option.buttons.query.isShow) &&
hasPermission(option.buttons.edit.permission) == false
"
type="text"
size="small"
@click="handleOpenEditView('view', scope.row)"
v-permission="option.buttons.query.permission"
>查看</el-button
>
<el-button
v-if="
option.buttons.edit.isShow == undefined
? true
: option.buttons.edit.isShow
"
type="text"
size="small"
@click="handleOpenEditView('edit', scope.row)"
v-permission="option.buttons.edit.permission"
>编辑</el-button
>
<el-button
v-if="
hasRowCustomButton == false &&
option.buttons.delete.isShow == undefined
? true
: option.buttons.edit.isShow
"
type="text"
size="small"
@click="handleDeleteBatch(scope.row)"
v-permission="option.buttons.delete.permission"
>删除</el-button
>
<el-dropdown v-if="hasRowCustomButton" trigger="click">
<span class="el-dropdown-link">
更多<i class="el-icon-caret-bottom el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item class="clearfix">
<slot name="rowButton" :msg="scope.row" />
<el-button
v-if="
option.buttons.delete.isShow == undefined
? true
: option.buttons.edit.isShow
"
type="text"
size="small"
@click="handleDeleteBatch(scope.row)"
v-permission="option.buttons.delete.permission"
>删除</el-button
>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
v-show="total > 0"
background
:current-page.sync="queryParams.pageNumber"
:page-sizes="$pageSizeAll"
:page-size="queryParams.pageSize"
layout="total, prev, pager, next, jumper, sizes"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<div>
<slot name="tableSelectionBtn" :selection="checkRecords" />
</div>
</div>
<!-- 表格结束 -->
<EditDialog
ref="edit"
:option="option"
:model-type="editDialogModelType"
:visible="editDialogOpen"
:row-data="editDialogRowData"
@closeEvent="editDialogClosedEvent"
>
<template v-slot:customCard>
<slot name="cardInEditPage" />
</template>
<template slot="editBtn" slot-scope="scope">
<slot name="editBtnPage" :rowData="scope" />
</template>
</EditDialog>
</div>
<slot name="pageSection" />
</div>
</template>
<script>
import AnjiTree from "@/components/AnjiPlus/anji-tree.vue";
import EditDialog from "./edit";
import request from "@/utils/request";
export default {
components: {
EditDialog,
AnjiTree
},
props: {
option: {
require: true,
type: Object,
default: () => {
return {
// 查询表单条件
queryFormFields: [],
// 按钮
buttons: {
query: {},
edit: {},
delete: {},
add: {}
},
// 表格列
columns: [],
queryFormChange: (fileName, val) => {}
};
}
}
},
data() {
return {
// 查询表单提交的值
queryParams: {
showMoreSearch: false, // 是否展开更多搜索条件
pageNumber: 1,
pageSize: 10,
order: "",
sort: ""
},
checkRecords: [], // 表格中当前选中的记录
records: [], // 接口返回的记录列表
total: 0, // 接口返回的总条数
// 编辑详情弹框
editDialogOpen: false, // 新建时主动打开编辑弹框
editDialogRowData: {}, // 编辑时的主键
editDialogModelType: "view", // 编辑 查看
hasRowCustomButton: false // 除了编辑删除外，还有自定义的行按钮
};
},
computed: {
// 左侧树形查询条件
queryFormTreeField() {
var treeField = this.option.queryFormFields.find(
item => item["inputType"] == "anji-tree"
);
return treeField;
},
// 查询条件里是否有树形控件
hasTreeFieldInQueryForm() {
return this.isNotBlank(this.queryFormTreeField);
},
// 不包含树形控件的查询条件
queryFormFieldExcludeTree() {
var treeFields = this.option.queryFormFields.filter(
item => item["inputType"] != "anji-tree"
);
return treeFields;
},
// 主键的列名
primaryKeyFieldName() {
var primaryKey = this.option.columns.find(
item => item["primaryKey"] == true
);
if (primaryKey != null) {
return primaryKey["field"];
} else {
return null;
console.warn(
"在columns中查找primaryKey=true失败，会导致查询详情和删除失败"
);
}
},
// 表格中可展开的列
tableExpandColumns() {
var expandColumns = this.option.columns.filter(
item => item["columnType"] == "expand"
);
return expandColumns;
},
// 是否可以批量删除
disableBatchDelete() {
return this.checkRecords.length <= 0;
}
},
created() {
// 为查询框中所有input加上默认值
this.option.queryFormFields.forEach(item => {
// 动态添加属性
this.$set(this.queryParams, item.field, item.defaultValue || null);
});
// 查询列表
this.handleQueryForm("query");
this.queryFormChange();
},
mounted() {
if (this.$scopedSlots["rowButton"] != null) {
this.hasRowCustomButton = true;
} else {
this.hasRowCustomButton = false;
}
},
methods: {
queryFormFieldSpan(item) {
// console.log(item)
if (item.span != null) {
return item.span;
} else {
return 6;
}
// let rowLength = this.option.queryFormFields.length;
// console.log(rowLength, "ss")
// console.log(rowLength % 3)
// if (rowLength <= 3) {
// return 6
// }
// else if (rowLength % 3 == 0) {
// return 8
// } else if (rowLength > 6) {
// return 8
// }
},
// 切换更多搜索条件
handleToggleMoreSearch() {
this.queryParams.showMoreSearch = !this.queryParams.showMoreSearch;
},
// 列上排序切换
handleSortChange(column) {
// {column: {…}, prop: "orgCode", order: "ascending"}
if (column == null || column.prop == null) {
console.warn("排序字段名prop为空，无法排序");
return;
}
var sort = column.prop; // 列表查询默认排序列
var order = column.order == "ascending" ? "ASC" : "DESC";
this.queryParams["sort"] = sort;
this.queryParams["order"] = order;
this.handleQueryForm("query");
},
// 查询按钮
handleQueryForm(from) {
// 如果是点查询按钮，把树的查询属性去掉
if (from == "query") {
if (this.hasTreeFieldInQueryForm) {
delete this.queryParams[this.queryFormTreeField.field];
}
}
// 如果是点树查询，把查询区里的属性去掉
if (from == "tree") {
if (this.hasTreeFieldInQueryForm) {
var treeVal = this.queryParams[this.queryFormTreeField.field];
this.queryParams = {
pageNumber: 1,
pageSize: 10
};
this.queryParams[this.queryFormTreeField.field] = treeVal;
}
}
// 默认的排序
if (
this.isBlank(this.queryParams["order"]) &&
this.isNotBlank(this.option.buttons.query.order)
) {
this.queryParams["sort"] = this.option.buttons.query.sort;
this.queryParams["order"] = this.option.buttons.query.order;
}
this.queryParams.pageNumber = 1;
this.handleQueryPageList();
},
// 列表查询
async handleQueryPageList() {
var params = this.queryParams;
// 将特殊参数值urlcode处理 var params = this.urlEncodeObject(this.queryParams, 'order,sort')
const { data, code } = await this.option.buttons.query.api(params);
if (code != "200") return;
this.records = data.records;
this.total = data.total;
},
// 重置
handleResetForm() {
this.queryParams = {
pageNumber: 1,
pageSize: 10
};
// this.$refs['queryForm'].resetFields()
// this.records = []
// this.total = 0
},
// 树形查询条件点击回调
handleTreeNodeCheck() {
this.handleQueryForm("tree");
// 为新建页面的对应属性值，绑定上对应的默认值
var treeFieldName = this.queryFormTreeField["field"];
for (var i = 0; i < this.option.columns.length; i++) {
var item = this.option.columns[i];
if (
item["editField"] == treeFieldName ||
item["field"] == treeFieldName
) {
this.$set(
this.option.columns[i],
"defaultValue",
this.queryParams[treeFieldName]
);
break;
}
}
},
// 编辑和查看操作
handleOpenEditView(modelType, row) {
if (modelType == "view" || modelType == "edit") {
this.editDialogRowData = row;
}
this.editDialogModelType = modelType;
if (modelType == "add") {
// 新增模式，不需要查询数据详情，直接打开
this.editDialogOpen = true;
}
const obj = {
type: modelType,
value: row
};
this.$emit("handleCustomValue", obj);
},
// 弹框被关闭时的回调事件
editDialogClosedEvent(value) {
// 把列表页中弹框打开标记改成已关闭
this.editDialogOpen = false;
// 关闭弹出框时，如果有树，刷新下
if (
this.hasTreeFieldInQueryForm &&
this.$refs.queryFormTree != null &&
!value
) {
this.$refs.queryFormTree.queryData();
}
this.handleQueryPageList();
// 关闭时 清空表单的验证规则
this.$refs.edit.$refs.mainForm.$refs.editForm.resetFields();
},
// 批量删除
handleDeleteBatch(row) {
var ids = [];
if (row != null) {
ids.push(row[this.primaryKeyFieldName]); // 删除指定的行
} else {
// 批量删除选中的行
ids = this.checkRecords.map(item => item[this.primaryKeyFieldName]);
}
this.$confirm("删除确认", "确认要删除吗?", {
type: "warning",
confirmButtonClass: "delete_sure",
cancelButtonClass: "el-button--danger is-plain"
})
.then(() => {
this.option.buttons.delete.api(ids).then(res => {
// {code: "200", message: "操作成功", data: true}
this.checkRecords = [];
// 关闭弹出框时，如果有树，刷新下
if (
this.hasTreeFieldInQueryForm &&
this.$refs.queryFormTree != null
) {
this.$refs.queryFormTree.queryData();
}
this.handleQueryPageList();
});
})
.catch(e => {
e;
});
},
// 选择项改变时
handleSelectionChange(val) {
this.checkRecords = val;
},
// 页码改变
handleCurrentChange(pageNumber) {
this.queryParams.pageNumber = pageNumber;
this.handleQueryPageList();
},
// 每页size改变时
handleSizeChange(val) {
this.queryParams.pageNumber = 1;
this.queryParams.pageSize = val;
this.handleQueryPageList();
},
// table列文件缩略图
thumbnailUrl(row, field) {
// return 'http://10.108.3.123:9090/tms/file/download/79ee7e8b-2a9a-4142-b06d-706ac8089205'
// if (row.filePath) {
// if (row.filePath.endsWith('xlsx') || row.filePath.endsWith('xls')) {
// return fileExcel;
// } else if (row.filePath.endsWith('pdf')) {
// return filePdf;
// }
// return process.env.VUE_APP_BASE_API + '/tms/file/download/' + row.fileId;
// } else {
// return logo;
// }
},
// 带单位的列，需要转换
fieldLabel(columnConfig) {
if (columnConfig == null) {
return "";
}
if (
columnConfig.inputType == "anji-input" &&
columnConfig.anjiInput != null
) {
return `${columnConfig.label}(${columnConfig.anjiInput.unit})`;
} else {
return columnConfig.label;
}
},
// 带单位的输入框
fieldValueByAnjiInput(value, columnConfig) {
if (columnConfig == null) {
return value;
}
if (
columnConfig.inputType == "anji-input" &&
columnConfig.anjiInput != null
) {
return value / columnConfig.anjiInput.conversion;
} else {
return value;
}
},
// 带表格列格式化的值
fieldValueByRowRenderer(row, columnConfig) {
if (
columnConfig == null ||
typeof columnConfig.fieldTableRowRenderer != "function"
) {
return row[columnConfig.field];
} else {
return columnConfig.fieldTableRowRenderer(row);
}
},
// 暴露给外部crud页面，回传saveForm的值
getMainEntity() {
return this.$refs.edit.getSaveForm();
},
setMainEntity(object) {
this.$refs.edit.setSaveForm(object);
},
async switchChange(val, api) {
request({
url: api.url,
method: "put",
headers: { noPrompt: false },
data: [val.id]
}).then(response => {
this.handleQueryPageList();
});
},
queryFormChange(fileName, fieldVal) {
if (typeof this.option.queryFormChange == "function") {
this.option.queryFormChange(this.queryParams, fileName, fieldVal);
}
}
}
};
</script>
<style scoped lang="scss">
.style-btn {
pointer-events: none;
}
.page-container {
height: 100%;
position: relative;
.left-container {
width: 20%;
position: absolute;
top: 0;
left: 0;
background: #fff;
border-radius: 4px 0px 0px 4px;
padding: 20px 20px 0;
overflow: hidden;
overflow-y: auto;
height: 100%;
}
.right-container {
width: calc(80% - 5px);
position: absolute;
top: 0;
right: 0;
background: #fff;
border-radius: 0px 4px 4px 0px;
padding: 20px 20px 0;
height: 100%;
}
}
.el-table .cell,
.el-table td div {
overflow: hidden;
text-overflow: ellipsis;
}
.el-dropdown {
font-size: 12px;
display: inline;
color: #5887fb;
cursor: pointer;
}
.el-dropdown-menu--mini .el-dropdown-menu__item {
min-width: 80px;
max-width: 110px;
float: right;
.el-button--text {
float: right;
}
&:hover {
background: none !important;
}
.el-button--mini {
float: right;
}
.el-button + .el-button {
margin-left: 0 !important;
float: right;
}
}
.pagination {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 20px;
}
.anji_curd_table {
margin-top: 20px;
}
</style>

362
report-ui/src/components/AnjiPlus备份/anji-crud/edit-form.vue
Unescape Escape View File

@ -0,0 +1,362 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-5-4 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-5-6 11:04:24
!-->
<template>
<div v-if="option['hide'] == null || option['hide'] == false" class="anji-card">
<div class="card-head">
{{ option.title }}
<div class="main-card-header-button">
<el-button type="text" @click="handleSetRowColNum(4)">||||</el-button>
<el-button type="text" @click="handleSetRowColNum(3)">|||</el-button>
<el-button type="text" @click="handleSetRowColNum(2)">||</el-button>
</div>
</div>
<div class="card-body">
<el-form ref="editForm" :model="editForm" :label-width="option.labelWidth || '100px'">
<!--:disabled="modelType == 'view'"-->
<template v-for="group in columnGroups">
<el-divider v-if="groupModel" :key="group" content-position="left">{{ group }}</el-divider>
<el-row :key="group" class="form_table">
<template v-for="item in groupFormFields[group]">
<el-col v-if="fieldIsHide(item.editHide) == false" :key="item.editField" :span="item.rowColSpan == null ? cardRowColSpan : item.rowColSpan">
<el-form-item :label="item.label" :rules="item.rules" :prop="item.editField" :disabled="item.disabled">
<!-- 输入框 -->
<span v-if="item.tips != '' && item.tips != null" :style="{ 'margin-left': '-13px' }" class="input_tips">
<el-tooltip class="item" effect="dark" :content="item.tips" placement="top-start">
<svg-icon icon-class="tishi-yiwen" />
</el-tooltip>
</span>
<el-input v-if="item.inputType == 'input'" v-model.trim="editForm[item.editField]" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="fieldIsDisable(item.disabled)" @change="(value) => formChange(item.editField, value, null)" />
<!-- 开关 -->
<el-switch v-else-if="item.inputType == 'switch'" v-model.trim="editForm[item.editField]" :disabled="fieldIsDisable(item.disabled)" :active-value="1" :inactive-value="0" inactive-color="#ccc" active-color="#5887fb" @change="(value) => formChange(item.editField, value, null)" />
<el-input-number v-else-if="item.inputType == 'input-number'" v-model.trim="editForm[item.editField]" :min="item.inputNumberOption.min" :max="item.inputNumberOption.max" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="fieldIsDisable(item.disabled)" @change="(value) => formChange(item.editField, value, null)" />
<!-- 自定义input -->
<anji-input v-else-if="item.inputType == 'anji-input'" v-model.trim="editForm[item.editField]" :unit="item.anjiInput.unit" :conversion="item.anjiInput.conversion" :keep-point="item.anjiInput.keepPoint" :rounding="item.anjiInput.rounding" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="fieldIsDisable(item.disabled)" @change="(value) => formChange(item.editField, value, null)" />
<!-- 下拉框 -->
<anji-select
v-else-if="item.inputType == 'anji-select'"
v-model.trim="editForm[item.editField]"
:multiple="item.anjiSelectOption.multiple"
:disabled="fieldIsDisable(item.disabled)"
:dict-code="item.anjiSelectOption.dictCode"
:placeholder="item.placeholder"
:url="item.anjiSelectOption.url"
:method="item.anjiSelectOption.method"
:query-param="item.anjiSelectOption.queryParam"
:merge-label="item.anjiSelectOption.mergeLabel"
:option="item.anjiSelectOption.option"
:label="item.anjiSelectOption.label"
:remote-filter="item.anjiSelectOption.remoteFilter"
:disabled-options="item.anjiSelectOption.disabledOptions"
@change="(value, option) => formChange(item.editField, value, option)"
/>
<!-- 日期时间框 -->
<el-date-picker v-else-if="item.inputType.indexOf('date') >= 0" v-model="editForm[item.editField]" style="width: 100%" :placeholder="item.placeholder || '请选择'" :type="item.inputType" :format="item.format" :value-format="item.valueFormat" :disabled="fieldIsDisable(item.disabled)" :clearable="item.clearable !== false" @change="(value) => formChange(item.editField, value, null)" />
<!-- checkbox -->
<anji-checkbox v-else-if="item.inputType == 'checkbox'" v-model.trim="editForm[item.editField]" :dict-code="item.anjiCheckbox.dictCode" :label="item.anjiCheckbox.label" :disabled="fieldIsDisable(item.disabled)" @change="(value, options) => formChange(item.editField, value, options)" />
<!-- 城市三级联动 -->
<anji-cascader v-else-if="item.inputType == 'anji-cascader'" v-model.trim="editForm[item.editField]" :disabled="fieldIsDisable(item.disabled)" :url="item.anjiCascader.url" @change="(value) => formChange(item.editField, value, null)" />
<!-- 上传组件 -->
<anji-upload v-else-if="item.inputType == 'anji-upload'" v-model.trim="editForm[item.editField]" :up-load-url="item.anjiUpload.upLoadUrl" :view-url="item.anjiUpload.viewUrl" :upload-type="item.anjiUpload.uploadType" :limit="item.anjiUpload.limit" @change="(value) => formChange(item.editField, value, null)" />
<!-- input自带输入建议 -->
<anji-autocomplete v-else-if="item.inputType == 'anji-autocomplete'" v-model.trim="editForm[item.editField]" :disabled="fieldIsDisable(item.disabled)" :label="item.anjiAutocomplete.label" :option="item.anjiAutocomplete.option" :appoint-value="item.anjiAutocomplete.appointValue" :url="item.anjiAutocomplete.url" @change="(value, option) => formChange(item.editField, value, option)" />
<!-- textarea -->
<el-input v-else-if="item.inputType == 'textarea'" v-model.trim="editForm[item.editField]" :placeholder="item.placeholder || '请输入'" :clearable="item.clearable !== false" :disabled="fieldIsDisable(item.disabled)" type="textarea" :rows="2" @change="(value) => formChange(item.editField, value, null)" />
<el-input v-else placeholder="组件不支持此类型表单请至组件内部自行扩展" disabled />
</el-form-item>
</el-col>
</template>
</el-row>
</template>
</el-form>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {
modelType: String, // add view edit
showDialog: Boolean,
option: {
// 界面渲染相关配置json
type: [Object],
default: () => {
return {
title: '', // 页面标题
labelWidth: '', // 表单输入框label宽度
queryFormFields: [], // 查询表单条件
buttons: {
// 按钮
query: {},
edit: {},
delete: {},
add: {},
},
columns: [], // 表格列
formChange: (formData, fieldName, fieldVal, fieldExtend) => {}, // 弹出框表单修改回调
}
},
},
// 当relateData不为空时，该组件是渲染与relateData一对一关联的子表信息
relateData: {
type: [Object],
default: () => {
return {}
},
},
value: {
type: [Object],
default: () => {
return {}
},
},
},
data() {
return {
cardRowColNum: 2, // 主信息一行显示几列
editForm: {}, // 提交表单的数据
}
},
computed: {
// 主键的列名
primaryKeyFieldName() {
var primaryKey = this.option.columns.find((item) => item['primaryKey'] == true)
if (primaryKey != null) {
return primaryKey['field']
} else {
return null
console.warn('在columns中查找primaryKey=true失败，会导致查询详情和删除失败')
}
},
// 指定当前实体关联主表的
joinColumn() {
var columnName = this.option.joinColumn
if (this.isBlank(columnName)) {
console.warn('在joinEntity中查找joinColumn属性失败，会导致查询详情和删除失败')
columnName = ''
}
return columnName
},
// 提交表单中所有的列，因部分翻译字段，表格中和表单中的key不一样，field editField不全，这里补全下，
formFields() {
if (this.option.columns == null) {
return []
}
var fields = this.deepClone(this.option.columns)
fields = fields.map((item) => {
if (this.isBlank(item['editField'])) {
item['editField'] = item['field']
}
// 没有设定分组的，全部补全成 其它信息
if (this.isBlank(item['group'])) {
item['group'] = '其它'
}
return item
})
return fields
},
// 卡片设定中一行显示几列，每列的col数
cardRowColSpan() {
return 24 / this.cardRowColNum
},
// 如果表单内容较多，启用了分组，这里先算出所有的分组
columnGroups() {
if (this.isBlank(this.formFields)) {
return []
} else {
// 找出所有hide != true的关联表
var groups = this.formFields
.map((item) => {
return item['group']
})
.filter((currentValue, index, arr) => {
return arr.indexOf(currentValue) == index
})
return groups
}
},
/* {
'分组1': [{column1.1}],
'分组2': [{column2.1}],
}*/
groupFormFields() {
if (this.showDialog) {
// 将每个分组初始化
var groupFormFields = {}
this.columnGroups.forEach((value, index, array) => {
groupFormFields[value] = []
})
// 将所有编辑列，按分组存放
this.formFields.forEach((item, index, array) => {
groupFormFields[item['group']].push(item)
})
return groupFormFields
}
return []
},
groupModel() {
return this.columnGroups.length > 1
},
},
created() {
// 如果表单，是做为主表的编辑页面，如果是通过v-model传递进来的值，通过监听value，更新this.editForm
this.$watch(
function () {
return this.value
},
function (newVal, oldVal) {
this.editForm = newVal
// 通过v-model传递值进来时，说明当前form是主表信息
this.formChange()
}
)
// 如果表单，是做为子表的编辑页面，当relateData中的关联字段发生更新时，触发查询，比如在goods详情中，goodsCode
this.$watch(
function () {
return this.relateData[this.joinColumn]
},
function (newVal, oldVal) {
// 如果是父组件(弹出框)关闭时，设置this.relateData = {}时触发，清空本组件的数据
if (this.isBlank(this.relateData)) {
this.cardRowColNum = 2
this.editForm = {}
return
}
// 如果是关联字段发生更新，触发查询
if (this.isNotBlank(newVal)) {
this.queryDetail()
}
}
)
},
mounted() {
// 如果表单，是做为主表的编辑页面，如果是通过v-model传递进来的值
if (this.isNotBlank(this.value)) {
this.editForm = this.value
this.formChange()
}
// 如果表单，是做为子表的编辑页面，首次打开时，根据关联属性，加载详情数据
if (this.isNotBlank(this.relateData) && this.isNotBlank(this.relateData[this.joinColumn])) {
this.queryDetail()
}
},
methods: {
// 该行是否显示 true/false/ 'hideOnAdd hideOnView hideOnEdit'
fieldIsHide(editHide) {
if (typeof editHide == 'boolean') {
return editHide
}
if (typeof editHide == 'string') {
if (this.modelType == 'add') {
return editHide.indexOf('hideOnAdd') >= 0
}
if (this.modelType == 'view') {
return editHide.indexOf('hideOnView') >= 0
}
if (this.modelType == 'edit') {
return editHide.indexOf('hideOnEdit') >= 0
}
}
return false
},
// 该行是否禁用 true/false/ 'disableOnAdd disableOnView disableOnEdit'
fieldIsDisable(disable) {
if (typeof disable == 'boolean') {
return disable
}
if (typeof disable == 'string') {
if (this.modelType == 'add') {
return disable.indexOf('disableOnAdd') >= 0
}
if (this.modelType == 'view') {
return disable.indexOf('disableOnView') >= 0
}
if (this.modelType == 'edit') {
return disable.indexOf('disableOnEdit') >= 0
}
}
return false
},
// 设置一行显示几列
handleSetRowColNum(num) {
this.cardRowColNum = num
this.$emit('changeRowColNum', num)
},
async queryDetail() {
var queryParams = this.relateData
const { data, code } = await this.option.buttons.queryByPrimarykey.api(queryParams)
if (code != '200') return
this.editForm = data
this.formChange()
},
// 校验表单
validate(callback) {
this.$refs.editForm.validate(async (valid, obj) => {
if (callback != null) {
callback(valid)
}
})
},
handleSave(callback) {
this.$refs.editForm.validate(async (valid, obj) => {
if (valid) {
if (this.modelType == 'add') {
// 当edit-from是作为关联子表的界面，补全关联属性
if (typeof this.option.beforeInsert == 'function') {
this.option.beforeInsert(this.relateData, this.editForm)
}
const { code, message } = await this.option.buttons.add.api(this.editForm)
if (code == '200') {
if (callback != null) {
callback()
}
} else {
console.log(`提交表单调用新增接口失败：${message}`)
}
} else {
// 当edit-from是作为关联子表的界面，补全关联属性
if (typeof this.option.beforeUpdate == 'function') {
this.option.beforeUpdate(this.relateData, this.editForm)
}
const { code, message } = await this.option.buttons.edit.api(this.editForm)
if (code == '200') {
if (callback != null) {
callback()
}
} else {
console.log(`提交表单调用更新接口失败：${message}`)
}
}
} else {
console.log('表单校验失败')
}
})
},
// 表单任何一个变动时，通知外部v-model
formChange(fieldName, fieldVal, fieldExtend) {
this.$emit('input', this.editForm)
// 表单变动后，回调option中的formChange事件
if (typeof this.option.formChange == 'function') {
this.option.formChange(this.editForm, fieldName, fieldVal, fieldExtend)
}
},
},
}
</script>
<style scoped lang="scss">
.input_tips {
position: absolute;
margin-top: -8px;
.svg-icon {
font-size: 20px;
color: rgb(71, 8, 8);
}
}
</style>

498
report-ui/src/components/AnjiPlus备份/anji-crud/edit-table.vue
Unescape Escape View File

@ -0,0 +1,498 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-5-4 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-5-6 11:04:24
!-->
<template>
<div v-if="option['hide'] == null || option['hide'] == false"
class="anji-card">
<div class="card-head">{{ option.title }}</div>
<div class="card-body">
<el-form ref="form"
:model="form">
<!-- 表格开始 -->
<el-table :data="formRecordsUndelete"
border
:row-class-name="tableRowClassAdapter"
@selection-change="handleSelectionChange"
@row-click="handleTableRowClick">
<!-- <el-table-column fixed type="selection" width="50" align="center" /> -->
<el-table-column label="序号"
min-width="50"
align="center">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<template v-for="item in option.columns">
<el-table-column v-if="fieldIsHide(item.tableHide) != true && item.columnType != 'expand'"
:key="item.field"
:label="item.label"
:min-width="item.minWidth || 110"
align="center">
<template slot-scope="scope">
<el-form-item :prop="'records.' + scope.$index + '.' + item.field"
:rules="item.rules">
<!-- 输入框 -->
<el-input v-if="item.inputType == 'input'"
v-model="scope.row[item.field]"
size="small"
:placeholder="item.placeholder || '请输入'"
:clearable="item.clearable !== false"
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled"
@change="(value) => tableRowChange(scope.$index, item.field, value)" />
<!-- 开关 -->
<el-switch v-else-if="item.inputType == 'switch'"
v-model="scope.row[item.field]"
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled"
:active-value="item.switchOption.disableValue"
:inactive-value="item.switchOption.enableValue"
@change="(value) => tableRowChange(scope.$index, item.field, value)"
active-color="#5887fb"
inactive-color="#ccc">
</el-switch>
<el-input v-else-if="item.inputType == 'input-number'"
v-model="scope.row[item.field]"
size="small"
:min="item.inputNumberOption.min"
:max="item.inputNumberOption.max"
:placeholder="item.placeholder || '请输入'"
:clearable="item.clearable !== false"
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled"
@change="(value) => tableRowChange(scope.$index, item.field, value)" />
<!-- 自定义input -->
<anji-input v-else-if="item.inputType == 'anji-input'"
v-model.trim="scope.row[item.field]"
:default-value="item.defaultValue"
:unit="item.anjiInput.unit"
:conversion="item.anjiInput.conversion"
:placeholder="item.placeholder || '请输入'"
:clearable="item.clearable !== false"
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled"
@change="(value) => tableRowChange(scope.$index, item.field, value)" />
<!-- 下拉框 -->
<anji-select v-else-if="item.inputType == 'anji-select'"
v-model.trim="scope.row[item.field]"
:multiple="item.anjiSelectOption.multiple"
:default-value="item.defaultValue"
:dict-code="item.anjiSelectOption.dictCode"
:url="item.anjiSelectOption.url"
:method="item.anjiSelectOption.method"
:query-param="item.anjiSelectOption.queryParam"
:option="item.anjiSelectOption.option"
:label="item.anjiSelectOption.label"
:disabled-options="item.anjiSelectOption.disabledOptions"
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled"
@change="(value, option) => tableRowChange(scope.$index, item.field, value, option)" />
<!-- 日期时间框 -->
<el-date-picker v-else-if="item.inputType.indexOf('date') >= 0"
v-model="scope.row[item.field]"
style="width: 100%"
:placeholder="item.placeholder || '请选择'"
:type="item.inputType"
:clearable="item.clearable !== false"
:disabled="saveButtonStatus[scope.$index] == 'inShow' || item.disabled"
@change="(value) => tableRowChange(scope.$index, item.field, value)" />
<!-- 待扩展的表单类型，请自行扩展 -->
<el-input v-else
placeholder="组件不支持此类型表单请至组件内部自行扩展"
disabled />
</el-form-item>
</template>
</el-table-column>
</template>
<el-table-column fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button type="text"
size="small"
@click="handleAddOrUpdate(scope.row, scope.$index)">{{ getRowEditButton(scope.$index) }}</el-button>
<el-button type="text"
size="small"
@click="handleDelete(scope.row, scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表格结束 -->
</el-form>
<button v-if="modelType != 'view'"
class="table-add-row-button"
@click="handleAdd">
<i class="el-icon-plus" />
<span>新增</span>
</button>
</div>
</div>
</template>
<script>
const ROW_DELETE_FLAG = 'deletedFlag'
export default {
components: {},
props: {
modelType: String, // add view edit
option: {
// 界面渲染相关配置json
type: [Object],
default: () => {
return {
title: '', // 页面标题
labelWidth: '',
queryFormFields: [], // 查询表单条件
buttons: {
// 按钮
query: {},
edit: {},
delete: {},
add: {},
},
columns: [], // 表格列
}
},
},
relateData: {
// 关联的主记录
type: [Object],
default: () => {
return {}
},
},
value: {
type: [Array],
default: () => {
return []
},
},
valueNew: {
type: [Array],
default: () => {
return []
},
}
},
data () {
return {
checkRecords: [], // 表格中当前选中的记录
form: {
records: [], // 接口返回的记录列表
total: 0, // 接口返回的总条数
},
saveButtonStatus: [], // 维护表格中每行编辑按钮的状态 inShow inEditing inAdding
rowIdList: []
}
},
computed: {
// 主键的列名
primaryKeyFieldName () {
var primaryKey = this.option.columns.find((item) => item['primaryKey'] == true)
if (primaryKey != null) {
return primaryKey['field']
} else {
return null
console.warn('在columns中查找primaryKey=true失败，会导致查询详情和删除失败')
}
},
// 指定当前实体关联主表的关联字段，孙子关联表，没有该属性
joinColumn () {
var columnName = this.option.joinColumn
if (this.isBlank(columnName)) {
console.warn('在columns中查找关联字段失败，会导致查询详情和删除失败，孙子关联表忽略该错误')
columnName = ''
}
return columnName
},
// 未删除的记录
formRecordsUndelete () {
if (this.form.records == null) {
return []
}
return this.form.records.filter((item) => item[ROW_DELETE_FLAG] == null || item[ROW_DELETE_FLAG] == false)
},
},
watch: {},
created () {
// 主表 relateData 的关联字段 joinColumn 变动时，触发查询子表的查询，孙子关联儿子的无效
if (this.isNotBlank(this.joinColumn)) {
this.$watch(
function () {
return this.relateData[this.joinColumn]
},
function (newVal, oldVal) {
// 如果是关联字段发生更新，触发查询
if (this.isNotBlank(newVal)) {
this.handleQueryPageList(newVal)
} else {
// 如果关联字段为空，清空本表格的数据，如果是父组件(弹出框)关闭时，设置this.relateData = {默认值}时触发
this.checkRecords = []
this.form.records = []
this.form.total = 0
this.saveButtonStatus = []
}
}
)
}
},
mounted () {
// 首次打开时，根据主表关联字段查询子表，加载表格数据
if (this.isNotBlank(this.relateData) && this.isNotBlank(this.relateData[this.joinColumn])) {
this.handleQueryPageList()
}
},
methods: {
// 该行是否显示 true/false/ 'hideOnAdd hideOnView hideOnEdit'
fieldIsHide (tableHide) {
if (typeof tableHide == 'boolean') {
return tableHide
}
if (typeof tableHide == 'string') {
if (this.modelType == 'add') {
return tableHide.indexOf('hideOnAdd') >= 0
}
if (this.modelType == 'view') {
return tableHide.indexOf('hideOnView') >= 0
}
if (this.modelType == 'edit') {
return tableHide.indexOf('hideOnEdit') >= 0
}
}
return false
},
// 获取行的提交按钮文字
getRowEditButton (index) {
if (this.saveButtonStatus[index] == 'inEditing') {
return 'btn_savetemp'
} else if (this.saveButtonStatus[index] == 'inAdding') {
return 'btn_savetemp'
} else if (this.saveButtonStatus[index] == 'inShow') {
return 'btn_edit'
} else {
return 'not_permission'
}
},
// 表格行渲染前前置处理
tableRowClassAdapter ({ row, rowIndex }) {
row.index = rowIndex
},
// 查询
async handleQueryPageList (joinColumnValue) {
if (this.isBlank(joinColumnValue)) {
joinColumnValue = this.relateData[this.joinColumn]
}
var params = {}
params[this.joinColumn] = joinColumnValue
this.queryPageList(params)
},
// 暴露给外部直接调用带参数
async queryPageList (params) {
// 默认的排序
if (this.isNotBlank(this.option.buttons.query.order)) {
params['sort'] = this.option.buttons.query.sort
params['order'] = this.option.buttons.query.order
}
const { data, code } = await this.option.buttons.query.api(params)
if (code != '200') return
this.form.records = data.records
this.form.total = data.total
this.$emit('input', this.form.records)
for (var i = 0; i < this.form.total; i++) {
this.saveButtonStatus.push('inShow')
}
},
// 选择项改变时
handleSelectionChange (val) {
this.checkRecords = val
},
// 表格选中某一行时
handleTableRowClick (row, column, event) {
// console.log(row)
// console.log(column)
// 行点击后，回调option中的tableRowClick事件
if (typeof this.option.tableRowClick == 'function') {
this.option.tableRowClick(this.form.records, row, row.index, this.relateData)
}
},
// 行数据更新时回调
tableRowChange (rowIndex, fieldName, fieldVal, fieldExtend) {
// 通知外面的组件
this.$emit('input', this.form.records)
// 表单变动后，回调option中的tableRowChange事件
if (typeof this.option.tableChange == 'function') {
this.option.tableChange(this.form.records, rowIndex, fieldName, fieldVal, fieldExtend, this.relateData)
}
},
// 新增
handleAdd () {
this.saveButtonStatus.push('inAdding')
this.form.records.push({})
},
// 父节点Change,子节点表格更新
handleUpdata () {
this.saveButtonStatus = []
this.form.records = []
},
// 提交和修改
handleAddOrUpdate (row, index) {
// 编辑状态下点击保存提交
if (this.saveButtonStatus[index] == 'inEditing' || this.saveButtonStatus[index] == 'inAdding') {
this.handleSaveTemp(row, index)
} else {
this.$set(this.saveButtonStatus, index, 'inEditing')
}
},
// 校验表单
validate (callback) {
this.$refs['form'].validate(async (valid, obj) => {
if (callback != null) {
callback(valid)
}
})
},
// 暂存
async handleSaveTemp (row, index) {
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.isBlank(row[this.primaryKeyFieldName])) {
// 补全关联属性
if (typeof this.option.beforeInsert == 'function') {
this.option.beforeInsert(this.relateData, row)
}
} else {
// 补全关联属性
if (typeof this.option.beforeUpdate == 'function') {
this.option.beforeUpdate(this.relateData, row)
}
}
// 将行按钮的文字改成编辑
this.$set(this.saveButtonStatus, index, 'inShow')
// 通知外面的组件
this.$emit('input', this.form.records)
}
})
/*
this.$refs['form'].validate((valid) => {
if (valid) {
// 验证通过
if (this.isBlank(row[this.primaryKeyFieldName])) {
// 补全关联属性
if (typeof this.option.beforeInsert == 'function') {
this.option.beforeInsert(this.relateData, row)
}
// 主键为空，新增
this.option.buttons.add.api(row).then((response) => {
if (response.code == 200) {
this.$set(this.saveButtonStatus, index, 'inShow')
// 保存完成后刷新列表
this.handleQueryPageList()
}
})
} else {
// 补全关联属性
if (typeof this.option.beforeUpdate == 'function') {
this.option.beforeUpdate(this.relateData, row)
}
// 修改
this.option.buttons.edit.api(row).then((response) => {
if (response.code == 200) {
this.$set(this.saveButtonStatus, index, 'inShow')
// 保存完成后刷新列表
this.handleQueryPageList()
}
})
}
} else {
console.log('valid fail')
return false
}
})
*/
},
// 删除
handleDelete (row, index) {
this.saveButtonStatus.splice(index, 1) // 清空状态
// 界面上临时新增出来的一行，还没有提交到数据库，可以直接删除
if (this.saveButtonStatus[index] == 'inAdding') {
this.form.records.splice(index, 1)
this.saveButtonStatus.splice(index, 1)
this.$emit('input', this.form.records)
return
}
// if (this.isBlank(row) || this.isBlank(row[this.primaryKeyFieldName])) {
// return
// }
// 将对应的行标识成删除
// 找出该行在原始记录中的index
// var realIndex = this.form.records.findIndex((item) => item[this.primaryKeyFieldName] == row[this.primaryKeyFieldName])
// row[ROW_DELETE_FLAG] = true
// this.$set(this.form.records, realIndex, row)
// this.$emit('input', this.form.records)
this.form.records.splice(index, 1)
this.rowIdList.push(row.id)
this.$emit('input', this.form.records)
this.$emit('update:valueNew', this.rowIdList)
/*
之前是直接调用接口删除，后面统一改成在主表接口中增加、更新、删除
// 已经保存在数据库的的行，要调用删除按钮
var primaryKey = row[this.primaryKeyFieldName]
this.$confirm(this.$lang('promptMessage_deleteTip'), this.$lang('promptMessage_deleteTipTitle'), {
type: 'warning',
confirmButtonClass: 'delete_sure',
cancelButtonClass: 'el-button--danger is-plain',
})
.then(() => {
this.option.buttons.delete.api(primaryKey).then((res) => {
// {code: "200", message: "操作成功", data: true}
this.checkRecords = []
this.handleQueryPageList()
})
})
.catch((e) => {
e
})
*/
},
},
}
</script>
<style scoped lang="scss">
.table-add-row-button {
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
border-color: #d9d9d9;
border-style: dashed;
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
border-color: #d9d9d9;
}
</style>

386
report-ui/src/components/AnjiPlus备份/anji-crud/edit.vue
Unescape Escape View File

@ -0,0 +1,386 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-3-13 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-3-13 11:04:24
!-->
<template>
<el-dialog
:width="dialogWidth"
:class="dialogFullScreen?'full-screen':'notfull-screen'"
:close-on-click-modal="false"
center
:visible.sync="showDialog"
:fullscreen="dialogFullScreen"
@close="handleCloseDialog('close')"
>
<template v-slot:title>
{{ option.title + '--' + modelType }}
<button
type="button"
aria-label="Close"
class="el-dialog__headerbtn"
style="right: 50px"
@click="dialogFullScreen = !dialogFullScreen"
>
<i class="el-dialog__close el-icon el-icon-full-screen" />
</button>
</template>
<!--主表详情信息-->
<component
:is="'EditForm'"
ref="mainForm"
v-model="saveForm"
:option="option"
:model-type="modelType"
:show-dialog="showDialog"
@changeRowColNum="handleSetRowColNum"
/>
<!--关联表相关-->
<template v-for="(item, index) in joinEntitys">
<component
:is="getComponentByJoinType(item.joinType, item)"
:ref="'joinForm' + index"
:key="index"
v-model="saveForm[item.fieldNameInMainEntityOnSave]"
:value-new.sync="saveForm[item.fieldNameInMainEntityOnId]"
:option="item"
:model-type="modelType"
:relate-data="saveForm"
/>
<!--孙子的关联表-->
<template v-for="(grandsonItem, grandsonIndex) in item.joinEntitys">
<component
:is="getComponentByJoinType(grandsonItem.joinType, grandsonItem)"
ref="grandsonForm"
:key="index + '.' + grandsonIndex"
:option="grandsonItem"
:model-type="modelType"
:relate-data="saveForm"
/>
</template>
</template>
<!--自定义的卡片插槽-->
<slot name="customCard" />
<div
slot="footer"
style="text-align: center"
>
<slot
v-if="modelType =='edit'"
name="editBtn"
:rowData="rowData"
/>
<el-button
type="danger"
plain
@click="handleCloseDialog('close')"
>关闭</el-button>
<el-button
v-if="modelType!='view'"
type="primary"
plain
@click="handleValidateAndSave"
>保存</el-button>
</div>
</el-dialog>
</template>
<script>
import EditForm from './edit-form'
import EditTable from './edit-table'
export default {
name: 'EditDialog',
components: { EditForm, EditTable },
props: {
visible: {
type: [Boolean],
default: () => {
return false
},
},
rowData: {
// 查询参数，对应表格那行数据
type: [Object],
default: () => {
return {}
},
},
modelType: String, // add view edit
option: {
require: true,
type: Object,
default: () => {
return {
title: '', // 页面标题
labelWidth: '', // 表单输入框label宽度
queryFormFields: [], // 查询表单条件
buttons: {
// 按钮
query: {},
edit: {},
delete: {},
add: {},
},
columns: [], // 表格列
}
},
},
},
data() {
return {
showDialog: false, // 编辑详情弹框是否显示
dialogFullScreen: false, // 弹出框全屏
cardRowColNum: 2, // 主信息一行显示几列
// 提交表单的数据
saveForm: {},
// 已成功校验的关联表单个数
countForValidJoinForm: 0,
}
},
computed: {
// 弹出框的宽度，根据一行显示几列动态调整
dialogWidth() {
if (this.cardRowColNum == 2) {
return '60%'
}
if (this.cardRowColNum == 3) {
return '70%'
}
if (this.cardRowColNum == 4) {
return '80%'
}
return '60%'
},
// 关联属性表
joinEntitys() {
if (this.isBlank(this.option.joinEntitys)) {
return []
} else {
return this.option.joinEntitys
// 找出所有hide != true的关联表
// var entitys = this.option.joinEntitys.filter((item) => item['hide'] == null || item['hide'] == false)
// return entitys
}
},
// 一对一关联表的个数
countJoinEntityOneToOne() {
var entitys = this.joinEntitys.filter((item) => item['joinType'] == 'OneToOne')
if (entitys == null) {
return 0
}
return entitys.length
},
},
watch: {
// 监控dialog的显示隐藏变量
visible(newValue, oldValue) {
this.showDialog = newValue
// 为主表的编辑表单，渲染上默认值
this.initDefaultSaveForm()
},
rowData(newValue, oldValue) {
if (newValue != null) {
this.queryByPrimarykey(newValue)
}
},
},
mounted() {
// 为主表的编辑表单，渲染上默认值
this.initDefaultSaveForm()
},
methods: {
// 暴露给外部crud页面，回传saveForm的值
getSaveForm() {
return this.saveForm
},
setSaveForm(saveForm) {
this.saveForm = saveForm
},
initDefaultSaveForm() {
// saveForm的默认值
var defaultSaveForm = {}
this.option.columns.forEach((item) => {
var key = item.editField
if (this.isBlank(key)) {
key = item.field
}
var val = item.defaultValue
if (this.isNotBlank(val)) {
defaultSaveForm[key] = val
}
})
// 为主表的编辑表单，渲染上默认值
this.saveForm = this.deepClone(defaultSaveForm)
console.log('编辑框默认值:' + JSON.stringify(this.saveForm))
},
handleCloseDialog(val) {
// 为主表的编辑表单，渲染上默认值
this.initDefaultSaveForm()
this.showDialog = false, // 编辑详情弹框是否显示
this.dialogFullScreen = false, // 弹出框全屏
this.cardRowColNum = 2, // 主信息一行显示几列
this.countForValidJoinForm = 0, // 已成功校验的关联表单个数
this.$emit('closeEvent', val)
},
// 设置一行显示几列
handleSetRowColNum(num) {
this.cardRowColNum = num
},
// 根据关联类型计算组件
getComponentByJoinType(type, item) {
if (type == 'OneToOne') {
return 'EditForm'
} else if (type == 'OneToMany') {
return 'EditTable'
} else {
return ''
}
},
async queryByPrimarykey(rowData) {
const { data, code } = await this.option.buttons.queryByPrimarykey.api(rowData)
if (code != '200') return
this.showDialog = true
this.saveForm = data
},
// 保存前，先调用校验
handleValidateAndSave() {
this.countForValidJoinForm = 0
// 主表单校验
this.$refs.mainForm.validate((mainValid) => {
if (mainValid == false) {
console.warn('主表单校验失败')
return
}
console.log('主表单校验完成')
if (this.joinEntitys == null || this.joinEntitys.length == 0) {
// 如果子表没有信息，直接提交
this.handleSave()
return
}
for (var i = 0; i < this.joinEntitys.length; i++) {
console.log(`开始校验子表单-${i} 校验`)
var item = this.joinEntitys[i]
if (this.$refs['joinForm' + i] == null || item.hide == true || this.saveForm[item.fieldNameInMainEntityOnSave] == null || this.saveForm[item.fieldNameInMainEntityOnSave].length == 0) {
console.log('子表单没有数据，直接跳过')
this.countForValidJoinForm++
console.log('已经校验的子表单：' + this.countForValidJoinForm + ' 共：' + this.joinEntitys.length)
// 所有关联表单校验通过
if (this.countForValidJoinForm == this.joinEntitys.length) {
console.log('子表单校验完成，提交主表单')
this.handleSave()
}
continue
}
var joinForm = this.$refs['joinForm' + i]
if (toString.call(joinForm) == '[object Array]') {
joinForm = joinForm[0]
}
joinForm.validate((joinValid) => {
if (joinValid) {
this.countForValidJoinForm++
console.log('已经校验的子表单：' + this.countForValidJoinForm + ' 共：' + this.joinEntitys.length)
// 所有关联表单校验通过
if (this.countForValidJoinForm == this.joinEntitys.length) {
console.log('子表单校验完成，提交主表单')
this.handleSave()
}
} else {
console.warn(`子表单${i}校验失败:`)
}
})
}
})
},
async handleSave() {
// 新增
if (this.modelType == 'add') {
const { code, message } = await this.option.buttons.add.api(this.saveForm)
if (code == '200') {
// 保存结束，关闭对话框
this.handleCloseDialog()
// 向外层发关闭事件
this.$emit('closeEvent')
return
} else {
this.countForValidJoinForm = 0, // 已成功校验的关联表单个数
console.log(`提交表单调用新增接口失败：${message}`)
}
}
// 修改
if (this.modelType == 'edit') {
// console.log(this.$slots.customCard[0].context.$refs.cardInEditData.updateData.settingValue)
const { code, message } = await this.option.buttons.edit.api(this.saveForm)
if (code == '200') {
// 保存结束，关闭对话框
this.handleCloseDialog()
// 向外层发关闭事件
this.$emit('closeEvent')
return
} else {
this.countForValidJoinForm = 0, // 已成功校验的关联表单个数
console.log(`提交表单调用更新接口失败：${message}`)
}
}
/* 分步提交
// 提交主表
this.$refs.mainForm.handleSave(() => {
// 如果没有一对一的关联表，直接关闭对话框
if (this.countJoinEntityOneToOne == 0) {
// 保存结束，关闭对话框
this.handleCloseDialog()
// 向外层发关闭事件
this.$emit('closeEvent')
return
}
// 主表保存成功后，保存子表
for (var i = 0; i < this.joinEntitys.length; i++) {
if (this.joinEntitys[i].joinType == 'OneToOne') {
this.$refs['joinForm' + i].handleSave(() => {
this.countForSavedOneToOneJoinEntity++
if (this.countForSavedOneToOneJoinEntity == this.countJoinEntityOneToOne) {
// 保存结束，关闭对话框
this.handleCloseDialog()
// 向外层发关闭事件
this.$emit('closeEvent')
}
})
}
}
})*/
},
},
}
</script>
<style scoped lang="scss">
// /deep/.el-dialog__body {
// background-color: rgb(240, 242, 245);
// padding: 5px;
// max-height: 60vh;
// overflow: auto;
// height: calc(100vh - 100px);
// }
.notfull-screen {
/deep/.el-dialog__body {
background-color: rgb(240, 242, 245);
padding: 5px;
max-height: 60vh;
overflow: auto;
}
}
.full-screen {
/deep/.el-dialog__body {
background-color: rgb(240, 242, 245);
padding: 5px;
height: calc(100vh - 110px);
overflow: auto;
}
}
</style>

323
report-ui/src/components/AnjiPlus备份/anji-select.vue
Unescape Escape View File

@ -0,0 +1,323 @@
<!--element下拉列表封装
使用：
<hyb-select ref="hybSelect"
url="/v1/orgs"
v-model="search.orgId" option="orgId" label="orgName"
placeholder multiple localOptions></hyb-select>
1.url:要显示的下拉列表数据来源
规范：返回的数据要符合(JSON中对应的字段必须：label和value,不能其他)
[
{label:'显示1',value:'值1'},
{label:'显示2',value:'值2'},
{label:'显示3',value:'值3'},
...
]
2.v-model数据的双向绑定,绑定父组件中的字段
3.option自定义select的value对应的字段
4.label自定义select的label对应的字段
5.placeholder下拉列表提示
6.multiple是否是多选
7.localOptions使用本地的数据,不用请求远程数据,注意：使用该属性时Url属性不能要,不然无效
-->
<template>
<div>
<el-select
v-model="selectValue"
:clearable="clearable"
:collapse-tags="collapseTags"
filterable
class="filter-item"
:placeholder="placeholder"
:disabled="disabled"
:multiple="multiple == null ? false : true"
:remote="remoteFilter"
:remote-method="remoteQuery"
@change="change"
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="getItemLabel(item, label)"
:value="item[option]"
:disabled="isDisabledOption(item)"
>
<template v-if="mergeLabel">
<span style="float: left">{{ getItemLabel(item, label) }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{
item[option]
}}</span>
</template>
</el-option>
<el-option v-if="totalPage > 1" label="搜索更多" value="" disabled />
</el-select>
</div>
</template>
<script>
import request from "@/utils/request";
import { getStorageItem } from "@/utils/storage";
export default {
props: {
dictCode: null, // 当传入dictCode时，可以不用传递url
url: null,
method: null,
queryParam: {
type: Object,
default: () => {
return {};
}
},
value: null,
placeholder: null,
label: {
type: String,
default: "text"
},
option: {
type: String,
default: "id"
},
multiple: null,
localOptions: null,
disabled: null,
clearable: {
type: Boolean,
default: true
},
collapseTags: {
type: Boolean,
default: false
},
mergeLabel: {
type: Boolean,
default: false
},
// 禁用的下拉选项
disabledOptions: {
type: String,
default: () => {
return "";
}
},
// 使用远程搜索
remoteFilter: {
type: Boolean,
default: false
}
},
data() {
return {
options: null,
selectValue: null,
// 如果是分页的，
totalPage: 0
};
},
computed: {
// 根据dictCode和url拼出最终的请求url
requestUrl() {
if (this.url != null && this.url.trim() != "") {
if (this.url.indexOf("?") > 0) {
if (this.option == null) {
console.log("url-" + this.url.substring(this.url.indexOf("?")));
}
if (this.label == null) {
}
}
return this.url;
}
if (this.dictCode != null && this.dictCode.trim() != "") {
return `/meta/gaeaDict/select/${this.dictCode}`;
}
return null;
}
},
watch: {
value: function(val, oldVal) {
if (this.multiple != null) {
if (!this.value) {
this.selectValue = [];
} else {
this.selectValue = this.value;
}
} else {
if (this.value != null && this.value != undefined) {
this.selectValue = this.value;
} else {
this.selectValue = "";
}
}
},
url() {
setTimeout(() => {
this.queryData();
}, 500);
}
},
created() {
if (this.multiple != null) {
this.selectValue = this.value;
} else {
if (this.value != null) {
this.selectValue = this.value;
}
}
},
mounted() {
if (this.requestUrl == null) {
this.options = this.localOptions;
return;
}
this.queryData();
},
methods: {
// 判断选择是否已经禁用
isDisabledOption(option) {
if (
option == null ||
this.disabledOptions == null ||
this.disabledOptions.length == 0
) {
return false;
}
var currentOptionVal = option[this.option];
return this.disabledOptions.indexOf(currentOptionVal) >= 0;
},
change(value) {
if (value === "") {
value = null;
}
this.$emit("input", value);
// 根据当前值，找出对应的选项
var optionItem = this.options.find(item => item[this.option] == value);
this.$emit("change", value, optionItem);
},
// 根据用户配置的label，生成对应的标签
getItemLabel(item, label) {
if (label.indexOf("${") < 0 && label.indexOf("}" < 0)) {
return item[label];
}
var reg = /\$\{[a-zA-Z0-9]*\}/g;
var list = label.match(reg);
// ["${id}", "${text}"]
var result = label;
for (var i = 0; i < list.length; i++) {
var sub = list[i];
var key = sub.replace("${", "").replace("}", "");
result = result.replace(sub, item[key]);
}
return result;
},
// 从本地localStorage取 gaeaDict
getOptionsFromLocalStorage() {
var dicts = getStorageItem("gaeaDict");
var options = [];
if (!dicts.hasOwnProperty(this.dictCode)) {
return [];
}
var dictItems = dicts[this.dictCode];
for (var i = 0; i < dictItems.length; i++) {
var dictItem = dictItems[i];
options.push({ id: dictItem.id, text: dictItem.text });
}
return options;
},
queryData() {
// 所有从本地localStorage取，因为在App.vue中已经请求远程保存到本地了
var options = this.getOptionsFromLocalStorage();
if (this.isNotBlank(options)) {
this.options = options;
return;
}
// 本地localStorage取不到，再从远程接口取
if (this.requestUrl == null) {
return;
}
if (
this.method != null &&
this.method.toLocaleLowerCase().trim() == "post"
) {
this.queryDataByPost();
} else {
this.queryDataByGet();
}
},
queryDataByGet(keyword) {
var param = this.deepClone(this.queryParam);
if (this.isNotBlank(keyword)) {
param["keyword"] = keyword;
}
param["multiple"] = this.multiple == null ? null : 1;
request({
url: this.requestUrl,
headers: { noPrompt: true },
params: param
}).then(response => {
this.setOptions(response.data);
});
},
queryDataByPost(keyword) {
var param = this.deepClone(this.queryParam);
if (this.isNotBlank(keyword)) {
param["keyword"] = keyword;
}
request({
url: this.requestUrl,
method: "post",
headers: { noPrompt: true },
data: param
}).then(response => {
this.setOptions(response.data);
});
},
setOptions(resData) {
if (resData == null || resData.length == 0) {
this.options = [];
this.totalPage = 0;
return;
}
if (this.isArray(resData)) {
this.options = resData;
this.totalPage = 1;
return;
}
if (
resData.records == null ||
resData.total == null ||
resData.pages == null
) {
this.options = [];
return;
}
this.totalPage = resData.pages;
// resData.records
// resData.total
// resData.size
// resData.current
this.options = resData.records;
},
remoteQuery(keyword) {
if (this.isBlank(keyword)) {
return;
}
setTimeout(() => {
if (
this.method != null &&
this.method.toLocaleLowerCase().trim() == "post"
) {
this.queryDataByPost(keyword);
} else {
this.queryDataByGet(keyword);
}
}, 200);
}
}
};
</script>
<style scoped>
.filter-item {
width: 100%;
}
</style>

99
report-ui/src/components/AnjiPlus备份/anji-tree.vue
Unescape Escape View File

@ -0,0 +1,99 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-5-4 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-5-5 11:04:24
!-->
<template>
<div>
<el-input class="filterInput" placeholder="搜索" v-model="filterText" v-if="enableFilter" />
<div class="title">{{ labelName }}</div>
<el-tree ref="table_tree" :data="treeData" node-key="id" :default-expand-all="isOpen" :expand-on-click-node="false" :filter-node-method="filterNode" @node-click="nodeClick" @check="checkedEvent" />
</div>
</template>
<script>
import request from '@/utils/request'
export default {
components: {},
props: {
url: {
type: [String],
default: () => {
return ''
},
},
id: {
type: [String],
default: () => {
return 'id'
},
},
label: {
type: [String],
default: () => {
return ''
},
},
value: {
type: [String],
default: () => {
return ''
},
},
labelName: String,
enableFilter: Boolean,
isOpen: Boolean,
},
data() {
return {
filterText: '',
treeData: [],
}
},
computed: {},
watch: {
filterText(val) {
this.$refs.table_tree.filter(val)
},
},
mounted() {
this.queryData()
},
methods: {
filterNode(val, data) {
if (!val) return true
return data.label.indexOf(val) !== -1
},
queryData() {
if (this.isBlank(this.url)) {
return
}
request({
url: this.url,
method: 'GET',
}).then((response) => {
if (response.code != '200') {
return
}
this.treeData = Object.prototype.toString.call(response.data) == '[object Array]' ? response.data : response.data.tree|| response.data.menuTree
})
},
// 点击tree节点时 将tree的id作为上级机构代码 查询列表
nodeClick(node) {
this.$emit('input', node['id'])
this.$emit('node-click', node['id'])
},
checkedEvent(item, evt) {
var ids = evt.checkedKeys.toString()
this.$emit('input', ids)
},
},
}
</script>
<style scoped lang="scss">
.filterInput {
margin-bottom: 20px;
}
</style>

161
report-ui/src/components/AnjiPlus备份/anji-upload.vue
Unescape Escape View File

@ -0,0 +1,161 @@
<template>
<div class="uploadImage">
<el-upload
:headers="headers"
:limit="limit"
:action="requestUrl"
list-type="picture-card"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:show-file-list="true"
:before-upload="handleBeforeUpload"
:class="fileList && fileList.length >= limit ? 'hide_box' : ''"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisibleImageUpload" :modal="false">
<img width="100%" :src="imageUploadUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth"; // get token from cookie
export default {
props: {
upLoadUrl: {
type: String,
default: () => {
return "";
}
},
viewUrl: {
type: String,
default: () => {
return process.env.BASE_API + "/file/download/";
}
},
limit: {
type: Number,
default: () => {
return 1;
}
},
value: {
type: String,
default: () => {
return "";
}
}
},
data() {
return {
imageUploadUrl: "",
dialogVisibleImageUpload: false,
fileList: []
};
},
computed: {
requestUrl() {
if (this.upLoadUrl != null && this.upLoadUrl.trim() != "") {
return process.env.BASE_API + this.upLoadUrl;
} else {
return process.env.BASE_API + "/file/upload";
}
},
headers() {
return {
Authorization: getToken() // 直接从本地获取token就行
};
}
},
watch: {
value: {
handler(val) {
this.echoUpload(this.value);
},
immediate: true
}
},
mounted() {
this.echoUpload(this.value);
},
methods: {
handleRemove(file) {
this.fileList = [];
this.change();
},
handlePictureCardPreview(file) {
this.imageUploadUrl = file.url;
this.dialogVisibleImageUpload = true;
},
// 上传成功的回调
handleSuccess(response, file, fileList) {
if (response.code != 200) {
this.$message.error("上传失败");
return;
}
this.fileList.push({
url: file.response.data.urlPath
});
this.change();
},
// 回传出去
change() {
const fileList = (this.fileList.length > 0 && this.fileList[0].url) || "";
this.$emit("input", fileList);
this.$emit("change", fileList);
},
// 上传检验
handleBeforeUpload(file) {
const extension = file.name
.split(".")
[file.name.split(".").length - 1].toLowerCase();
// .png|.jpg|.gif|.icon|.pdf|.xlsx|.xls|.csv|.mp4|.avi
const extensionList = ["png", "jpg", "gif", "icon"];
if (extensionList.indexOf(extension) < 0) {
this.$message.warning("请上传正确的格式文件");
return false;
}
return true;
},
// 回显
echoUpload(val) {
if (!val) {
this.fileList = [];
} else {
const list = [{ url: val }];
this.fileList = list;
}
}
}
};
</script>
<style lang="scss" scoped>
.uploadImage .el-upload--picture-card {
width: 60px;
height: 60px;
line-height: 65px;
}
.uploadImage .el-upload-list__item {
width: 60px;
height: 60px;
}
.hide_box /deep/ .el-upload--picture-card {
display: none;
}
.el-upload-list__item {
line-height: 1.5;
}
.el-upload-list--picture-card .el-upload-list__item-actions {
text-align: left;
display: flex;
flex-wrap: wrap;
}
.imgBox,
.iconFont {
width: 100% !important;
height: 100% !important;
}
</style>

68
report-ui/src/components/Breadcrumb/index.vue
Unescape Escape View File

@ -1,67 +1,81 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelListArr" :key="item.path"> <el-breadcrumb-item
<span v-if="item.redirect==='noredirect'||index==levelListArr.length-1" class="no-redirect">{{ item.meta.title }}</span> v-for="(item, index) in levelListArr"
<router-link v-else :to="item.redirect||item.path" class="no-redirect">{{ item.meta.title }}</router-link> :key="item.path"
>
<span
v-if="
item.redirect === 'noredirect' || index == levelListArr.length - 1
"
class="no-redirect"
>{{ item.meta.title }}</span
>
<router-link
v-else
:to="item.redirect || item.path"
class="no-redirect"
>{{ item.meta.title }}</router-link
>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
</el-breadcrumb> </el-breadcrumb>
</template> </template>
<script> <script>
import pathToRegexp from 'path-to-regexp' import pathToRegexp from "path-to-regexp";
export default { export default {
data() { data() {
return { return {
levelList: null levelList: null
} };
}, },
watch: { watch: {
$route() { $route() {
this.getBreadcrumb() this.getBreadcrumb();
} }
}, },
computed:{ computed: {
levelListArr(){ levelListArr() {
return this.levelList.filter(item => item.meta && item.meta.title) return this.levelList.filter(item => item.meta && item.meta.title);
} }
}, },
created() { created() {
this.getBreadcrumb() this.getBreadcrumb();
}, },
methods: { methods: {
getBreadcrumb() { getBreadcrumb() {
const { params } = this.$route const { params } = this.$route;
let matched = this.$route.matched.filter(item => { let matched = this.$route.matched.filter(item => {
if (item.name) { if (item.name) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
var toPath = pathToRegexp.compile(item.path) let toPath = pathToRegexp.compile(item.path);
item.path = toPath(params) item.path = toPath(params);
return true return true;
} }
}) });
// const first = matched[0] // const first = matched[0]
// if (first && first.name !== 'dashboard') { // if (first && first.name !== 'dashboard') {
// matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) // matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
// } // }
this.levelList = matched this.levelList = matched;
} }
} }
} };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.app-breadcrumb.el-breadcrumb { .app-breadcrumb.el-breadcrumb {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
line-height: 50px; line-height: 50px;
margin-left: 10px; margin-left: 10px;
color: #fff; color: #fff;
.no-redirect { .no-redirect {
color: #333; color: #333;
cursor: text; cursor: text;
}
} }
}
</style> </style>

2
report-ui/src/components/Permission/permission.js
Unescape Escape View File

@ -2,7 +2,7 @@ import { hasPermission } from '@/utils/auth'
export default { export default {
inserted(el, binding, vnode) { inserted(el, binding, vnode) {
const { value } = binding // v-permission 绑定的权限值 const { value } = binding // v-permission 绑定的权限值
var checkFlag = hasPermission(value) let checkFlag = hasPermission(value)
if(checkFlag == false && el.parentNode ){ if(checkFlag == false && el.parentNode ){
el.parentNode.removeChild(el) el.parentNode.removeChild(el)
} }

271
report-ui/src/components/codeSelect.vue
Unescape Escape View File

@ -1,154 +1,171 @@
/* /* * 使用方式
* 使用方式 <code-select v-model="params.enableFlag" dictname="ENABLE_FLAG" @changed="handler" placeholder="启用状态" style="width: 120px;"/> <code-select
* 根据/data/basecode.js中字典值，生成下拉列表 v-model="params.enableFlag"
* @property dictname ENABLE_FLAG dictname="ENABLE_FLAG"
* @property placeholder @changed="handler"
* @property style placeholder="启用状态"
*/ style="width: 120px;"
/>
* 根据/data/basecode.js中字典值，生成下拉列表 * @property dictname ENABLE_FLAG *
@property placeholder * @property style */
<template> <template>
<el-select :name="inputName" v-model="selectValue" :disabled="disabled" :placeholder="placeholder" :style="mystyle" clearable class="filter-item code-selected" @change="selectChange" @visible-change="drowShow"> <el-select
<el-option v-for="(item,index) in optionList" :key="index" :label="item[label]" :value="item[valWord]" /> :name="inputName"
v-model="selectValue"
:disabled="disabled"
:placeholder="placeholder"
:style="mystyle"
clearable
class="filter-item code-selected"
@change="selectChange"
@visible-change="drowShow"
>
<el-option
v-for="(item, index) in optionList"
:key="index"
:label="item[label]"
:value="item[valWord]"
/>
</el-select> </el-select>
</template> </template>
<script> <script>
import request from '@/api/axios' import request from "@/api/axios";
import { getStorageItem } from '@/utils/storage' import { getStorageItem } from "@/utils/storage";
export default { export default {
props: { props: {
value: { value: {
type: [String, Number], type: [String, Number],
default: '' default: ""
},
//用localStrage中的basecode生成下拉
dictname: {
type: String,
default: ''
},
//远程请求，生成下拉
remoteurl: {
type: String,
default: ''
},
remoteParams: {
type: Object,
default: ()=>{}
},
inputName: {
type: String,
default: ''
},
placeholder: {
type: String,
default: '请选择'
},
mystyle: {
type: String,
default: 'width: 100px'
},
disabled: {
type: Boolean,
default: false
},
label:{
type: String,
default: 'label'
},
valWord:{
type: String,
default: 'value'
},
}, },
data () { //用localStrage中的basecode生成下拉
return { dictname: {
selectValue: '', type: String,
optionList: [], default: ""
dictList: [],
}
}, },
watch: { //远程请求，生成下拉
value:{ remoteurl: {
handler(newValue, oldValue){ type: String,
if (typeof newValue === 'string') { default: ""
this.selectValue = newValue
} else {
this.selectValue = this.parseString(newValue);
}
},
immediate: true
},
}, },
computed: {}, remoteParams: {
created () { type: Object,
if (this.dictname !== '') { default: () => {}
this.optionList = this.getListFromBaseCode()
}
if (this.remoteurl !== '') {
this.getListFromAjax()
}
}, },
mounted () {}, inputName: {
methods: { type: String,
getListFromBaseCode() { default: ""
let basecode = getStorageItem('queryForCodeSelect') },
let list = [] placeholder: {
if (!basecode.hasOwnProperty(this.dictname)) { type: String,
return [] default: "请选择"
} },
this.dictList = basecode[this.dictname] mystyle: {
for (let i = 0; i < this.dictList.length; i++) { type: String,
var codeItem = this.dictList[i] default: "width: 100px"
list.push({ 'value': codeItem.value.toString(), 'label': codeItem.label }) },
disabled: {
type: Boolean,
default: false
},
label: {
type: String,
default: "label"
},
valWord: {
type: String,
default: "value"
}
},
data() {
return {
selectValue: "",
optionList: [],
dictList: []
};
},
watch: {
value: {
handler(newValue, oldValue) {
if (typeof newValue === "string") {
this.selectValue = newValue;
} else {
this.selectValue = this.parseString(newValue);
} }
return list
}, },
immediate: true
}
},
computed: {},
created() {
if (this.dictname !== "") {
this.optionList = this.getListFromBaseCode();
}
if (this.remoteurl !== "") {
this.getListFromAjax();
}
},
mounted() {},
methods: {
getListFromBaseCode() {
let basecode = getStorageItem("queryForCodeSelect");
let list = [];
if (!basecode.hasOwnProperty(this.dictname)) {
return [];
}
this.dictList = basecode[this.dictname];
for (let i = 0; i < this.dictList.length; i++) {
let codeItem = this.dictList[i];
list.push({ value: codeItem.value.toString(), label: codeItem.label });
}
return list;
},
getListFromAjax() { getListFromAjax() {
//将url中的参数转换成json，提交 //将url中的参数转换成json，提交
var reqData = {}; let reqData = {};
/*var params = this.remoteurl.slice(this.remoteurl.indexOf('?') + 1).split('&'); /*let params = this.remoteurl.slice(this.remoteurl.indexOf('?') + 1).split('&');
for (var i = 0; i < params.length; i++) { for (let i = 0; i < params.length; i++) {
var map = params[i].split('='); let map = params[i].split('=');
var key = map[0]; let key = map[0];
var val = map[1]; let val = map[1];
if(','.indexOf(val)>0 && val.split(',').length>1){ if(','.indexOf(val)>0 && val.split(',').length>1){
val = val.split(','); val = val.split(',');
} }
reqData[map[0]] = val; reqData[map[0]] = val;
}*/ }*/
if(this.remoteParams != null){ if (this.remoteParams != null) {
reqData = this.remoteParams; reqData = this.remoteParams;
}
request({
url: this.remoteurl,
method: "post",
data: reqData
}).then(response => {
if (response.repCode == "0000") {
this.optionList = response.repData;
} }
request({ });
url: this.remoteurl, },
method: 'post',
data: reqData
}).then(response => {
if (response.repCode == '0000') {
this.optionList = response.repData
}
})
},
selectChange (val) { selectChange(val) {
this.$emit('input', val) this.$emit("input", val);
var list = this.optionList let list = this.optionList;
for (var i in list) { for (let i in list) {
var item = list[i] let item = list[i];
if (item[this.valWord] === val) { if (item[this.valWord] === val) {
this.$emit('changed', item) this.$emit("changed", item);
break break;
}
} }
},
drowShow (val) {
this.$emit('show', val)
this.$emit('click', val)
} }
},
drowShow(val) {
this.$emit("show", val);
this.$emit("click", val);
} }
} }
};
</script> </script>
<!--<style rel="stylesheet/scss" lang="less" scoped>--> <!--<style rel="stylesheet/scss" lang="less" scoped>-->

6
report-ui/src/components/verifition/utils/ase.js
Unescape Escape View File

@ -4,8 +4,8 @@ import CryptoJS from 'crypto-js'
* @keyWord String 服务器随机返回的关键字 * @keyWord String 服务器随机返回的关键字
* */ * */
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){ export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
var key = CryptoJS.enc.Utf8.parse(keyWord); let key = CryptoJS.enc.Utf8.parse(keyWord);
var srcs = CryptoJS.enc.Utf8.parse(word); let srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}); let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return encrypted.toString(); return encrypted.toString();
} }

6
report-ui/src/components/verifition/utils/util.js
Unescape Escape View File

@ -1,8 +1,8 @@
export function resetSize(vm) { export function resetSize(vm) {
var img_width, img_height, bar_width, bar_height; //图片的宽度、高度，移动条的宽度、高度 let img_width, img_height, bar_width, bar_height; //图片的宽度、高度，移动条的宽度、高度
var parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth let parentWidth = vm.$el.parentNode.offsetWidth || window.offsetWidth
var parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight let parentHeight = vm.$el.parentNode.offsetHeight || window.offsetHeight
if (vm.imgSize.width.indexOf('%') != -1) { if (vm.imgSize.width.indexOf('%') != -1) {
img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px' img_width = parseInt(this.imgSize.width) / 100 * parentWidth + 'px'

46
report-ui/src/filter/index.js
Unescape Escape View File

@ -1,3 +1,11 @@
/*
* @Descripttion:
* @version:
* @Author: qianlishi
* @Date: 2021-12-11 14:48:27
* @LastEditors: qianlishi
* @LastEditTime: 2021-12-13 10:15:29
*/
import { getStorageItem } from '@/utils/storage'; import { getStorageItem } from '@/utils/storage';
// 字典 // 字典
@ -9,11 +17,11 @@ export function basecode(value, dicName) {
return value return value
} }
var basecode = getStorageItem('queryForCodeSelect') let basecode = getStorageItem('queryForCodeSelect')
var dictList = basecode[dicName] let dictList = basecode[dicName]
var dictLabel = value let dictLabel = value
for (var i = 0; i < dictList.length; i++) { for (let i = 0; i < dictList.length; i++) {
var codeItem = dictList[i] let codeItem = dictList[i]
if(codeItem.value == value || codeItem.labelEng == value){ if(codeItem.value == value || codeItem.labelEng == value){
dictLabel = codeItem.label dictLabel = codeItem.label
break break
@ -25,9 +33,9 @@ export function basecode(value, dicName) {
// 根据字典值获取数据 // 根据字典值获取数据
export function getDataByCode(keyCode) { export function getDataByCode(keyCode) {
var dict = basecode[this.keyCode] let dict = basecode[this.keyCode]
let list = [] let list = []
for (var key in dict) { for (let key in dict) {
list.push({ list.push({
'value': key, 'value': key,
'text': dict[key] 'text': dict[key]
@ -38,7 +46,7 @@ export function getDataByCode(keyCode) {
//保留两位小数 //保留两位小数
export function fixed(value){ export function fixed(value){
var intVal = null; let intVal = null;
if(typeof value == 'string' && /^[0-9.]+$/.test(value)){ if(typeof value == 'string' && /^[0-9.]+$/.test(value)){
intVal = parseInt(value); intVal = parseInt(value);
} }
@ -57,16 +65,16 @@ export function formatTimestamp(value) {
if (value == null) { if (value == null) {
return '' return ''
} }
var date = new Date(value) let date = new Date(value)
var y = date.getFullYear() let y = date.getFullYear()
var m = date.getMonth() + 1 let m = date.getMonth() + 1
m = m < 10 ? ('0' + m) : m m = m < 10 ? ('0' + m) : m
var d = date.getDate() let d = date.getDate()
d = d < 10 ? ('0' + d) : d d = d < 10 ? ('0' + d) : d
var h = date.getHours() let h = date.getHours()
h = h < 10 ? ('0' + h) : h h = h < 10 ? ('0' + h) : h
var minute = date.getMinutes() let minute = date.getMinutes()
var second = date.getSeconds() let second = date.getSeconds()
minute = minute < 10 ? ('0' + minute) : minute minute = minute < 10 ? ('0' + minute) : minute
second = second < 10 ? ('0' + second) : second second = second < 10 ? ('0' + second) : second
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
@ -78,11 +86,11 @@ export function formatDate(value) {
if (value == null) { if (value == null) {
return '' return ''
} }
var date = new Date(value) let date = new Date(value)
var y = date.getFullYear() let y = date.getFullYear()
var m = date.getMonth() + 1 let m = date.getMonth() + 1
m = m < 10 ? ('0' + m) : m m = m < 10 ? ('0' + m) : m
var d = date.getDate() let d = date.getDate()
d = d < 10 ? ('0' + d) : d d = d < 10 ? ('0' + d) : d
return y + '-' + m + '-' + d return y + '-' + m + '-' + d
} }

2
report-ui/src/mixins/access.js
Unescape Escape View File

@ -15,7 +15,7 @@ export default {
return getToken() return getToken()
}, },
getUser: function () { getUser: function () {
var user = getAccessUser() let user = getAccessUser()
if (user != null) { if (user != null) {
return user; return user;
} else { } else {

73
report-ui/src/mixins/common.js
Unescape Escape View File

@ -60,7 +60,7 @@ export default {
}, },
// 封装定制删除数组中的值 // 封装定制删除数组中的值
contains (a, obj) { contains (a, obj) {
var i = a.length let i = a.length
while (i--) { while (i--) {
if (a[i] === obj) { if (a[i] === obj) {
return i return i
@ -90,8 +90,8 @@ export default {
}, },
sortArray (propertyName) { sortArray (propertyName) {
return function (object1, object2) { return function (object1, object2) {
var value1 = object1[propertyName]; let value1 = object1[propertyName];
var value2 = object2[propertyName]; let value2 = object2[propertyName];
if (value1 < value2) { if (value1 < value2) {
return -1; return -1;
@ -104,8 +104,8 @@ export default {
}, },
// 获取对象类型 // 获取对象类型
getObjectType (obj) { getObjectType (obj) {
var toString = Object.prototype.toString let toString = Object.prototype.toString
var map = { let map = {
'[object Boolean]': 'boolean', '[object Boolean]': 'boolean',
'[object Number]': 'number', '[object Number]': 'number',
'[object String]': 'string', '[object String]': 'string',
@ -146,7 +146,7 @@ export default {
return val.trim() == '' return val.trim() == ''
} }
if (typeof val === 'object') { if (typeof val === 'object') {
for (var key in val) { for (let key in val) {
return false return false
} }
return true return true
@ -168,7 +168,7 @@ export default {
list.forEach((ele) => { list.forEach((ele) => {
delete val[ele] delete val[ele]
}) })
for (var o in val) { for (let o in val) {
return false return false
} }
return true return true
@ -183,8 +183,8 @@ export default {
// 对象深拷贝 // 对象深拷贝
deepClone (data) { deepClone (data) {
var type = this.getObjectType(data) let type = this.getObjectType(data)
var obj let obj
if (type === 'array') { if (type === 'array') {
obj = [] obj = []
} else if (type === 'object') { } else if (type === 'object') {
@ -194,7 +194,7 @@ export default {
return data return data
} }
if (type === 'array') { if (type === 'array') {
for (var i = 0, len = data.length; i < len; i++) { for (let i = 0, len = data.length; i < len; i++) {
data[i] = (() => { data[i] = (() => {
if (data[i] === 0) { if (data[i] === 0) {
return data[i] return data[i]
@ -207,7 +207,7 @@ export default {
obj.push(this.deepClone(data[i])) obj.push(this.deepClone(data[i]))
} }
} else if (type === 'object') { } else if (type === 'object') {
for (var key in data) { for (let key in data) {
if (data) { if (data) {
delete data.$parent delete data.$parent
} }
@ -219,12 +219,12 @@ export default {
// 合并json // 合并json
mergeObject () { mergeObject () {
var target = arguments[0] || {} let target = arguments[0] || {}
var deep = false let deep = false
var arr = Array.prototype.slice.call(arguments) let arr = Array.prototype.slice.call(arguments)
var i = 1 let i = 1
var options, src, key, copy let options, src, key, copy
var isArray = false let isArray = false
if (typeof target === 'boolean') { if (typeof target === 'boolean') {
deep = target deep = target
i++ i++
@ -262,9 +262,9 @@ export default {
// 获取dom在屏幕中的top和left // 获取dom在屏幕中的top和left
getDomTopLeftById (id) { getDomTopLeftById (id) {
var dom = document.getElementById(id) let dom = document.getElementById(id)
var top = 0 let top = 0
var left = 0 let left = 0
if (dom != null) { if (dom != null) {
top = dom.getBoundingClientRect().top top = dom.getBoundingClientRect().top
left = dom.getBoundingClientRect().left left = dom.getBoundingClientRect().left
@ -272,10 +272,10 @@ export default {
return { top: top, left: left } return { top: top, left: left }
}, },
objToOne (obj) { objToOne (obj) {
var tmpData = {} let tmpData = {}
for (var index in obj) { for (let index in obj) {
if (typeof obj[index] == 'object') { if (typeof obj[index] == 'object') {
var resObj = this.objToOne(obj[index]) let resObj = this.objToOne(obj[index])
Object.assign(tmpData, resObj) // 这里使用对象合并 Object.assign(tmpData, resObj) // 这里使用对象合并
} else { } else {
tmpData[index] = obj[index] tmpData[index] = obj[index]
@ -293,8 +293,8 @@ export default {
if (toString.call(obj) != '[object Object]') { if (toString.call(obj) != '[object Object]') {
return obj return obj
} }
var result = {} let result = {}
for (var key in obj) { for (let key in obj) {
if (this.isBlank(obj[key])) { if (this.isBlank(obj[key])) {
continue continue
} }
@ -309,13 +309,13 @@ export default {
// 根据数据字典，查询指定字典dict指定值code的，返回整个dictItem{id, text, extend} // 根据数据字典，查询指定字典dict指定值code的，返回整个dictItem{id, text, extend}
getDictItemByCode (dict, code) { getDictItemByCode (dict, code) {
var dicts = getStorageItem('gaeaDict') let dicts = getStorageItem('gaeaDict')
if (!dicts.hasOwnProperty(dict)) { if (!dicts.hasOwnProperty(dict)) {
return null return null
} }
var dictItems = dicts[dict] let dictItems = dicts[dict]
for (var i = 0; i < dictItems.length; i++) { for (let i = 0; i < dictItems.length; i++) {
var dictItem = dictItems[i] let dictItem = dictItems[i]
if (typeof (code) == 'number') { if (typeof (code) == 'number') {
code = code.toString() code = code.toString()
} }
@ -327,7 +327,7 @@ export default {
}, },
// 根据数据字典，查询指定字典dict指定值code的dictItem.text // 根据数据字典，查询指定字典dict指定值code的dictItem.text
getDictLabelByCode (dict, code) { getDictLabelByCode (dict, code) {
var dictItem = this.getDictItemByCode(dict, code) let dictItem = this.getDictItemByCode(dict, code)
if (dictItem != null) { if (dictItem != null) {
return dictItem['text'] return dictItem['text']
} else { } else {
@ -336,15 +336,24 @@ export default {
}, },
// 根据数据字典，查询指定字典dict指定值code的dictItem.extend // 根据数据字典，查询指定字典dict指定值code的dictItem.extend
getDictExtendByCode (dict, code) { getDictExtendByCode (dict, code) {
var dictItem = this.getDictItemByCode(dict, code) let dictItem = this.getDictItemByCode(dict, code)
if (dictItem == null) { if (dictItem == null) {
return null return null
} }
var extend = dictItem['extend'] let extend = dictItem['extend']
if (extend == null || extend.trim() == 'null') { if (extend == null || extend.trim() == 'null') {
return null return null
} }
return dictItem['extend'] return dictItem['extend']
}, },
getSettingByName(settingName) {
let gaeaSetting = JSON.parse(localStorage.getItem('gaeaDict'))
if (gaeaSetting[settingName] != null) {
return gaeaSetting[settingName]
} else {
console.error('没有找到系统参数' + settingName + '，请与后端联系')
return null
}
},
} }
} }

2
report-ui/src/store/modules/user.js
Unescape Escape View File

@ -24,7 +24,7 @@ const user = {
const userName = userInfo.userName.trim() const userName = userInfo.userName.trim()
const password = userInfo.password.trim() const password = userInfo.password.trim()
const captchaVerification = userInfo.captchaVerification.trim() const captchaVerification = userInfo.captchaVerification.trim()
var data ={ let data ={
userName, password,captchaVerification userName, password,captchaVerification
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

10
report-ui/src/utils/aes.js
Unescape Escape View File

@ -1,12 +1,12 @@
import CryptoJS from 'crypto-js' import CryptoJS from 'crypto-js'
export function aesEncrypt(word){ export function aesEncrypt(word){
var key = CryptoJS.enc.Utf8.parse("BGxdEUOZkXka4HSj"); let key = CryptoJS.enc.Utf8.parse("BGxdEUOZkXka4HSj");
var srcs = CryptoJS.enc.Utf8.parse(word); let srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}); let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return encrypted.toString(); return encrypted.toString();
} }
export function aesDecrypt(word){ export function aesDecrypt(word){
var key = CryptoJS.enc.Utf8.parse("BGxdEUOZkXka4HSj"); let key = CryptoJS.enc.Utf8.parse("BGxdEUOZkXka4HSj");
var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}); let decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return CryptoJS.enc.Utf8.stringify(decrypt).toString(); return CryptoJS.enc.Utf8.stringify(decrypt).toString();
} }

10
report-ui/src/utils/auth.js
Unescape Escape View File

@ -41,17 +41,17 @@ export function hasPermission(permissionStr) {
} }
// 登录用户的全部权限码 // 登录用户的全部权限码
var user = getAccessUser() let user = getAccessUser()
if (user == null || user.authorities == null) { if (user == null || user.authorities == null) {
return false return false
} }
var opAuthoritiesStr = JSON.stringify(user.authorities) let opAuthoritiesStr = JSON.stringify(user.authorities)
// permissionStr可能是：authorityManage、authorityManage:insert、authorityManage:insert|authorityManage:update // permissionStr可能是：authorityManage、authorityManage:insert、authorityManage:insert|authorityManage:update
var needPermissionArray = permissionStr.split('|') let needPermissionArray = permissionStr.split('|')
for (var i = 0; i < needPermissionArray.length; i++) { for (let i = 0; i < needPermissionArray.length; i++) {
// 只要有其中的一个权限，就返回true // 只要有其中的一个权限，就返回true
var needPermission = needPermissionArray[i] // authorityManage、authorityManage:insert let needPermission = needPermissionArray[i] // authorityManage、authorityManage:insert
needPermission = needPermission.replace(/\ /g, "") // 去除authorityManage : insert中:前后的空格 needPermission = needPermission.replace(/\ /g, "") // 去除authorityManage : insert中:前后的空格
if(opAuthoritiesStr.indexOf(needPermission)>=0){ if(opAuthoritiesStr.indexOf(needPermission)>=0){

16
report-ui/src/utils/common.js
Unescape Escape View File

@ -2,8 +2,8 @@ export default {
timestamp2String: function (timestamp, fmt) { timestamp2String: function (timestamp, fmt) {
if (timestamp == null) return; if (timestamp == null) return;
if (fmt == null || fmt == '') fmt = 'yyyy-MM-dd hh:mm:ss'; if (fmt == null || fmt == '') fmt = 'yyyy-MM-dd hh:mm:ss';
var date = new Date(timestamp); let date = new Date(timestamp);
var o = { let o = {
"M+": date.getMonth() + 1, //月份 "M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日 "d+": date.getDate(), //日
"h+": date.getHours(), //小时 "h+": date.getHours(), //小时
@ -14,7 +14,7 @@ export default {
}; };
if (/(y+)/.test(fmt)) if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) for (let k in o)
if (new RegExp("(" + k + ")").test(fmt)) if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt; return fmt;
@ -24,12 +24,12 @@ export default {
if (second == null || second == 0) { if (second == null || second == 0) {
return "0秒"; return "0秒";
} }
var day = Math.floor(second / (24 * 3600)); let day = Math.floor(second / (24 * 3600));
var hour = Math.floor((second - day * 24 * 3600) / 3600); let hour = Math.floor((second - day * 24 * 3600) / 3600);
var minute = Math.floor((second - day * 24 * 3600 - hour * 3600) / 60); let minute = Math.floor((second - day * 24 * 3600 - hour * 3600) / 60);
var second = second - day * 24 * 3600 - hour * 3600 - minute * 60; let second = second - day * 24 * 3600 - hour * 3600 - minute * 60;
var result = ""; let result = "";
if (day > 0) { if (day > 0) {
result = result + day + "天"; result = result + day + "天";
} }

6
report-ui/src/utils/index.js
Unescape Escape View File

@ -96,12 +96,12 @@ function padLeftZero (str) {
* 生成uuid * 生成uuid
*/ */
export function getUUID () { export function getUUID () {
var d = new Date().getTime() let d = new Date().getTime()
if (window.performance && typeof window.performance.now === 'function') { if (window.performance && typeof window.performance.now === 'function') {
d += performance.now() // use high-precision timer if available d += performance.now() // use high-precision timer if available
} }
var uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) { let uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0 let r = (d + Math.random() * 16) % 16 | 0
d = Math.floor(d / 16) d = Math.floor(d / 16)
return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16) return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)
}) })

34
report-ui/src/utils/signUtil.js
Unescape Escape View File

@ -4,8 +4,8 @@ function jsonString (obj) {
if (isObject(obj)) { if (isObject(obj)) {
return sortObjByKey(obj); return sortObjByKey(obj);
} else if (isArray(obj)) { } else if (isArray(obj)) {
var sortArray = []; let sortArray = [];
for (var i = 0; i < obj.length; i++) { for (let i = 0; i < obj.length; i++) {
if (isObject(obj[i])) { if (isObject(obj[i])) {
sortArray.push(sortObjByKey(obj[i])); sortArray.push(sortObjByKey(obj[i]));
} else { } else {
@ -20,10 +20,10 @@ function jsonString (obj) {
// 将通讯录按照 ABCD字母的顺序排序 // 将通讯录按照 ABCD字母的顺序排序
function sortObjByKey (obj) { function sortObjByKey (obj) {
var keys = Object.keys(obj).sort(); let keys = Object.keys(obj).sort();
var newObj = {} let newObj = {}
for (var i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
var index = keys[i]; let index = keys[i];
newObj[index] = jsonString(obj[index]); newObj[index] = jsonString(obj[index]);
} }
return newObj; return newObj;
@ -50,13 +50,13 @@ export default {
if (typeof (data) == "undefined" || data == null) { if (typeof (data) == "undefined" || data == null) {
data = {}; data = {};
} }
var gatewayRequest = {};//currentPage pageSize orderBy data time token sign isFrom let gatewayRequest = {};//currentPage pageSize orderBy data time token sign isFrom
var time = new Date().getTime(); let time = new Date().getTime();
//找出data中值非null的key，同时排除分页参数 //找出data中值非null的key，同时排除分页参数
//ignoreKeyList data中哪些key不参与签名 //ignoreKeyList data中哪些key不参与签名
var dataKeyArray = []; let dataKeyArray = [];
var excludeKeyArray = ['currentPage', 'pageSize', 'orderBy', 'ignoreKeyList']; let excludeKeyArray = ['currentPage', 'pageSize', 'orderBy', 'ignoreKeyList'];
for (var key in data) { for (let key in data) {
if (data[key] == null) { if (data[key] == null) {
continue; continue;
} }
@ -65,7 +65,7 @@ export default {
delete data[key]; delete data[key];
if (key === 'ignoreKeyList') { if (key === 'ignoreKeyList') {
//遍历ignoreKeyList，不参与签名校验 //遍历ignoreKeyList，不参与签名校验
for (var i = 0; i < data[key].length; i++) { for (let i = 0; i < data[key].length; i++) {
delete data[data[key][i]]; delete data[data[key][i]];
} }
} }
@ -77,10 +77,10 @@ export default {
dataKeyArray.sort(); dataKeyArray.sort();
//生成签名串"time=%s&" + tempSignStr + "&token=%s" //生成签名串"time=%s&" + tempSignStr + "&token=%s"
var tempSignStr = "time=" + time; let tempSignStr = "time=" + time;
for (var i = 0; i < dataKeyArray.length; i++) { for (let i = 0; i < dataKeyArray.length; i++) {
var key = dataKeyArray[i]; let key = dataKeyArray[i];
var value = data[key]; let value = data[key];
tempSignStr += "&"; tempSignStr += "&";
tempSignStr += key; tempSignStr += key;
tempSignStr += "="; tempSignStr += "=";
@ -88,7 +88,7 @@ export default {
} }
tempSignStr += "&token="; tempSignStr += "&token=";
tempSignStr += token; tempSignStr += token;
var signStr = md5(tempSignStr); let signStr = md5(tempSignStr);
gatewayRequest['data'] = data; gatewayRequest['data'] = data;
gatewayRequest['time'] = time; gatewayRequest['time'] = time;
gatewayRequest['token'] = token; gatewayRequest['token'] = token;

16
report-ui/src/utils/storage.js
Unescape Escape View File

@ -1,10 +1,18 @@
/*
* @Descripttion:
* @version:
* @Author: qianlishi
* @Date: 2021-12-11 14:48:27
* @LastEditors: qianlishi
* @LastEditTime: 2021-12-13 10:16:49
*/
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
export function setCookie(k, v) { export function setCookie(k, v) {
if(typeof(v) == "undefined" || v == null){ if(typeof(v) == "undefined" || v == null){
return; return;
} }
var val = v; let val = v;
if(typeof(v) == "object"){ if(typeof(v) == "object"){
val = JSON.stringify(v); val = JSON.stringify(v);
} }
@ -13,7 +21,7 @@ export function setCookie(k, v) {
} }
export function getCookie(k) { export function getCookie(k) {
var val = Cookies.get(k); let val = Cookies.get(k);
try{ try{
//如果是number boolean jsonstring是不会报错的 //如果是number boolean jsonstring是不会报错的
return JSON.parse(val); return JSON.parse(val);
@ -32,7 +40,7 @@ export function setStorageItem(k, v) {
return; return;
} }
var val = v; let val = v;
if(typeof(v) == "object"){ if(typeof(v) == "object"){
val = JSON.stringify(v); val = JSON.stringify(v);
} }
@ -40,7 +48,7 @@ export function setStorageItem(k, v) {
} }
export function getStorageItem(k) { export function getStorageItem(k) {
var val = localStorage.getItem(k); let val = localStorage.getItem(k);
try{ try{
//如果是number boolean jsonstring是不会报错的 //如果是number boolean jsonstring是不会报错的
return JSON.parse(val); return JSON.parse(val);

10
report-ui/src/utils/throttle.js
Unescape Escape View File

@ -1,9 +1,17 @@
/*
* @Descripttion:
* @version:
* @Author: qianlishi
* @Date: 2021-12-11 14:48:27
* @LastEditors: qianlishi
* @LastEditTime: 2021-12-13 10:16:48
*/
/** /**
* 函数节流 * 函数节流
*/ */
export function _throttle(fn,delay){ export function _throttle(fn,delay){
let timer let timer
var delay = delay || 1000; //一秒内触发一次 let delay = delay || 1000; //一秒内触发一次
return function(...args){ return function(...args){
const context = this const context = this
let canExecute = !timer let canExecute = !timer

Write Preview
Loading…
Cancel
Save