记录iview表格行内查询
<template>
<div class="hello">
<h1>{{ sontablename }}</h1>
<!-- 搜索栏 -->
<div class="seek">
<div>
<Input
v-model="input"
placeholder="请输入内容..."
clearable
style="width: 200px"
/>
<Button type="primary" @click="seek">搜索</Button>
</div>
<div class="btn">
<Button type="primary" @click="seek">修改</Button>
<Button type="primary" @click="seek">删除</Button>
</div>
</div>
<div class="updiv">
<Table
height="584"
border
id="uptable"
:data="filters"
class="uptable"
:columns="tableColumnsFilters"
stripe
>
</Table>
</div>
<!-- :show-header=false @on-row-click="rowclick"-->
<Table
border
:show-header="false"
id="downtable"
:data="users"
height="496"
:columns="tableColumns"
highlight-row
@on-current-change="handleRowChange"
stripe
@on-row-dblclick="rowclicks"
>
<template slot-scope="{ row, index }" slot="action">
<div v-if="editIndex === index">
<Button @click="handleSave(index)">保存</Button>
<Button @click="editIndex = -1">取消</Button>
</div>
<div v-else>
<Button @click="handleEdit(row, index)">操作</Button>
</div>
</template>
</Table>
<!-- 分页器 -->
<div class="page">
<Page
:total="dataCount"
:page-size="pageSize"
show-total
class="paging"
@on-change="changepage"
></Page>
</div>
<!-- 详情弹出框 -->
<Modal v-model="modal1" title="详细信息" width="90" draggable @on-ok="ok">
<div class="details">
<div class="details-left">
<!-- 渲染说明
{{newdata6}} -->
<Table height="600" :columns="columns1" :data="data1"></Table>
</div>
<div class="details-right">
<Maps />
</div>
</div>
<div class="image">
照片名字
<el-image
style="width: 200px; height: 200px"
:src="url"
:preview-src-list="srcList"
>
</el-image>
</div>
</Modal>
</div>
</template>
<script>
import $ from "jquery";
import FilterTable from "./FilterTable";
import store from "@/store";
import { getinquire, fatherrefer } from "@/api/table";
import { getOptions } from "@/api/dynamicexec";
export default {
name: "Example",
props: ["menuID"],
components: { FilterTable },
data() {
return {
editIndex: -1, // 当前聚焦的输入框的行数
editName: "", // 第一列输入框,当然聚焦的输入框的输入内容,与 data 分离避免重构的闪烁
editAge: "", // 第二列输入框
editBirthday: "", // 第三列输入框
editAddress: "", // 第四列输入框
// 顶部搜索栏
input: "",
// 弹出框数据
modal1: false,
// 点击表格一行拿到的值
newdata6: [],
showIndex: true,
// 图片预览
url:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
srcList: [
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=374592787,881307294&fm=15&gp=0.jpg",
],
// 弹出框表格内容
columns1: [
{
title: "名称",
key: "name",
},
{
title: "字段名",
key: "prop",
},
{
title: "安卓录入规则",
key: "address",
},
],
data1: [
{
name: "系统编码",
prop: "epc",
address: "扫描RFID取得",
},
{
name: "资产编码",
prop: "data1",
address: "无",
},
{
name: "资产名称",
prop: "data2",
address: "手工录入",
},
{
name: "规格型号",
prop: "data3",
address: "手工录入",
},
{
name: "制造厂家",
prop: "data4",
address: "手工录入",
},
{
name: "出厂编号",
prop: "data5",
address: "手工录入",
},
{
name: "所属单位",
prop: "data6",
address: "只显示",
},
{
name: "原值",
prop: "data7",
address: "只显示",
},
{
name: "累计折旧",
prop: "data8",
address: "只显示",
},
{
name: "净值",
prop: "data9",
address: "只显示",
},
{
name: "折旧年限",
prop: "data10",
address: "只显示",
},
{
name: "减值准备",
prop: "data11",
address: "只显示",
},
{
name: "残值率",
prop: "data12",
address: "只显示",
},
{
name: "财务凭证",
prop: "data13",
address: "只显示",
},
{
name: "资产类别",
prop: "data14",
address: "只显示",
},
{
name: "复合资产",
prop: "data15",
address: "只显示",
},
{
name: "月折旧额 ",
prop: "data16",
address: "只显示",
},
{
name: "月折旧差异额 ",
prop: "data17",
address: "只显示(每月定时任务自动计算)",
},
{
name: "资产状况 ",
prop: "data18",
address: "只显示",
},
{
name: "维修记录 ",
prop: "data19",
address: "只显示",
},
{
name: "维修厂家 ",
prop: "data20",
address: "只显示",
},
{
name: "出厂日期 ",
prop: "data21",
address: "手工录入",
},
{
name: "资产来源 ",
prop: "data22",
address: "手工录入",
},
{
name: "资金渠道 ",
prop: "data23",
address: "手工录入",
},
{
name: "资产凭证 ",
prop: "data24",
address: "只显示",
},
{
name: "扫描定位 ",
prop: "data25",
address: "GPS采集",
},
{
name: "扫描时间 ",
prop: "data26",
address: "自动生成",
},
{
name: "扫描结果 ",
prop: "data27",
address: "???",
},
{
name: "扫描人 ",
prop: "data28",
address: "根据登陆信息自动填写",
},
{
name: "铭牌照片 ",
prop: "data29",
address: "拍照",
},
{
name: "地点照片 ",
prop: "data30",
address: "拍照",
},
{
name: "使用人(保管人)? ",
prop: "data31",
address: "只显示",
},
{
name: "盘盈(盘亏)原因 ",
prop: "data32",
address: "只显示",
},
{
name: "备注说明 ",
prop: "data33",
address: "只显示",
},
],
// 表格内容
users: [
{
epc: "小明",
data1: "17760172601",
data2: "1023007219@qq.com",
data3: "50",
data4: "50",
formatter: "1",
data5: "2020-02-03",
},
{
epc: "小白",
data1: "17712345678",
data2: "1023007219@qq.com",
data3: "10",
data4: "150",
formatter: "1",
data5: "2052-02-02",
},
{
epc: "小亮",
data1: "17760172601",
data2: "1023007219@qq.com",
data3: "50",
data4: "50",
formatter: "1",
data5: "2020-02-03",
},
],
// 列描述数据对象
tableColumns: [],
// 获取到具体表单ID
sontableid: "",
// 获取具体表单属性
tableattribute: [],
// 表单名字
sontablename: "",
// 定义的表格样式
newcolumns7: [],
// 上面表格数据
filters: [
{
title: "",
},
],
tableColumnsFilters: [],
search: {}, //过滤条件保存的对象,就是保存Input框和Select中值
filter: {},
// Select选项
label: "",
value: "",
dataSource: "",
option: [],
// 分页数据
ajaxHistoryData: [],
// 初始化信息总条数
dataCount: 0,
// 每页显示多少条
pageSize: 10,
// 分页器相关
historyData: [],
uptable: "",
downtable: "",
// 时间选择
options2: {
shortcuts: [
{
text: "1 week",
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: "1 month",
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
{
text: "3 months",
value() {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
},
],
},
};
},
created() {
// 分页器
this.handleListApproveHistory();
// 获取对应的表格信息
this.getTable();
},
mounted() {
// 滚动一个滚动条同时滚动多个table
$(".ivu-table-body").scroll(function () {
$(".ivu-table-body").scrollLeft($(this).scrollLeft());
});
},
watch: {},
methods: {
// 表格点击事件
handleRowChange(currentRow, oldCurrentRow) {
console.log(currentRow);
// console.log(oldCurrentRow);
this.newdata6.push(currentRow);
},
// 点击出现弹框
rowclicks() {
this.modal1 = true;
},
// 顶部搜索栏事件
seek() {
console.log(this.input);
},
// 点击弹出框确定事件
ok() {
this.$Message.info("Clicked ok");
console.log(this.data6);
},
// 获取对应的表格信息
getTable() {
new Promise((resolve, reject) => {
getinquire(this.menuID)
.then((res) => {
res.data.forEach((item) => {
this.sontablename = item.itemName;
this.sontableid = item.id;
});
resolve();
})
.catch((error) => {
console.log(error);
reject(error);
});
})
.then(() => {
// 获取到具体表格内容
// console.log(1);
return new Promise((resolve, reject) => {
fatherrefer(this.sontableid)
.then((res) => {
// 排序后push进数组
res.data.sort(function (a, b) {
return a.order - b.order;
});
// console.log(res.data);
res.data.forEach((item) => {
// console.log(item);
this.tableattribute.push(item);
});
resolve();
})
.catch((error) => {
console.log(error);
reject(error);
});
});
})
.then(() => {
// console.log(2);
// debugger
// console.log(this.tableattribute);
return new Promise((resolve, reject) => {
if (this.tableattribute.length > 1) {
this.tableattribute.forEach((item) => {
// console.log(item);
if ((item.dataSource = "string" || item.dataSource != "")) {
resolve();
} else if (
item.dataSource != "string" &&
item.dataSource != ""
) {
// console.log(item.dataSource);
// 获取下拉菜单
getOptions(item.dataSource)
.then((res) => {
// console.log(res.data);
this.option = res.data;
// console.log(this.option);
this.option.forEach((item) => {
// console.log(item);
this.label = item.label;
// console.log(item.value);
this.value = item.value;
});
resolve();
})
.catch((error) => {
console.log(error);
});
}
});
}
});
})
.then(() => {
// console.log(3);
return new Promise((resolve, reject) => {
if (this.tableattribute.length > 1) {
this.tableattribute.forEach((item) => {
let newcolumns = {
id: item.order,
title: item.label,
key: item.prop,
type: item.type,
width: item.width,
align: item.align,
filterType: item.filterType,
fixed: item.fixed,
sortable: item.sortable,
dataSource: item.dataSource,
filter: {
option: this.option,
type: item.filterType,
},
};
this.formatter = item.formatter;
this.newcolumns7.push(newcolumns);
this.newcolumns7.sort(function (a, b) {
return a.id - b.id;
});
this.tableColumns = this.newcolumns7;
// console.log(this.tableColumns);
this.getTableone();
});
}
});
});
},
// 获取的表格信息给到第一个Table里面
getTableone() {
for (let index in this.tableColumns) {
// console.log( this.tableColumns[index-1].title);
let filter = {};
/**
* 因为是采用的两个表的形式,过滤表中显示查询的Input,Select条件输组件,表头显示的是数据表的表头,渲染的数据是传入的columns中的filter字段
* 数据表隐藏表头,只显示数据,渲染的数据是传入的columns中的key值
*/
//将传入的列描述数据对象(columns) 的参数 复制给 过滤表的列描述数据对象(tableColumnsFilters)
this.$set(filter, "title", this.tableColumns[index].title);
this.$set(filter, "fixed", this.tableColumns[index].fixed);
this.$set(filter, "align", this.tableColumns[index].align);
this.$set(filter, "sortable", this.tableColumns[index].sortable);
this.$set(filter, "width", this.tableColumns[index].width);
this.$set(filter, "filterType", this.tableColumns[index].filterType);
let render = (h) => {};
/**
* 需要有搜索的列, 只要在 列描述数据对象columns中配置 filter属性就行如下:
{
title: '名字',
key: '_id',
filter: {
type: 'Input'
}
},
{
title: '交易金额 (元)',
key: 'money',
filter: {
type: 'Select',
option:status //选项
}
},
*/
//如果存在 过滤选项
if (this.tableColumns[index].filter) {
//过滤为 下拉选择框
if (
this.tableColumns[index].filter.type &&
this.tableColumns[index].filter.type === "Select"
) {
render = (h) => {
return h(
this.tableColumns[index].filter.type,
{
props: {
value: 0, //Select选项列表一般 0 为全部
},
on: {
"on-change": (val) => {
if (val === 0) {
//当选项是全部的时候删除 search中该字段的过滤条件
this.$delete(this.search, this.tableColumns[index].key);
return;
}
//添加字段过滤条件
this.$set(this.search, this.tableColumns[index].key, val);
// console.log(this.search);
},
},
},
this.createOptionsRender(index, h)
);
};
} else if (
this.tableColumns[index].filter.type &&
this.tableColumns[index].filter.type === "Input"
) {
//如果是输入框
render = (h) => {
//获取输入框的值,为了减少数据库的压力,我这里是
//通过回车和点击搜索按钮才进行数据过滤查询,如果
//要输入框变化就进行过滤,把 this.load()放到
//input事件方法就行了
let inputValue = {};
return h(this.tableColumns[index].filter.type, {
props: {
placeholder: "输入" + this.tableColumns[index].title,
icon: "ios-search",
},
on: {
input: (val) => {
inputValue = val;
if (!inputValue) {
this.validInputValue(index, inputValue);
}
this.$set(
this.search,
this.tableColumns[index].key,
inputValue
);
},
//input框后面的搜索按钮的点击事件
"on-click": () => {
this.validInputValue(index, inputValue);
},
"on-enter": () => {
this.validInputValue(index, inputValue);
},
},
});
};
} else if (
this.tableColumns[index].filter.type &&
this.tableColumns[index].filter.type === "DatePicker"
) {
//如果是时间选择器
render = (h) => {
return h(this.tableColumns[index].filter.type, {
props: {
type: "daterange",
format: "yyyy-MM-dd",
placeholder: "选择日期",
options: this.options2,
},
on: {
"on-change": (v1, v2) => {
// console.log(v1, v2);
this.validInputValue(index, v1);
this.$set(this.search, this.tableColumns[index].key, v1);
// console.log(this.search);
},
},
});
};
}
}
this.$set(filter, "render", render);
// console.log(filter);
this.filter = filter;
}
this.tableColumnsFilters.push(this.filter);
},
createOptionsRender(index, h) {
// console.log(this.tableColumns[index].filter);
//选项渲染
let optionRender = [];
if (this.tableColumns[index].filter.option) {
let option = this.tableColumns[index].filter.option;
// console.log(option);
for (let i in option) {
optionRender.push(
h(
"Option",
{
props: {
labei: option[i].labei,
value: option[i].value,
},
},
option[i].label
)
);
}
}
return optionRender;
},
//验证输入框的值
validInputValue(index, inputValue) {
if (!inputValue) {
this.$delete(this.search, this.tableColumns[index].key);
return;
}
this.$set(this.search, this.tableColumns[index].key, inputValue);
// 传给后台的数据
console.log(JSON.stringify(this.search, null, 4));
},
formatStatus(value, status) {
return status[value] || { value: "", name: "" };
},
// 分页器事件
handleListApproveHistory() {
// 保存取到的所有数据
this.ajaxHistoryData = this.users;
this.dataCount = this.users.length;
// 初始化显示,小于每页显示条数,全显,大于每页显示条数,取前每页条数显示
if (this.users.length < this.pageSize) {
this.users = this.ajaxHistoryData;
} else {
this.users = this.ajaxHistoryData.slice(0, this.pageSize);
}
},
changepage(index) {
var _start = (index - 1) * this.pageSize;
var _end = index * this.pageSize;
this.users = this.ajaxHistoryData.slice(_start, _end);
},
handleEdit(row, index) {
// this.editName = row.name;
// this.editAge = row.age;
// this.editAddress = row.address;
// this.editBirthday = row.birthday;
this.editIndex = index;
},
handleSave(index) {
// this.data[index].name = this.editName;
// this.data[index].age = this.editAge;
// this.data[index].birthday = this.editBirthday;
// this.data[index].address = this.editAddress;
this.editIndex = -1;
},
getBirthday(birthday) {
// const date = new Date(parseInt(birthday));
// const year = date.getFullYear();
// const month = date.getMonth() + 1;
// const day = date.getDate();
// return `${year}-${month}-${day}`;
},
},
};
</script>
<style scoped lang="scss">
h1 {
// border: 1px solid red;
box-shadow: 0px 3px 7px 2px rgba(26, 25, 25, 0.18);
background-color: #9ec8ff;
color: white;
text-align: center;
margin-bottom: 10px;
}
.btn {
margin-left: 20px;
}
.updiv {
position: relative;
// margin-bottom: 20px;
height: 88px;
}
.uptable {
position: relative;
margin-right: 17px;
}
.seek {
display: flex;
margin: 10px 0px 15px 15px;
.el-input {
position: relative;
font-size: 14px;
display: inline-block;
width: 200px;
margin-right: 10px;
}
}
.details {
width: 100%;
display: flex;
justify-content: space-between;
}
.details .details-left {
width: 30%;
}
.details .details-right {
width: 70%;
}
//弹出框图片位置
.image {
height: 200px;
border: 1px solid red;
img {
height: 200px;
}
}
//分页器
.page {
display: flex;
flex-direction: row-reverse;
margin-top: 10px;
margin-right: 50px;
}
</style>