神经猿组件
// DataSelect.vue
<template>
<div class="data-select">
<el-form ref="form" :model="form" class="data-select-form">
<el-input
v-model="searchValue"
class="data-select-form__searchInput"
placeholder="搜索"
suffix-icon="el-icon-search"
@keyup.enter.native="handleSearch"
/>
<el-select v-model="selectValue" placeholder="全部状态" @change="selectChange">
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
>
{{ item.label }}
</el-option>
</el-select>
<div v-if="rightBtns.length" class="data-select-form-btnContainer">
<el-button v-for="(item,index) in rightBtns" :key="index" @click="handleBtn(item)">{{ item.text }}</el-button>
</div>
</el-form>
</div>
</template>
<script>
export default {
props: {
search: {
type: Boolean,
default: true
},
selectList: {
type: Array,
default: function() {
return []
}
},
rightBtns: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
searchValue: '',
selectValue: '',
form: {}
}
},
methods: {
handleSearch() {
this.$emit('search', this.searchValue)
},
selectChange() {
this.$emit('selectChange', this.selectValue)
},
handleBtn(item) {
var type = item.type
var fn = type + 'Handle'
if (this[fn]) {
this[fn](item)
}
},
addHandle(item) {
if (item.to && item.to.path) {
this.$router.push(item.to.path)
}
}
}
}
</script>
<style lang="scss" scoped>
.data-select-form {
display: flex;
align-items: center;
margin-right: -16px;
> * {
margin-right: 16px;
}
input::placeholder {
}
.data-select-form__searchInput {
width: 360px;
}
>>> .el-input__suffix .el-input__icon {
line-height: 30px;
}
>>> .el-input__inner {
height: 30px;
padding: 0 8px;
font-size: 14px;
color: #8d929c;
background: rgba(245, 246, 249, 1);
opacity: 1;
border-radius: 2px;
}
.data-select-form-btnContainer {
margin-left: auto;
button {
height: 40px;
font-size:14px;
background: #4FC5C5;
color:rgba(255,255,255,1);
border-radius:2px;
}
}
}
</style>
// DataTable.vue
<template>
<div class="data">
<data-select
:search="!!baseSettings.search"
:select-list="Array.isArray(baseSettings.selectList) && baseSettings.selectList.length?baseSettings.selectList:[]"
:right-btns="baseSettings.rightBtns"
@search="search"
@selectChange="selectChange"
/>
<div class="data-table">
<el-table :data="showData" style="width: 100%" border>
<el-table-column
v-if="baseSettings.index"
prop="time"
label="序号"
show-overflow-tooltip
type="index"
/>
<template v-for="(item,index) in columns">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
show-overflow-tooltip
width="150"
/>
</template>
<el-table-column prop="state" label="操作" show-overflow-tooltip width="170">
<template slot-scope="scope">
<p class="operate-p">
<el-button
v-for="(item,index) in baseSettings.operateBtns"
:key="index"
type="text"
class="operate-btn"
:data-id="scope.row.id"
@click="handleOperate(scope.row,item)"
>{{ item.text }}</el-button>
</p>
</template>
</el-table-column>
<div slot="empty" class="data-table-noData">
<img
src="../../assets/images/Institution-opening/noData.png"
alt="Clock"
srcset="
../../assets/images/Institution-opening/noData.png 1x,
../../assets/images/Institution-opening/noData@2x.png 2x
"
>
<p class="mar-t-24 mar-b-0 pad-0">暂无机构开通</p>
</div>
</el-table>
</div>
<table-pagination />
<m-dialog ref="yDialog" />
</div>
</template>
<script>
import mDialog from '@/components/MDialog'
import dataSelect from '@/components/DataSelect'
import tablePagination from '@/components/TablePagination'
export default {
components: {
dataSelect,
tablePagination,
mDialog
},
props: {
baseSettings: {
type: Object, default: function() {
return {
}
}
},
columns: {
type: Array, default: function() {
return []
}
}
},
data() {
return {
showData: [],
args: {}
}
},
created() {
if (this.baseSettings.dataInterface.args) {
this.args = { ...this.baseSettings.dataInterface.args }
}
},
mounted() {
this.getData()
},
methods: {
search(value) {
this.args.search = value
this.getData()
},
// 待改，select哪个字段
selectChange(selectValue) {
this.args.currentPage = selectValue
this.getData()
},
async getData() {
try {
const interfaceFn = this.baseSettings.dataInterface.fn
const args = this.args
if (interfaceFn) {
var res = await interfaceFn(args)
this.showData = res.list
}
} catch (e) {
this.$errorMessage(e.message)
}
},
handleOperate(row, item) {
var type = item.type
var fnStr = type + 'Operate'
if (this[fnStr]) {
this[fnStr](row, item)
}
},
stopOperate(row, item) {
this.showDialog(row, item)
},
deleteOperate(row, item) {
this.showDialog(row, item)
},
editOperate(row, item) {
const { name } = item.to
this.$router.push({
name,
params: {
...row
}
})
},
showDialog(row, item) {
if (Object.keys(item.dialog).length) {
this.$refs['yDialog'].show({
title: item.dialog.title,
interface: item.interface,
textArr: item.dialog.textArr,
arg: row[item.arg]
})
}
}
}
}
</script>
<style scoped lang="scss">
.data {
display: flex;
padding: 21px 24px;
background: #fff;
flex: 1;
flex-flow: column wrap;
.data-table {
display: flex;
margin: 21px 0 24px;
flex: 1;
>>> .el-table {
border: 0 none;
flex: 1;
}
>>> .el-table:before {
content: none;
}
>>> .el-table__header {
tr {
height: 48px;
}
th {
border: 0 none;
background: #f6f4fc;
font-size: 14px;
color: rgba(141, 146, 156, 1);
font-weight: normal;
}
}
>>> .el-table__body {
border-spacing: 0 8px;
tr {
height: 68px;
box-shadow: 0px 2px 4px rgba(0, 139, 255, 0.08);
}
td {
border: 0 none;
font-size: 14px;
color: rgba(141, 146, 156, 1);
}
}
}
>>> .table-pagination {
margin-top: auto;
}
.data-table-noData {
line-height: 1;
}
}
</style>
<style lang="scss" scoped>
.state-span {
display: inline-block;
max-width: 100%;
padding: 0 8px;
line-height: 22px;
background: rgba(255, 193, 1, 1);
opacity: 1;
border-radius: 2px;
text-overflow: ellipsis;
overflow: hidden;
color: #fff;
&.effective,
&[data-state="effective"] {
background: #4fc5c5;
&:after {
content: "有效";
}
}
&.expired,
&[data-state="expired"] {
background: #ffc101;
&:after {
content: "已过期";
}
}
&.stop,
&[data-state="stop"] {
background: #5f437e;
&:after {
content: "已停用";
}
}
}
</style>
<style lang="scss" scoped>
.operate-p {
display: flex;
padding-right: 24px;
align-items: center;
}
.operate-btn {
font-size:14px;
color:#4FC5C5;
&+.operate-btn {
margin-lefT: 24px;
}
}
</style>