Skip to content

Z
zhichan
Commit a254c334 by 蒋勇
Options

d

parent 5d7e8582
Showing with 253 additions and 128 deletions
iview-admin/.eslintrc.js
......@@ -2,7 +2,7 @@ module.exports = {
root: true,
'extends': [
'plugin:vue/essential',
'@vue/standard'
// '@vue/standard'
],
rules: {
// allow async-await
......
iview-admin/src/components/tables/tables.vue
......@@ -2,10 +2,23 @@
<div>
<div v-if="searchable && searchPlace === 'top'" class="search-con search-con-top">
<Select v-model="searchKey" class="search-col">
<Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
<Option
v-for="item in columns"
v-if="item.key !== 'handle'"
:value="item.key"
:key="`search-col-${item.key}`"
>{{ item.title }}</Option>
</Select>
<Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
<Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
<Input
@on-change="handleClear"
clearable
placeholder="输入关键字搜索"
class="search-input"
v-model="searchValue"
/>
<Button @click="handleSearch" class="search-btn" type="primary">
<Icon type="search"/>&nbsp;&nbsp;搜索
</Button>
</div>
<Table
ref="tablesMain"
......@@ -40,32 +53,39 @@
</Table>
<div v-if="searchable && searchPlace === 'bottom'" class="search-con search-con-top">
<Select v-model="searchKey" class="search-col">
<Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
<Option
v-for="item in columns"
v-if="item.key !== 'handle'"
:value="item.key"
:key="`search-col-${item.key}`"
>{{ item.title }}</Option>
</Select>
<Input placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
<Button class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
<Button class="search-btn" type="primary">
<Icon type="search"/>&nbsp;&nbsp;搜索
</Button>
</div>
<a id="hrefToExportTable" style="display: none;width: 0px;height: 0px;"></a>
</div>
</template>
<script>
import TablesEdit from './edit.vue'
import handleBtns from './handle-btns'
import './index.less'
import TablesEdit from "./edit.vue";
import handleBtns from "./handle-btns";
import "./index.less";
export default {
name: 'Tables',
name: "Tables",
props: {
value: {
type: Array,
default () {
return []
default() {
return [];
}
},
columns: {
type: Array,
default () {
return []
default() {
return [];
}
},
size: String,
......@@ -93,8 +113,8 @@ export default {
},
rowClassName: {
type: Function,
default () {
return ''
default() {
return "";
}
},
context: {
......@@ -132,7 +152,7 @@ export default {
*/
searchPlace: {
type: String,
default: 'top'
default: "top"
}
},
/**
......@@ -141,18 +161,18 @@ export default {
* @on-cancel-edit 返回值 {Object} 同上
* @on-save-edit 返回值 {Object} ：除上面三个参数外，还有一个value: 修改后的数据
*/
data () {
data() {
return {
insideColumns: [],
insideTableData: [],
edittingCellId: '',
edittingText: '',
searchValue: '',
searchKey: ''
}
edittingCellId: "",
edittingText: "",
searchValue: "",
searchKey: ""
};
},
methods: {
suportEdit (item, index) {
suportEdit(item, index) {
item.render = (h, params) => {
return h(TablesEdit, {
props: {
......@@ -162,116 +182,167 @@ export default {
editable: this.editable
},
on: {
'input': val => {
this.edittingText = val
input: val => {
this.edittingText = val;
},
'on-start-edit': (params) => {
this.edittingCellId = `editting-${params.index}-${params.column.key}`
this.$emit('on-start-edit', params)
"on-start-edit": params => {
this.edittingCellId = `editting-${params.index}-${
params.column.key
}`;
this.$emit("on-start-edit", params);
},
'on-cancel-edit': (params) => {
this.edittingCellId = ''
this.$emit('on-cancel-edit', params)
"on-cancel-edit": params => {
this.edittingCellId = "";
this.$emit("on-cancel-edit", params);
},
'on-save-edit': (params) => {
this.value[params.row.initRowIndex][params.column.key] = this.edittingText
this.$emit('input', this.value)
this.$emit('on-save-edit', Object.assign(params, { value: this.edittingText }))
this.edittingCellId = ''
"on-save-edit": params => {
this.value[params.row.initRowIndex][
params.column.key
] = this.edittingText;
this.$emit("input", this.value);
this.$emit(
"on-save-edit",
Object.assign(params, { value: this.edittingText })
);
this.edittingCellId = "";
}
}
})
});
};
return item;
},
surportHandle(item) {
let options = item.options || [];
let insideBtns = [];
// options.forEach(item => {
// if (handleBtns[item]) insideBtns.push(handleBtns[item])
// })
//根据item的信息构造，工厂函数
let facmethos = [];
if (item.button) {
item.button.forEach(btninfo => {
//检查当前按钮 key是否出现权限字符串中
//checkRowBtnInAuth(btninfo)---todo
//user.access=[
// {rolecode:xxxx,codepath:"",auths:"edit,create,delete...."}
// 菜单显示时，需要考虑菜单的name是否出现在codepath中
// ]
facmethos.push((h, params, vmobj) => {
return h(
"Button",
{
props: {
type: btninfo.type
},
on: {
click: () => {
vmobj.$emit("on-exec", btninfo.key, params.row);
}
}
},
[
h("Icon", {
props: {
type: btninfo.icon,
size: 18,
color: "#000000"
}
}),
btninfo.title
]
);
});
});
}
return item
},
surportHandle (item) {
let options = item.options || []
let insideBtns = []
options.forEach(item => {
if (handleBtns[item]) insideBtns.push(handleBtns[item])
})
let btns = item.button ? [].concat(insideBtns, item.button) : insideBtns
let btns = item.button ? [].concat(insideBtns, facmethos) : insideBtns;
item.render = (h, params) => {
params.tableData = this.value
return h('div', btns.map(item => item(h, params, this)))
}
return item
params.tableData = this.value;
return h("div", btns.map(item => item(h, params, this)));
};
return item;
},
handleColumns (columns) {
handleColumns(columns) {
this.insideColumns = columns.map((item, index) => {
let res = item
if (res.editable) res = this.suportEdit(res, index)
if (res.key === 'handle') res = this.surportHandle(res)
return res
})
},
setDefaultSearchKey () {
this.searchKey = this.columns[0].key !== 'handle' ? this.columns[0].key : (this.columns.length > 1 ? this.columns[1].key : '')
},
handleClear (e) {
if (e.target.value === '') this.insideTableData = this.value
},
handleSearch () {
this.insideTableData = this.value.filter(item => item[this.searchKey].indexOf(this.searchValue) > -1)
},
handleTableData () {
let res = item;
if (res.editable) res = this.suportEdit(res, index);
if (res.key === "handle") res = this.surportHandle(res);
return res;
});
},
setDefaultSearchKey() {
this.searchKey =
this.columns[0].key !== "handle"
? this.columns[0].key
: this.columns.length > 1
? this.columns[1].key
: "";
},
handleClear(e) {
if (e.target.value === "") this.insideTableData = this.value;
},
handleSearch() {
this.insideTableData = this.value.filter(
item => item[this.searchKey].indexOf(this.searchValue) > -1
);
},
handleTableData() {
this.insideTableData = this.value.map((item, index) => {
let res = item
res.initRowIndex = index
return res
})
let res = item;
res.initRowIndex = index;
return res;
});
},
exportCsv (params) {
this.$refs.tablesMain.exportCsv(params)
exportCsv(params) {
this.$refs.tablesMain.exportCsv(params);
},
clearCurrentRow () {
this.$refs.talbesMain.clearCurrentRow()
clearCurrentRow() {
this.$refs.talbesMain.clearCurrentRow();
},
onCurrentChange (currentRow, oldCurrentRow) {
this.$emit('on-current-change', currentRow, oldCurrentRow)
onCurrentChange(currentRow, oldCurrentRow) {
this.$emit("on-current-change", currentRow, oldCurrentRow);
},
onSelect (selection, row) {
this.$emit('on-select', selection, row)
onSelect(selection, row) {
this.$emit("on-select", selection, row);
},
onSelectCancel (selection, row) {
this.$emit('on-select-cancel', selection, row)
onSelectCancel(selection, row) {
this.$emit("on-select-cancel", selection, row);
},
onSelectAll (selection) {
this.$emit('on-select-all', selection)
onSelectAll(selection) {
this.$emit("on-select-all", selection);
},
onSelectionChange (selection) {
this.$emit('on-selection-change', selection)
onSelectionChange(selection) {
this.$emit("on-selection-change", selection);
},
onSortChange (column, key, order) {
this.$emit('on-sort-change', column, key, order)
onSortChange(column, key, order) {
this.$emit("on-sort-change", column, key, order);
},
onFilterChange (row) {
this.$emit('on-filter-change', row)
onFilterChange(row) {
this.$emit("on-filter-change", row);
},
onRowClick (row, index) {
this.$emit('on-row-click', row, index)
onRowClick(row, index) {
this.$emit("on-row-click", row, index);
},
onRowDblclick (row, index) {
this.$emit('on-row-dblclick', row, index)
onRowDblclick(row, index) {
this.$emit("on-row-dblclick", row, index);
},
onExpand (row, status) {
this.$emit('on-expand', row, status)
onExpand(row, status) {
this.$emit("on-expand", row, status);
}
},
watch: {
columns (columns) {
this.handleColumns(columns)
this.setDefaultSearchKey()
columns(columns) {
this.handleColumns(columns);
this.setDefaultSearchKey();
},
value (val) {
this.handleTableData()
if (this.searchable) this.handleSearch()
value(val) {
this.handleTableData();
if (this.searchable) this.handleSearch();
}
},
mounted () {
this.handleColumns(this.columns)
this.setDefaultSearchKey()
this.handleTableData()
mounted() {
this.handleColumns(this.columns);
this.setDefaultSearchKey();
this.handleTableData();
}
}
};
</script>
iview-admin/src/config/index.js
......@@ -17,7 +17,7 @@ export default {
* @description api请求基础路径
*/
baseUrl: {
dev: 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/',
dev: 'http://t9.com:8000/',
pro: 'https://produce.com'
},
/**
......
iview-admin/src/view/components/tables/forms/forms.vue 0 → 100644
<template>
<div>
<Card>
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
<FormItem prop="user">
<Input type="text" v-model="formInline.user" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="password">
<Input type="password" v-model="formInline.password" placeholder="Password">
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
</FormItem>
</Form>
</Card>
</div>
</template>
<script>
// import { getTableData } from '@/api/data'
export default {
name: 'forms',
components: {
},
data () {
return {
columns: [
{ title: 'Name', key: 'name', sortable: true },
{ title: 'Email', key: 'email', editable: true },
{ title: 'Create-Time', key: 'createTime' },
{
title: 'Handle',
key: 'handle',
options: ['delete'],
button: [
{title: "编辑",type: "text",icon: "",key:"edit" },
{title: "启用",type: "text",icon: "",key:"enable"},
]
}
],
tableData: []
}
},
methods: {
handleDelete (params) {
console.log(params)
},
exportExcel () {
this.$refs.tables.exportCsv({
filename: `table-${(new Date()).valueOf()}.csv`
})
}
},
mounted () {
getTableData().then(res => {
this.tableData = res.data
})
}
}
</script>
<style>
</style>
iview-admin/src/view/components/tables/tables.vue
<template>
<div>
<Card>
<tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete"/>
<tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-exec="doexec"/>
<Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
</Card>
</div>
......@@ -24,24 +24,10 @@ export default {
{
title: 'Handle',
key: 'handle',
options: ['delete'],
button: [
(h, params, vm) => {
return h('Poptip', {
props: {
confirm: true,
title: '你确定要删除吗?'
},
on: {
'on-ok': () => {
vm.$emit('on-delete', params)
vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
}
}
}, [
h('Button', '自定义删除')
])
}
{title: "删除",type: "text",icon: "md-trash",key:"delete" },
{title: "编辑",type: "text",icon: "",key:"edit" },
{title: "启用",type: "text",icon: "",key:"enable"},
]
}
],
......@@ -49,8 +35,8 @@ export default {
}
},
methods: {
handleDelete (params) {
console.log(params)
doexec (key,row) {
console.log(key,row)
},
exportExcel () {
this.$refs.tables.exportCsv({
......
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