master
parent
89df343373
commit
6a2405ebf4
|
After Width: | Height: | Size: 289 KiB |
@ -0,0 +1,10 @@
|
||||
const validation = new Map([
|
||||
['integer',/^-?\d+$/],//整数
|
||||
['date',/(^\d{10})|(^\d{13})|(^((\d\d\d\d(.+)|\d\d(.+))?(0?[1-9](.+)|1[012](.+))?((0?[1-9]|[12]\d|3[01])(.+))?\s?)((0?[0-9]|1[0-9]|2[0-3])(.+))?((0?[0-9]|[1-5][0-9])(.+))?((0?[0-9]|[1-5][0-9])(.+))?)$/],
|
||||
['email',/^[^\s@]+@[^\s@]+\.[^\s@]+$/],
|
||||
['idcard',/(^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3})|(^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx])$/],
|
||||
['mobile',/(^1[3456789]\d{9})|(^(0\d{2,3}(-)*)?\d{7})$/],
|
||||
['numeric',/^-?\d+(.\d+)?$/],
|
||||
])
|
||||
|
||||
export default validation
|
||||
|
After Width: | Height: | Size: 543 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 921 B |
@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<template>
|
||||
<div class="select">
|
||||
<Select
|
||||
v-model="select.filter[0].key"
|
||||
style="width: 100px"
|
||||
placeholder="搜索条目"
|
||||
>
|
||||
<Option v-for="item in fields" :key="item.id" :value="item.field">{{
|
||||
item.name
|
||||
}}</Option>
|
||||
</Select>
|
||||
<Select
|
||||
v-model="select.filter[0].op"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
placeholder="搜索条件"
|
||||
>
|
||||
<Option v-for="item in op" :key="item.value" :value="item.value">{{
|
||||
item.label
|
||||
}}</Option>
|
||||
</Select>
|
||||
<template v-if="select.filter[0].op !== 'range'">
|
||||
<Input
|
||||
clearable
|
||||
v-model="select.filter[0].value"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="请填写关键词"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Input
|
||||
:value="select.filter[0].value.split(',')[0]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围开始关键词"
|
||||
@input="(e) => inputStartHandler(e, select.filter[0])"
|
||||
/>
|
||||
<span style="margin-left: 10px; display: flex; align-items: center"
|
||||
>至</span
|
||||
>
|
||||
<Input
|
||||
:value="select.filter[0].value.split(',')[1]"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
placeholder="范围结束关键词"
|
||||
@input="(e) => inputEndHandler(e, select.filter[0])"
|
||||
/>
|
||||
</template>
|
||||
<Button
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
@click="$refs['table'].getTableData(true)"
|
||||
>查询</Button
|
||||
>
|
||||
</div>
|
||||
<xy-table
|
||||
:is-first-req="false"
|
||||
ref="table"
|
||||
:row-key="(row) => row.id"
|
||||
:height="380"
|
||||
:action="index"
|
||||
:delay-req="true"
|
||||
:req-opt="select"
|
||||
:table-item="columns"
|
||||
@row-click="rowPick"
|
||||
@loaded="() => {
|
||||
adjustAlignment();
|
||||
selectRows();
|
||||
}"
|
||||
@select="selectBk"
|
||||
></xy-table>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button size="mini" @click="dialogVisible = false"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button size="mini" type="primary" @click="confirm"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { op } from '@/const/op'
|
||||
import { index } from "@/api/system/baseForm";
|
||||
import { index as customFormIndex, show } from "@/api/system/customForm";
|
||||
export default {
|
||||
props: {
|
||||
linkType: String,
|
||||
linkTableName: String,
|
||||
field: String,
|
||||
originalRows: {
|
||||
default: () => [],
|
||||
type: [Array,Object],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
firstAdjustTable: true,
|
||||
op,
|
||||
tempRow: {},
|
||||
dialogVisible: false,
|
||||
select: {
|
||||
table_name: "",
|
||||
table_id: "",
|
||||
filter: [
|
||||
{
|
||||
key: '',
|
||||
op: '',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
fields: [],
|
||||
columns: [],
|
||||
originalRowIds: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
index,
|
||||
show() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
hide() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
|
||||
//target要为内存地址引用类型
|
||||
inputStartHandler(e, target) {
|
||||
let temp = target?.value.split(",")[1];
|
||||
target.value = `${e},${temp ? temp : ""}`;
|
||||
},
|
||||
inputEndHandler(e, target) {
|
||||
let temp = target?.value.split(",")[0];
|
||||
target.value = `${temp ? temp : ""},${e}`;
|
||||
},
|
||||
|
||||
|
||||
async getDataTableName() {
|
||||
if (this.linkType === "hasMany" || this.linkType === "newHasMany") {
|
||||
const tables = (
|
||||
await customFormIndex({
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
})
|
||||
)?.data;
|
||||
|
||||
const id = tables?.find((i) => i.table_name === this.linkTableName)?.id;
|
||||
const res = (
|
||||
await show(
|
||||
{
|
||||
id,
|
||||
},
|
||||
false
|
||||
)
|
||||
)?.relation[0]?.link_table_name;
|
||||
|
||||
this.select.table_name = res;
|
||||
this.select.table_id = tables.find(
|
||||
(i) => i.table_name === this.select.table_name
|
||||
)?.id;
|
||||
}
|
||||
if (this.linkType === "hasOne" || this.linkType === "newHasOne") {
|
||||
const tables = (
|
||||
await customFormIndex({
|
||||
page: 1,
|
||||
page_size: 999,
|
||||
})
|
||||
)?.data;
|
||||
|
||||
const table = tables?.find((i) => i.table_name === this.linkTableName);
|
||||
this.select.table_name = table.table_name;
|
||||
this.select.table_id = table.id;
|
||||
}
|
||||
},
|
||||
async getColumns() {
|
||||
const res = await show(
|
||||
{
|
||||
id: this.select.table_id,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
console.log(res);
|
||||
this.fields = res.fields;
|
||||
this.columns = res.fields
|
||||
?.filter((i) => i.list_show)
|
||||
.map((i) => {
|
||||
let linkOb = {};
|
||||
|
||||
if (
|
||||
i.select_item &&
|
||||
typeof i.select_item === "object" &&
|
||||
!(i.select_item instanceof Array)
|
||||
) {
|
||||
let keys = Object.keys(i.select_item);
|
||||
linkOb.customFn = (row) => {
|
||||
let paramMap = new Map();
|
||||
keys.forEach((key) => {
|
||||
paramMap.set(i.select_item[key], key);
|
||||
});
|
||||
|
||||
return <span>{paramMap.get(row[i.field]?.toString())}</span>;
|
||||
};
|
||||
}
|
||||
|
||||
return Object.assign(
|
||||
{
|
||||
prop: i.field,
|
||||
label: i.name,
|
||||
width: i.width,
|
||||
fixed: i.is_fixed,
|
||||
},
|
||||
linkOb
|
||||
);
|
||||
});
|
||||
this.columns.unshift({
|
||||
type: "index",
|
||||
width: 50,
|
||||
});
|
||||
|
||||
if (this.linkType === "hasMany" || this.linkType === "newHasMany") {
|
||||
this.columns.unshift({
|
||||
type: "selection",
|
||||
width: 50,
|
||||
reserveSelection: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
adjustAlignment () {
|
||||
if (this.firstAdjustTable) {
|
||||
const data = this.$refs['table'].getListData();
|
||||
if (data.length === 0) return;
|
||||
this.fields.forEach((i) => {
|
||||
let lengthTemp = data[0][i.field]?.length??0;
|
||||
for (let j = 0;j < data.length;j++) {
|
||||
if (/^-?\d+\.\d+/.test(data[j][i.field])) {
|
||||
this.columns.find(a => a.prop === i.field).align = 'right';
|
||||
return
|
||||
}
|
||||
if (Math.abs(lengthTemp - (data[j][i.field]?.length)??0) > 4) {
|
||||
this.columns.find(a => a.prop === i.field).align = 'left';
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.$refs['table'].doLayout();
|
||||
this.firstAdjustTable = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
selectRows() {
|
||||
this.originalRowIds.forEach((id) => {
|
||||
let data = this.$refs["table"].getListData();
|
||||
|
||||
let row = data.find((i) => i.id === id);
|
||||
if (row) {
|
||||
this.$refs["table"].toggleRowSelection(row);
|
||||
}
|
||||
});
|
||||
},
|
||||
rowPick({ row }) {
|
||||
this.tempRow = row;
|
||||
},
|
||||
selectBk(selections, row) {
|
||||
if (!selections.find((i) => i.id === row.id)) {
|
||||
this.originalRowIds.splice(this.originalRowIds.indexOf(row.id), 1);
|
||||
}
|
||||
},
|
||||
confirm() {
|
||||
this.linkType === "hasMany" || this.linkType === "newHasMany"
|
||||
? this.$emit("confirm", {
|
||||
field: this.field,
|
||||
value: Array.from(
|
||||
new Set([
|
||||
...this.$refs["table"].getSelection()?.map((i) => i.id),
|
||||
...this.originalRowIds,
|
||||
])
|
||||
),
|
||||
})
|
||||
: this.$emit("confirm", {
|
||||
field: this.field,
|
||||
value: this.tempRow.id,
|
||||
text: this.tempRow.name || this.tempRow.value || this.tempRow.mingcheng || this.tempRow.no || this.tempRow.id
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
async linkTableName(newVal) {
|
||||
await this.getDataTableName();
|
||||
await this.getColumns();
|
||||
await this.$refs["table"].getTableData();
|
||||
},
|
||||
dialogVisible(newVal) {
|
||||
if (newVal) {
|
||||
} else {
|
||||
this.firstAdjustTable = true;
|
||||
this.tempRow = {};
|
||||
this.$refs["table"].clearSelection();
|
||||
}
|
||||
},
|
||||
originalRows(newVal) {
|
||||
this.originalRowIds = newVal.map((i) => i[this.field]);
|
||||
|
||||
this.selectRows();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.select {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="d-flex">
|
||||
<svg style="position: absolute;" width="0" height="0">
|
||||
<defs>
|
||||
<linearGradient id="card-item-color" x1="50%" y1="0%" x2="50%" y2="100%">
|
||||
<stop offset="0%" stop-color="#00000033"></stop>
|
||||
<stop offset="100%" stop-color="#3eb29c66"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<dv-border-box-13 v-for="item in items" class="dv-box">
|
||||
<div class="card">
|
||||
<div class="card-left">
|
||||
<p class="card__title">{{ item.text }}</p>
|
||||
<p class="card__text">
|
||||
<span class="card__text--num">{{ item.num }}</span>
|
||||
<span class="card__text--unit">{{ item.unit }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<SvgIcon icon-class="house" class="img"></SvgIcon>
|
||||
|
||||
<div class="img-base">
|
||||
<div class="square1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SvgIcon from "@/components/SvgIcon"
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
text: "资产总量",
|
||||
num: 36650,
|
||||
unit: "平方"
|
||||
},
|
||||
{
|
||||
text: "土地资产",
|
||||
num: 99966,
|
||||
unit: "亩"
|
||||
},
|
||||
{
|
||||
text: "房屋资产",
|
||||
num: 8888,
|
||||
unit: "平方"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 20px 30px;
|
||||
&__title {
|
||||
line-height: 2;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #73f3df;
|
||||
}
|
||||
&__text {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
|
||||
&--num {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
& > .card-right {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
& > .img {
|
||||
color: #73f3e0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
z-index: 3;
|
||||
transform: translateY(-8px);
|
||||
position: relative;
|
||||
}
|
||||
.img-base {
|
||||
width: 100%;
|
||||
perspective: 100px;
|
||||
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 110%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #00000033 , #61b9ac);
|
||||
transform: translateY(-86%);
|
||||
position: absolute;
|
||||
left: -5%;
|
||||
top: 0;
|
||||
}
|
||||
.square1 {
|
||||
background: linear-gradient(to bottom, #00000033 ,#4fa497);
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
box-shadow: 0 0 2px 2px #7ddacd;
|
||||
transform: rotateX(45deg);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 120%;
|
||||
height: 136%;
|
||||
background: transparent;
|
||||
border: 2px solid #7ddacd;
|
||||
position: absolute;
|
||||
left: -10%;
|
||||
top: -18%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dv-box + .dv-box {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.dv-box path:nth-child(1) {
|
||||
fill: url(#card-item-color);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue