Skip to content

S
smart_gov_platform
Commit 80fe0d08 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf:应用添加数据时表格可以搜索

parent 9a109961
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 168 deletions
base-manager-ui/admin/src/pages/basicset/appmarket/components/DataUpdate.vue
View file @ 80fe0d08
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<div class="data-update"> <div class="data-update">
<!-- 头部 --> <!-- 头部 -->
<div class="header flex aic jcb mb20 pdr6"> <div class="header flex aic jcb mb20 pdr6">
<a-button type="primary" @click="handleAdd">新增</a-button> <a-space>
<a-button type="primary" @click="handleAdd">新增</a-button>
<a-button type="danger" @click="handleDelAll">批量删除</a-button>
</a-space>
<div class="search-box"> <div class="search-box">
<a-input-group compact> <a-input-group compact>
<a-select style="min-width: 100px" v-model="fieldCode"> <a-select style="min-width: 100px" v-model="fieldCode">
...@@ -54,6 +57,10 @@ ...@@ -54,6 +57,10 @@
onShowSizeChange: showSizeChange, onShowSizeChange: showSizeChange,
}" }"
:data-source="tableData" :data-source="tableData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
> >
<!-- 序号 --> <!-- 序号 -->
...@@ -147,6 +154,7 @@ export default { ...@@ -147,6 +154,7 @@ export default {
previewVisible: false, previewVisible: false,
previewData: {}, // 预览信息 previewData: {}, // 预览信息
appTemplate: [], // 字段模板列表 appTemplate: [], // 字段模板列表
selectedRowKeys: [],
}; };
}, },
computed: { computed: {
...@@ -267,6 +275,19 @@ export default { ...@@ -267,6 +275,19 @@ export default {
this.$refs.AddData.onEdit(row); this.$refs.AddData.onEdit(row);
this.AddVisible = true; this.AddVisible = true;
}, },
// 选择
onSelectChange(keys) {
this.selectedRowKeys = keys;
},
// 批量删除
handleDelAll() {
if (!this.selectedRowKeys.length) {
this.$message.warn("请先勾选数据");
return;
}
let ids = this.selectedRowKeys.join(",");
this.handleDel(ids);
},
// 删除 // 删除
handleDel(id) { handleDel(id) {
let _this = this; let _this = this;
...@@ -284,6 +305,7 @@ export default { ...@@ -284,6 +305,7 @@ export default {
let { code, msg } = res.data; let { code, msg } = res.data;
if (code === 1) { if (code === 1) {
_this.$message.success(msg); _this.$message.success(msg);
_this.selectedRowKeys = [];
_this.getDatasetList(); _this.getDatasetList();
} }
}, },
......
base-manager-ui/admin/src/pages/basicset/appmarket/components/FieldConfig.vue
View file @ 80fe0d08
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<div class="field-config"> <div class="field-config">
<!-- 头部 --> <!-- 头部 -->
<div class="header flex aic jcb mb20 pdr6"> <div class="header flex aic jcb mb20 pdr6">
<a-button type="primary" @click="handleAdd">新增字段</a-button> <a-space>
<a-button type="primary" @click="handleAdd">新增字段</a-button>
<a-button type="danger" @click="handleDelAll">批量删除</a-button>
</a-space>
<a-input-search <a-input-search
style="width: 300px" style="width: 300px"
placeholder="请输入字段名称搜索" placeholder="请输入字段名称搜索"
...@@ -31,6 +34,10 @@ ...@@ -31,6 +34,10 @@
onShowSizeChange: showSizeChange, onShowSizeChange: showSizeChange,
}" }"
:data-source="tableData" :data-source="tableData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:rowKey="(record) => record.id" :rowKey="(record) => record.id"
> >
<!-- 序号 --> <!-- 序号 -->
...@@ -131,6 +138,7 @@ export default { ...@@ -131,6 +138,7 @@ export default {
tableData: [], tableData: [],
fieldVisible: false, fieldVisible: false,
title: "", title: "",
selectedRowKeys: [],
}; };
}, },
created() { created() {
...@@ -187,6 +195,19 @@ export default { ...@@ -187,6 +195,19 @@ export default {
this.$refs.AddField.onEdit(row); this.$refs.AddField.onEdit(row);
this.fieldVisible = true; this.fieldVisible = true;
}, },
// 选择
onSelectChange(keys) {
this.selectedRowKeys = keys;
},
// 批量删除
handleDelAll() {
if (!this.selectedRowKeys.length) {
this.$message.warn("请先勾选数据");
return;
}
let ids = this.selectedRowKeys.join(",");
this.handleDel(ids);
},
// 删除 // 删除
handleDel(id) { handleDel(id) {
let _this = this; let _this = this;
...@@ -204,6 +225,7 @@ export default { ...@@ -204,6 +225,7 @@ export default {
let { code, msg } = res.data; let { code, msg } = res.data;
if (code === 1) { if (code === 1) {
_this.$message.success(msg); _this.$message.success(msg);
_this.selectedRowKeys = [];
_this.getTempleteList(); _this.getTempleteList();
} }
}, },
......
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddData.vue
View file @ 80fe0d08
...@@ -14,170 +14,199 @@ ...@@ -14,170 +14,199 @@
:label-col="labelCol" :label-col="labelCol"
:wrapper-col="wrapperCol" :wrapper-col="wrapperCol"
> >
<a-form-model-item <template v-for="(v, i) in form.appInfoFieldList">
v-for="(v, i) in form.appInfoFieldList" <a-form-model-item
:key="v.fieldCode" :label="v.fieldName"
:label="v.fieldName" :key="v.fieldCode"
:class="{ v-if="changeShow(v)"
content: v.fieldType == 'text', :class="{
'upload-item': v.fieldType == 'upload', content: v.fieldType == 'text',
}" 'upload-item': v.fieldType == 'upload',
:prop="`appInfoFieldList.${i}.fieldValue`" }"
:rules="{ :prop="`appInfoFieldList.${i}.fieldValue`"
required: v.fieldNull ? false : true, :rules="{
message: `${v.fieldName}不能为空`, required: v.fieldNull ? false : true,
trigger: v.fieldType == 'text' ? 'blur' : 'change', message: `${v.fieldName}不能为空`,
}" trigger: v.fieldType == 'text' ? 'blur' : 'change',
> }"
<!-- 单行输入框 -->
<a-input
v-if="v.fieldType == 'input'"
v-model="v.fieldValue"
:placeholder="`请输入${v.fieldName}`"
/>
<!-- 多选框 -->
<a-checkbox-group
v-else-if="v.fieldType == 'checkbox'"
v-model="v.checkbox"
@change="(vals) => changeCheckBox(vals, v)"
> >
<a-checkbox <!-- 单行输入框 -->
v-for="(item, key) in JSON.parse(v.fieldTypeValue)" <a-input
:key="key" v-if="v.fieldType == 'input'"
:value="key" v-model="v.fieldValue"
:placeholder="`请输入${v.fieldName}`"
/>
<!-- 多选框 -->
<a-checkbox-group
v-else-if="v.fieldType == 'checkbox'"
v-model="v.checkbox"
@change="(vals) => changeCheckBox(vals, v)"
> >
{{ item }} <a-checkbox
</a-checkbox> v-for="(item, key) in JSON.parse(v.fieldTypeValue)"
</a-checkbox-group> :key="key"
<!--单选框 --> :value="key"
<a-radio-group >
v-else-if="v.fieldType == 'radio'" {{ item }}
v-model="v.fieldValue" </a-checkbox>
> </a-checkbox-group>
<a-radio <!--单选框 -->
v-for="(item, key) in JSON.parse(v.fieldTypeValue)" <a-radio-group
:key="key" v-else-if="v.fieldType == 'radio'"
:value="key" v-model="v.fieldValue"
> >
{{ item }} <a-radio
</a-radio> v-for="(item, key) in JSON.parse(v.fieldTypeValue)"
</a-radio-group> :key="key"
<!-- 下拉选择框 --> :value="key"
<a-select >
v-else-if="v.fieldType == 'select'" {{ item }}
v-model="v.fieldValue" </a-radio>
placeholder="请选择" </a-radio-group>
> <!-- 下拉选择框 -->
<a-select-option <a-select
v-for="(item, key) in JSON.parse(v.fieldTypeValue)" v-else-if="v.fieldType == 'select'"
:key="key" v-model="v.fieldValue"
:value="key" placeholder="请选择"
> >
{{ item }} <a-select-option
</a-select-option> v-for="(item, key) in JSON.parse(v.fieldTypeValue)"
</a-select> :key="key"
<!-- 日期选择器 --> :value="key"
<a-date-picker >
v-else-if="v.fieldType == 'date'" {{ item }}
v-model="v.fieldValue" </a-select-option>
:placeholder="`请选择${v.fieldName}`" </a-select>
valueFormat="YYYY-MM-DD" <!-- 日期选择器 -->
/> <a-date-picker
<!-- 年选择器 --> v-else-if="v.fieldType == 'date'"
<a-date-picker v-model="v.fieldValue"
mode="year" :placeholder="`请选择${v.fieldName}`"
v-else-if="v.fieldType == 'year'" valueFormat="YYYY-MM-DD"
v-model="v.fieldValue" />
:placeholder="`请选择${v.fieldName}`" <!-- 年选择器 -->
valueFormat="YYYY" <a-date-picker
format="YYYY" mode="year"
:open="isopen" v-else-if="v.fieldType == 'year'"
@openChange="handYearChange" v-model="v.fieldValue"
@panelChange="(value) => panelYearChange(value, v)" :placeholder="`请选择${v.fieldName}`"
/> valueFormat="YYYY"
<!-- 月选择器 --> format="YYYY"
<a-month-picker :open="isopen"
v-else-if="v.fieldType == 'month'" @openChange="handYearChange"
v-model="v.fieldValue" @panelChange="(value) => panelYearChange(value, v)"
:placeholder="`请选择${v.fieldName}`" />
valueFormat="M" <!-- 月选择器 -->
/> <a-month-picker
<!-- 周选择器 --> v-else-if="v.fieldType == 'month'"
<a-week-picker v-model="v.fieldValue"
v-else-if="v.fieldType == 'week'" :placeholder="`请选择${v.fieldName}`"
v-model="v.fieldValue" valueFormat="M"
:placeholder="`请选择${v.fieldName}`" />
valueFormat="YYYY-WW" <!-- 周选择器 -->
/> <a-week-picker
<!-- 多行文本输入框 --> v-else-if="v.fieldType == 'week'"
<a-textarea v-model="v.fieldValue"
v-else-if="v.fieldType == 'textarea'" :placeholder="`请选择${v.fieldName}`"
v-model="v.fieldValue" valueFormat="YYYY-WW"
:autoSize="{ />
minRows: 4, <!-- 多行文本输入框 -->
maxRows: 4, <a-textarea
}" v-else-if="v.fieldType == 'textarea'"
:placeholder="`请输入${v.fieldName}`" v-model="v.fieldValue"
allow-clear :autoSize="{
/> minRows: 4,
<!-- 富文本 --> maxRows: 4,
<div v-else-if="v.fieldType == 'text'" class="content-box"> }"
<YQuillEditor v-model="v.fieldValue" height="auto"></YQuillEditor> :placeholder="`请输入${v.fieldName}`"
</div> allow-clear
<!-- 文件上传 --> />
<a-upload <!-- 富文本 -->
v-else-if="v.fieldType == 'upload'" <div v-else-if="v.fieldType == 'text'" class="content-box">
:action="api + '/base/file/commonupload'" <YQuillEditor
:multiple="true" v-model="v.fieldValue"
:file-list="v.fileList" height="auto"
@change=" ></YQuillEditor>
(info) => { </div>
handleChange(info, v); <!-- 文件上传 -->
} <a-upload
" v-else-if="v.fieldType == 'upload'"
> :action="api + '/base/file/commonupload'"
<a-button type="primary"> :multiple="true"
<a-icon type="upload" /> 点击上传 :file-list="v.fileList"
</a-button> @change="
</a-upload> (info) => {
<!-- 表格 --> handleChange(info, v);
<a-table }
bordered "
v-else-if="v.fieldType == 'table'" >
size="small" <a-button type="primary">
:scroll="{ y: 550 }" <a-icon type="upload" /> 点击上传
:pagination="{ </a-button>
showTotal: (total) => `共 ${total} 条`, </a-upload>
current: current, <!-- 表格 -->
total: total, <div v-else-if="v.fieldType == 'table'">
pageSize: size, <div class="search-box">
showSizeChanger: true, <a-space>
showQuickJumper: true, <a-select style="width: 120px" v-model="searchName">
pageSizeOptions: pageSizeOptions, <a-select-option value=""> 全部 </a-select-option>
}" <a-select-option
:columns="columns" v-for="(v, i) in fieldTypeValue"
:data-source="tableList" :key="i"
:row-selection="{ :value="v.dataIndex"
selectedRowKeys: selectedRowKeys, >
onChange: (keys, rows) => { {{ v.title }}
onSelectChange( </a-select-option>
keys, </a-select>
rows, <a-input-search
v, style="width: 300px"
`appInfoFieldList.${i}.fieldValue` placeholder="请输入关键字搜索"
); enter-button="搜索"
}, v-model="searchVal"
}" allowClear
@change="changeTable" @search="onSearch"
:rowKey="(record) => record.id" />
> </a-space>
<template slot="num" slot-scope="text, record, index"> </div>
<span> <a-table
{{ (current - 1) * size + index + 1 }} bordered
</span> size="small"
</template> :scroll="{ y: 550 }"
</a-table> :loading="tableLoading"
</a-form-model-item> :pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
}"
:columns="columns"
:data-source="tableList"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: (keys, rows) => {
onSelectChange(
keys,
rows,
v,
`appInfoFieldList.${i}.fieldValue`
);
},
}"
@change="changeTable"
:rowKey="(record) => record.id"
>
<template slot="num" slot-scope="text, record, index">
<span>
{{ (current - 1) * size + index + 1 }}
</span>
</template>
</a-table>
</div>
</a-form-model-item>
</template>
</a-form-model> </a-form-model>
</div> </div>
<!-- 底部按钮 --> <!-- 底部按钮 -->
...@@ -227,6 +256,7 @@ export default { ...@@ -227,6 +256,7 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
tableLoading: false,
siteId: local.getLocal("siteId"), siteId: local.getLocal("siteId"),
api: process.env.VUE_APP_API_BASE_URL, api: process.env.VUE_APP_API_BASE_URL,
pageSizeOptions: ["10", "30", "50", "100", "200"], pageSizeOptions: ["10", "30", "50", "100", "200"],
...@@ -251,6 +281,9 @@ export default { ...@@ -251,6 +281,9 @@ export default {
columns: [], columns: [],
serviceApi: "", serviceApi: "",
serviceApiParams: {}, serviceApiParams: {},
fieldTypeValue: [],
searchName: "",
searchVal: "",
}; };
}, },
computed: { computed: {
...@@ -267,6 +300,8 @@ export default { ...@@ -267,6 +300,8 @@ export default {
// 关闭 // 关闭
onClose() { onClose() {
this.$refs.form.resetFields(); this.$refs.form.resetFields();
this.selectedRowKeys = [];
this.selectedRow = [];
this.Visible = false; this.Visible = false;
}, },
// 提交 // 提交
...@@ -315,7 +350,7 @@ export default { ...@@ -315,7 +350,7 @@ export default {
if (v.id) { if (v.id) {
delete v.id; delete v.id;
} }
v.fieldValue = ""; v.fieldValue = undefined;
if (v.fieldType == "upload") { if (v.fieldType == "upload") {
v.fileList = []; v.fileList = [];
} }
...@@ -330,14 +365,14 @@ export default { ...@@ -330,14 +365,14 @@ export default {
customRender: "num", customRender: "num",
}, },
}; };
let fieldTypeValue = JSON.parse(v.fieldTypeValue); this.fieldTypeValue = JSON.parse(v.fieldTypeValue);
fieldTypeValue = Object.keys(fieldTypeValue).map((key) => { this.fieldTypeValue = Object.keys(this.fieldTypeValue).map((key) => {
return { return {
title: fieldTypeValue[key], title: this.fieldTypeValue[key],
dataIndex: key, dataIndex: key,
}; };
}); });
this.columns = [index, ...fieldTypeValue]; this.columns = [index, ...this.fieldTypeValue];
this.serviceApi = v.serviceApi; this.serviceApi = v.serviceApi;
this.serviceApiParams = JSON.parse(v.serviceApiParams); this.serviceApiParams = JSON.parse(v.serviceApiParams);
this.getData(); this.getData();
...@@ -447,12 +482,19 @@ export default { ...@@ -447,12 +482,19 @@ export default {
}, },
// 获取数据函数 // 获取数据函数
async getData(data) { async getData(data) {
let obj = {};
if (this.searchName) {
obj[this.searchName] = `%${this.searchVal}%`;
}
this.tableLoading = true;
let res = await request(this.api + this.serviceApi, "post", { let res = await request(this.api + this.serviceApi, "post", {
size: this.size, size: this.size,
page: this.current, page: this.current,
siteId: this.siteId, siteId: this.siteId,
...obj,
...data, ...data,
}); });
this.tableLoading = false;
if (res.data.code == 1) { if (res.data.code == 1) {
let { data, total } = res.data.data; let { data, total } = res.data.data;
this.tableList = data; this.tableList = data;
...@@ -465,6 +507,21 @@ export default { ...@@ -465,6 +507,21 @@ export default {
this.size = pageSize; this.size = pageSize;
this.getData(); this.getData();
}, },
// 搜索表格
onSearch() {
this.current = 1;
this.getData();
},
changeShow(row) {
let bol = Object.keys(this.serviceApiParams).some((key) => {
return row.fieldCode == key;
});
if (this.selectedRow.length && bol) {
return false;
} else {
return true;
}
},
}, },
}; };
</script> </script>
...@@ -496,6 +553,10 @@ export default { ...@@ -496,6 +553,10 @@ export default {
.upload-item { .upload-item {
display: block !important; display: block !important;
} }
.search-box {
margin-bottom: 10px;
text-align: right;
}
// .ant-input, // .ant-input,
// .ant-select, // .ant-select,
// .ant-calendar-picker { // .ant-calendar-picker {
......
base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddField.vue
View file @ 80fe0d08
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
</template> </template>
<script> <script>
import { saveTemplete } from "@/services/market"; import { saveTemplete, getTempleteList } from "@/services/market";
import { changeCodeNumber } from "@/utils/validate"; import { changeCodeNumber } from "@/utils/validate";
const fieldTypeItem = [ const fieldTypeItem = [
{ {
...@@ -265,6 +265,7 @@ export default { ...@@ -265,6 +265,7 @@ export default {
serviceApiParams: "", // 动态数据参数配置 serviceApiParams: "", // 动态数据参数配置
remark: "", // remark: "", //
}, },
templeteList: [], // 字段列表
rules: { rules: {
fieldCode: [ fieldCode: [
{ required: true, validator: changeCodeNumber, trigger: "blur" }, { required: true, validator: changeCodeNumber, trigger: "blur" },
...@@ -306,9 +307,26 @@ export default { ...@@ -306,9 +307,26 @@ export default {
}, },
}, },
methods: { methods: {
// 获取数据模板
async getTempleteList() {
let res = await getTempleteList({
page: 1,
size: -1,
appId: this.$route.query.id,
});
if (res.data.code === 1) {
let { data } = res.data.data;
this.templeteList = data;
}
},
handleOk() { handleOk() {
this.$refs.form.validate(async (valid) => { this.$refs.form.validate(async (valid) => {
if (valid) { if (valid) {
let bol = this.templeteList.some((v) => v.fieldType == "table");
if (bol) {
this.$message.warn("只能存在一个表格");
return;
}
let fieldTypeObj = {}; let fieldTypeObj = {};
let apiParamsObj = {}; let apiParamsObj = {};
this.fieldType.forEach((v) => { this.fieldType.forEach((v) => {
...@@ -356,6 +374,7 @@ export default { ...@@ -356,6 +374,7 @@ export default {
Object.assign(this.form, this.$options.data().form); Object.assign(this.form, this.$options.data().form);
this.form.appId = this.$route.query.id; this.form.appId = this.$route.query.id;
this.form.id && this.$delete(this.form, "id"); this.form.id && this.$delete(this.form, "id");
this.getTempleteList();
}, },
// 编辑 // 编辑
onEdit(data) { onEdit(data) {
...@@ -392,6 +411,7 @@ export default { ...@@ -392,6 +411,7 @@ export default {
]; ];
} }
this.form = { ...data }; this.form = { ...data };
this.getTempleteList();
}, },
// 添加数据配置行数 // 添加数据配置行数
insertion(index, type) { insertion(index, type) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment