You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
206 lines
10 KiB
206 lines
10 KiB
<template>
|
|
<layout :title="title">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 style="font-size:1.5rem;margin:.5em 0;">{{title}}</h1>
|
|
</div>
|
|
<!--<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item">
|
|
<router-link :to="{path:'/router/shared/index.html',query:{area:area,entity:entity}}" class="btn btn-default">列表</router-link>
|
|
</li>
|
|
<li class="breadcrumb-item active">{{title}}{{this.$route.from}}</li>
|
|
</ol>
|
|
</div>-->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<!--query from-->
|
|
<form :class="'form-horizontal query '+this.model" v-if="hasPermission('Read')" :action="url" @submit.prevent="onSubmit">
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-4 col-lg-3" v-for="(value,key,index) in data.schema.properties" v-if="showForQuery(key,value)">
|
|
<div class="form-group row">
|
|
<label class="col-sm-3 col-form-label" :for="key">{{value.title}}:</label>
|
|
<div class="col-sm-9">
|
|
<component :is="getQueryComponent(value)" mode="query" prefix="query" :title="value.title" :name="key" :value="data.model.query[key]" :data="data.data" nullable="value.nullable" v-if="data.model.query" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="hasPermissions()">
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary" v-if="hasPermission('Read')">查询</button>
|
|
<router-link :to="{path:'/router/shared/add.html',query:{area:area,entity:entity,model:model,mode:'add'}}" v-if="hasPermission('Add')" class="btn btn-success">新建</router-link>
|
|
<a href="javascript:;" class="btn btn-danger" v-if="hasPermission('Delete')" @click="deleteAll()">删除</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="dataTables_wrapper dt-bootstrap4">
|
|
<!--list table-->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<table ref="list" class="table table-bordered table-striped dataTable dtr-inline">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<input type="checkbox" class="select_all" />
|
|
</th>
|
|
<th v-for="(value,key,index) in data.schema.properties" v-if="showForList(key,value)">
|
|
{{value.title}}
|
|
</th>
|
|
<th v-if="hasPermission('Edit')">编辑</th>
|
|
<th v-if="hasPermission('Read')">查看</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in data.model.list">
|
|
<td>
|
|
<input type="checkbox" name="list[]" :value="item.id" />
|
|
</td>
|
|
<td v-for="(value,key,index) in data.schema.properties" v-if="showForList(key,value)">
|
|
<component :is="getDisplayComponent(key)" :name="key" :value="item[key]" :data="data.data" mode="list" />
|
|
</td>
|
|
<td v-if="hasPermission('Edit')">
|
|
<router-link :to="{path:'/router/shared/edit.html',query:{area:area,entity:entity,model:model,mode:'edit',id:item.id}}" class="btn btn-sm btn-default">编辑</router-link>
|
|
</td>
|
|
<td v-if="hasPermission('Read')">
|
|
<router-link :to="{path:'/router/shared/detail.html',query:{area:area,entity:entity,model:model,id:item.id}}" class="btn btn-sm btn-default">查看</router-link>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!--page list-->
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<pagination :index.sync="data.model.pageIndex" :size.sync="data.model.pageSize" :total="data.model.totalCount" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'list',
|
|
props: ['service', 'area', 'entity', 'model'],
|
|
data: function () {
|
|
return {
|
|
data: {
|
|
schema: {
|
|
title: ''
|
|
},
|
|
model: {
|
|
pageIndex: 1,
|
|
pageSize: 20,
|
|
list: [],
|
|
},
|
|
data: {}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
path: function () {
|
|
return '/' + this.service + '/' + this.area + '/' + this.model + '/';
|
|
},
|
|
url: function () {
|
|
return this.path + 'Index';
|
|
},
|
|
name: function () {
|
|
return this.data.schema ? this.data.schema.title : '';
|
|
},
|
|
title: function () {
|
|
return this.name + '列表';
|
|
}
|
|
},
|
|
watch: {
|
|
'data.model.pageIndex': function () {
|
|
this.load();
|
|
},
|
|
'data.model.pageSize': function () {
|
|
this.load(1);
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.load(this.data.model.pageIndex, this.data.model.pageSize);
|
|
},
|
|
methods: {
|
|
load: function (index, size) {
|
|
if (index) {
|
|
this.data.model.pageIndex = index;
|
|
}
|
|
if (size) {
|
|
this.data.model.pageSize = size;
|
|
}
|
|
var vm = this;
|
|
var url = this.baseUrl + this.url;
|
|
var query = $("form.query").serialize();
|
|
var page = 'pageIndex=' + this.data.model.pageIndex + '&pageSize=' + this.data.model.pageSize;
|
|
if (query) {
|
|
url += '?' + query + '&' + page;
|
|
}
|
|
axios.get(url).then(function (response) {
|
|
vm.data = response.data;
|
|
});
|
|
},
|
|
hasPermission: function (cmd) {
|
|
var permission = cmd + '-' + this.entity;
|
|
return Enumerable.from(store.state.permissions).any(o => o === permission);
|
|
},
|
|
hasPermissions: function () {
|
|
return this.hasPermission('Read') || this.hasPermission('Add') || this.hasPermission('Edit') || this.hasPermission('Delete');
|
|
},
|
|
getDisplayComponent: function (key) {
|
|
var property = this.data.schema.properties[key];
|
|
var template = 'display-' + (property.ui || property.format || property.type);
|
|
return template;
|
|
},
|
|
getQueryComponent: function (value) {
|
|
var template = 'edit-' + (value.ui || value.format || value.type);
|
|
return template;
|
|
},
|
|
showForQuery: function (key, value) {
|
|
return value.type !== 'array'
|
|
&& value.type !== 'object'
|
|
&& value.format !== 'imageurl'
|
|
&& key !== 'displayOrder'
|
|
&& key !== 'id'
|
|
&& (value.ui ? value.ui !== 'cron' : true);
|
|
},
|
|
showForList: function (key, value) {
|
|
return key !== 'id' && value.type !== 'array';
|
|
},
|
|
onSubmit: function () {
|
|
this.load();
|
|
},
|
|
deleteAll: function () {
|
|
var vm = this;
|
|
var url = this.baseUrl + this.path + 'DeleteApi';
|
|
var list = $(this.$refs.list).find(':checked');
|
|
if (!list.length) {
|
|
Swal.fire('没有选中任何记录！');
|
|
} else {
|
|
Swal.fire('确认删除选中记录吗').then(function (value) {
|
|
if (value.isConfirmed) {
|
|
var data = Enumerable.from(list).select(o => o.value).toArray();
|
|
axios.post(url, data).then(function (response) {
|
|
if (response.status === 204) {
|
|
vm.load();
|
|
}
|
|
else {
|
|
Swal.fire(response.data).then(o => vm.load());
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |