updat anji-curd
qianlishi
3 years ago
parent
9b2b162d40
commit
4a6cd7a282
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -1,12 +1,12 @@
|
||||
import CryptoJS from 'crypto-js'
|
||||
export function aesEncrypt(word){
|
||||
var key = CryptoJS.enc.Utf8.parse("BGxdEUOZkXka4HSj");
|
||||
var srcs = CryptoJS.enc.Utf8.parse(word);
|
||||
var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
|
||||
let key = CryptoJS.enc.Utf8.parse("BGxdEUOZkXka4HSj");
|
||||
let srcs = CryptoJS.enc.Utf8.parse(word);
|
||||
let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
|
||||
return encrypted.toString();
|
||||
}
|
||||
export function aesDecrypt(word){
|
||||
var key = CryptoJS.enc.Utf8.parse("BGxdEUOZkXka4HSj");
|
||||
var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
|
||||
let key = CryptoJS.enc.Utf8.parse("BGxdEUOZkXka4HSj");
|
||||
let decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
|
||||
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue