Commit 80fe0d08 authored by “yiyousong”'s avatar “yiyousong”

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

parent 9a109961
......@@ -2,7 +2,10 @@
<div class="data-update">
<!-- 头部 -->
<div class="header flex aic jcb mb20 pdr6">
<a-space>
<a-button type="primary" @click="handleAdd">新增</a-button>
<a-button type="danger" @click="handleDelAll">批量删除</a-button>
</a-space>
<div class="search-box">
<a-input-group compact>
<a-select style="min-width: 100px" v-model="fieldCode">
......@@ -54,6 +57,10 @@
onShowSizeChange: showSizeChange,
}"
:data-source="tableData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:rowKey="(record) => record.id"
>
<!-- 序号 -->
......@@ -147,6 +154,7 @@ export default {
previewVisible: false,
previewData: {}, // 预览信息
appTemplate: [], // 字段模板列表
selectedRowKeys: [],
};
},
computed: {
......@@ -267,6 +275,19 @@ export default {
this.$refs.AddData.onEdit(row);
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) {
let _this = this;
......@@ -284,6 +305,7 @@ export default {
let { code, msg } = res.data;
if (code === 1) {
_this.$message.success(msg);
_this.selectedRowKeys = [];
_this.getDatasetList();
}
},
......
......@@ -2,7 +2,10 @@
<div class="field-config">
<!-- 头部 -->
<div class="header flex aic jcb mb20 pdr6">
<a-space>
<a-button type="primary" @click="handleAdd">新增字段</a-button>
<a-button type="danger" @click="handleDelAll">批量删除</a-button>
</a-space>
<a-input-search
style="width: 300px"
placeholder="请输入字段名称搜索"
......@@ -31,6 +34,10 @@
onShowSizeChange: showSizeChange,
}"
:data-source="tableData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:rowKey="(record) => record.id"
>
<!-- 序号 -->
......@@ -131,6 +138,7 @@ export default {
tableData: [],
fieldVisible: false,
title: "",
selectedRowKeys: [],
};
},
created() {
......@@ -187,6 +195,19 @@ export default {
this.$refs.AddField.onEdit(row);
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) {
let _this = this;
......@@ -204,6 +225,7 @@ export default {
let { code, msg } = res.data;
if (code === 1) {
_this.$message.success(msg);
_this.selectedRowKeys = [];
_this.getTempleteList();
}
},
......
......@@ -14,10 +14,11 @@
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<template v-for="(v, i) in form.appInfoFieldList">
<a-form-model-item
v-for="(v, i) in form.appInfoFieldList"
:key="v.fieldCode"
:label="v.fieldName"
:key="v.fieldCode"
v-if="changeShow(v)"
:class="{
content: v.fieldType == 'text',
'upload-item': v.fieldType == 'upload',
......@@ -122,7 +123,10 @@
/>
<!-- 富文本 -->
<div v-else-if="v.fieldType == 'text'" class="content-box">
<YQuillEditor v-model="v.fieldValue" height="auto"></YQuillEditor>
<YQuillEditor
v-model="v.fieldValue"
height="auto"
></YQuillEditor>
</div>
<!-- 文件上传 -->
<a-upload
......@@ -141,11 +145,34 @@
</a-button>
</a-upload>
<!-- 表格 -->
<div v-else-if="v.fieldType == 'table'">
<div class="search-box">
<a-space>
<a-select style="width: 120px" v-model="searchName">
<a-select-option value=""> 全部 </a-select-option>
<a-select-option
v-for="(v, i) in fieldTypeValue"
:key="i"
:value="v.dataIndex"
>
{{ v.title }}
</a-select-option>
</a-select>
<a-input-search
style="width: 300px"
placeholder="请输入关键字搜索"
enter-button="搜索"
v-model="searchVal"
allowClear
@search="onSearch"
/>
</a-space>
</div>
<a-table
bordered
v-else-if="v.fieldType == 'table'"
size="small"
:scroll="{ y: 550 }"
:loading="tableLoading"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
......@@ -177,7 +204,9 @@
</span>
</template>
</a-table>
</div>
</a-form-model-item>
</template>
</a-form-model>
</div>
<!-- 底部按钮 -->
......@@ -227,6 +256,7 @@ export default {
data() {
return {
loading: false,
tableLoading: false,
siteId: local.getLocal("siteId"),
api: process.env.VUE_APP_API_BASE_URL,
pageSizeOptions: ["10", "30", "50", "100", "200"],
......@@ -251,6 +281,9 @@ export default {
columns: [],
serviceApi: "",
serviceApiParams: {},
fieldTypeValue: [],
searchName: "",
searchVal: "",
};
},
computed: {
......@@ -267,6 +300,8 @@ export default {
// 关闭
onClose() {
this.$refs.form.resetFields();
this.selectedRowKeys = [];
this.selectedRow = [];
this.Visible = false;
},
// 提交
......@@ -315,7 +350,7 @@ export default {
if (v.id) {
delete v.id;
}
v.fieldValue = "";
v.fieldValue = undefined;
if (v.fieldType == "upload") {
v.fileList = [];
}
......@@ -330,14 +365,14 @@ export default {
customRender: "num",
},
};
let fieldTypeValue = JSON.parse(v.fieldTypeValue);
fieldTypeValue = Object.keys(fieldTypeValue).map((key) => {
this.fieldTypeValue = JSON.parse(v.fieldTypeValue);
this.fieldTypeValue = Object.keys(this.fieldTypeValue).map((key) => {
return {
title: fieldTypeValue[key],
title: this.fieldTypeValue[key],
dataIndex: key,
};
});
this.columns = [index, ...fieldTypeValue];
this.columns = [index, ...this.fieldTypeValue];
this.serviceApi = v.serviceApi;
this.serviceApiParams = JSON.parse(v.serviceApiParams);
this.getData();
......@@ -447,12 +482,19 @@ export default {
},
// 获取数据函数
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", {
size: this.size,
page: this.current,
siteId: this.siteId,
...obj,
...data,
});
this.tableLoading = false;
if (res.data.code == 1) {
let { data, total } = res.data.data;
this.tableList = data;
......@@ -465,6 +507,21 @@ export default {
this.size = pageSize;
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>
......@@ -496,6 +553,10 @@ export default {
.upload-item {
display: block !important;
}
.search-box {
margin-bottom: 10px;
text-align: right;
}
// .ant-input,
// .ant-select,
// .ant-calendar-picker {
......
......@@ -153,7 +153,7 @@
</template>
<script>
import { saveTemplete } from "@/services/market";
import { saveTemplete, getTempleteList } from "@/services/market";
import { changeCodeNumber } from "@/utils/validate";
const fieldTypeItem = [
{
......@@ -265,6 +265,7 @@ export default {
serviceApiParams: "", // 动态数据参数配置
remark: "", //
},
templeteList: [], // 字段列表
rules: {
fieldCode: [
{ required: true, validator: changeCodeNumber, trigger: "blur" },
......@@ -306,9 +307,26 @@ export default {
},
},
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() {
this.$refs.form.validate(async (valid) => {
if (valid) {
let bol = this.templeteList.some((v) => v.fieldType == "table");
if (bol) {
this.$message.warn("只能存在一个表格");
return;
}
let fieldTypeObj = {};
let apiParamsObj = {};
this.fieldType.forEach((v) => {
......@@ -356,6 +374,7 @@ export default {
Object.assign(this.form, this.$options.data().form);
this.form.appId = this.$route.query.id;
this.form.id && this.$delete(this.form, "id");
this.getTempleteList();
},
// 编辑
onEdit(data) {
......@@ -392,6 +411,7 @@ export default {
];
}
this.form = { ...data };
this.getTempleteList();
},
// 添加数据配置行数
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