|
@@ -1,246 +1,253 @@
|
|
|
-<template>
|
|
|
- <a-card :bordered="false">
|
|
|
- <div :class="advanced ? 'search' : null">
|
|
|
- <a-form layout="horizontal">
|
|
|
- <div :class="advanced ? null : 'fold'">
|
|
|
- <a-row :gutter="48">
|
|
|
- <a-col :md="8" :sm="24">
|
|
|
- <a-form-item
|
|
|
- label="规则编号"
|
|
|
- :labelCol="{span: 5}"
|
|
|
- :wrapperCol="{span: 18, offset: 1}"
|
|
|
- >
|
|
|
- <a-input placeholder="请输入"/>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="8" :sm="24">
|
|
|
- <a-form-item
|
|
|
- label="使用状态"
|
|
|
- :labelCol="{span: 5}"
|
|
|
- :wrapperCol="{span: 18, offset: 1}"
|
|
|
- >
|
|
|
- <a-select placeholder="请选择">
|
|
|
- <a-select-option value="1">关闭</a-select-option>
|
|
|
- <a-select-option value="2">运行中</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="8" :sm="24">
|
|
|
- <a-form-item
|
|
|
- label="调用次数"
|
|
|
- :labelCol="{span: 5}"
|
|
|
- :wrapperCol="{span: 18, offset: 1}"
|
|
|
- >
|
|
|
- <a-input-number style="width: 100%" placeholder="请输入"/>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
-
|
|
|
- <a-row :gutter="48" v-if="advanced">
|
|
|
- <a-col :md="8" :sm="24">
|
|
|
- <a-form-item
|
|
|
- label="更新日期"
|
|
|
- :labelCol="{span: 5}"
|
|
|
- :wrapperCol="{span: 18, offset: 1}">
|
|
|
- <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="8" :sm="24">
|
|
|
- <a-form-item
|
|
|
- label="使用状态"
|
|
|
- :labelCol="{span: 5}"
|
|
|
- :wrapperCol="{span: 18, offset: 1}">
|
|
|
- <a-select placeholder="请选择">
|
|
|
- <a-select-option value="1">关闭</a-select-option>
|
|
|
- <a-select-option value="2">运行中</a-select-option>
|
|
|
- </a-select>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="8" :sm="24">
|
|
|
- <a-form-item
|
|
|
- label="描述"
|
|
|
- :labelCol="{span: 5}"
|
|
|
- :wrapperCol="{span: 18, offset: 1}"
|
|
|
- >
|
|
|
- <a-input placeholder="请输入"/>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
-
|
|
|
- <span style="float: right; margin-top: 3px;">
|
|
|
- <a-button type="primary">查询</a-button>
|
|
|
- <a-button style="margin-left: 8px">重置</a-button>
|
|
|
- <a @click="toggleAdvanced" style="margin-left: 8px">
|
|
|
- {{ advanced ? '收起' : '展开' }}
|
|
|
- <a-icon :type="advanced ? 'up' : 'down'"/>
|
|
|
- </a>
|
|
|
- </span>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
-
|
|
|
- <s-table
|
|
|
- ref="table"
|
|
|
- size="default"
|
|
|
- :columns="columns"
|
|
|
- :data="loadData"
|
|
|
- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
|
|
|
- >
|
|
|
- <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
|
|
|
- <div :key="index">
|
|
|
- <a-input
|
|
|
- v-if="record.editable"
|
|
|
- style="margin: -5px 0"
|
|
|
- :value="text"
|
|
|
- @change="e => handleChange(e.target.value, record.key, col)"
|
|
|
- />
|
|
|
- <template v-else>{{ text }}</template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template slot="action" slot-scope="text, record, index">
|
|
|
- <div class='editable-row-operations'>
|
|
|
- <span v-if="record.editable">
|
|
|
- <a @click="() => save(record)" style="margin-right: 12px">Save</a>
|
|
|
- <a-popconfirm title='Sure to cancel?' @confirm="() => cancel(record)">
|
|
|
- <a>Cancel</a>
|
|
|
- </a-popconfirm>
|
|
|
- </span>
|
|
|
- <span v-else>
|
|
|
- <a @click="() => edit(record, index)">Edit</a>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </s-table>
|
|
|
-
|
|
|
- </a-card>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import STable from '@/components/table/'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: "TableList",
|
|
|
- components: {
|
|
|
- STable
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- // 高级搜索 展开/关闭
|
|
|
- advanced: false,
|
|
|
- // 查询参数
|
|
|
- queryParam: {},
|
|
|
- // 表头
|
|
|
- columns: [
|
|
|
- {
|
|
|
- title: '规则编号',
|
|
|
- dataIndex: 'no'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '描述',
|
|
|
- dataIndex: 'description',
|
|
|
- scopedSlots: { customRender: 'description' },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '服务调用次数',
|
|
|
- dataIndex: 'callNo',
|
|
|
- sorter: true,
|
|
|
- needTotal: true,
|
|
|
- scopedSlots: { customRender: 'callNo' },
|
|
|
- // customRender: (text) => text + ' 次'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- dataIndex: 'status',
|
|
|
- needTotal: true,
|
|
|
- scopedSlots: { customRender: 'status' },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '更新时间',
|
|
|
- dataIndex: 'updatedAt',
|
|
|
- sorter: true,
|
|
|
- scopedSlots: { customRender: 'updatedAt' },
|
|
|
- },
|
|
|
- {
|
|
|
- table: '操作',
|
|
|
- dataIndex: 'action',
|
|
|
- width: '150px',
|
|
|
- scopedSlots: { customRender: 'action' },
|
|
|
- }
|
|
|
- ],
|
|
|
- // 加载数据方法 必须为 Promise 对象
|
|
|
- loadData: parameter => {
|
|
|
- return this.$http.get('/service', {
|
|
|
- params: Object.assign(parameter, this.queryParam)
|
|
|
- }).then(res => {
|
|
|
- return res.result
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- selectedRowKeys: [],
|
|
|
- selectedRows: []
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- handleChange (value, key, column) {
|
|
|
- console.log(value, key, column)
|
|
|
- },
|
|
|
- edit (row) {
|
|
|
- row.editable = true
|
|
|
- row = Object.assign({}, row)
|
|
|
- this.$refs.table.updateEdit()
|
|
|
- },
|
|
|
- save (row) {
|
|
|
- delete row.editable
|
|
|
- this.$refs.table.updateEdit()
|
|
|
- },
|
|
|
- cancel (row) {
|
|
|
- delete row.editable
|
|
|
- this.$refs.table.updateEdit()
|
|
|
- },
|
|
|
-
|
|
|
- onChange (selectedRowKeys, selectedRows) {
|
|
|
- this.selectedRowKeys = selectedRowKeys
|
|
|
- this.selectedRows = selectedRows
|
|
|
- },
|
|
|
- toggleAdvanced () {
|
|
|
- this.advanced = !this.advanced
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- /*
|
|
|
- 'selectedRows': function (selectedRows) {
|
|
|
- this.needTotalList = this.needTotalList.map(item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- total: selectedRows.reduce( (sum, val) => {
|
|
|
- return sum + val[item.dataIndex]
|
|
|
- }, 0)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- */
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .search {
|
|
|
- margin-bottom: 54px;
|
|
|
- }
|
|
|
-
|
|
|
- .fold {
|
|
|
- width: calc(100% - 216px);
|
|
|
- display: inline-block
|
|
|
- }
|
|
|
-
|
|
|
- .operator {
|
|
|
- margin-bottom: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- @media screen and (max-width: 900px) {
|
|
|
- .fold {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <a-card :bordered="false">
|
|
|
+ <div :class="advanced ? 'search' : null">
|
|
|
+ <a-form layout="horizontal">
|
|
|
+ <div :class="advanced ? null : 'fold'">
|
|
|
+ <a-row :gutter="48">
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-item
|
|
|
+ label="规则编号"
|
|
|
+ :labelCol="{span: 5}"
|
|
|
+ :wrapperCol="{span: 18, offset: 1}"
|
|
|
+ >
|
|
|
+ <a-input placeholder="请输入"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-item
|
|
|
+ label="使用状态"
|
|
|
+ :labelCol="{span: 5}"
|
|
|
+ :wrapperCol="{span: 18, offset: 1}"
|
|
|
+ >
|
|
|
+ <a-select placeholder="请选择">
|
|
|
+ <a-select-option value="1">关闭</a-select-option>
|
|
|
+ <a-select-option value="2">运行中</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-item
|
|
|
+ label="调用次数"
|
|
|
+ :labelCol="{span: 5}"
|
|
|
+ :wrapperCol="{span: 18, offset: 1}"
|
|
|
+ >
|
|
|
+ <a-input-number style="width: 100%" placeholder="请输入"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-row :gutter="48" v-if="advanced">
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-item
|
|
|
+ label="更新日期"
|
|
|
+ :labelCol="{span: 5}"
|
|
|
+ :wrapperCol="{span: 18, offset: 1}">
|
|
|
+ <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-item
|
|
|
+ label="使用状态"
|
|
|
+ :labelCol="{span: 5}"
|
|
|
+ :wrapperCol="{span: 18, offset: 1}">
|
|
|
+ <a-select placeholder="请选择">
|
|
|
+ <a-select-option value="1">关闭</a-select-option>
|
|
|
+ <a-select-option value="2">运行中</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="8" :sm="24">
|
|
|
+ <a-form-item
|
|
|
+ label="描述"
|
|
|
+ :labelCol="{span: 5}"
|
|
|
+ :wrapperCol="{span: 18, offset: 1}"
|
|
|
+ >
|
|
|
+ <a-input placeholder="请输入"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <span style="float: right; margin-top: 3px;">
|
|
|
+ <a-button type="primary">查询</a-button>
|
|
|
+ <a-button style="margin-left: 8px">重置</a-button>
|
|
|
+ <a @click="toggleAdvanced" style="margin-left: 8px">
|
|
|
+ {{ advanced ? '收起' : '展开' }}
|
|
|
+ <a-icon :type="advanced ? 'up' : 'down'"/>
|
|
|
+ </a>
|
|
|
+ </span>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <s-table
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
|
|
|
+ >
|
|
|
+ <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
|
|
|
+ <div :key="index">
|
|
|
+ <a-input
|
|
|
+ v-if="record.editable"
|
|
|
+ style="margin: -5px 0"
|
|
|
+ :value="text"
|
|
|
+ @change="e => handleChange(e.target.value, record.key, col)"
|
|
|
+ />
|
|
|
+ <template v-else>{{ text }}</template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template slot="action" slot-scope="text, record, index">
|
|
|
+ <div class='editable-row-operations'>
|
|
|
+ <span v-if="record.editable">
|
|
|
+ <a @click="() => save(record)">保存</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a-popconfirm title='真的放弃编辑吗?' @confirm="() => cancel(record)">
|
|
|
+ <a>取消</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </span>
|
|
|
+ <span v-else>
|
|
|
+ <a @click="() => edit(record, index)">修改</a>
|
|
|
+ <a-divider type="vertical" />
|
|
|
+ <a @click="() => delete(record, index)">删除</a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+
|
|
|
+ </a-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import STable from '@/components/table/'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "TableList",
|
|
|
+ components: {
|
|
|
+ STable
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // 高级搜索 展开/关闭
|
|
|
+ advanced: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParam: {},
|
|
|
+ // 表头
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '规则编号',
|
|
|
+ dataIndex: 'no',
|
|
|
+ width: 90
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '描述',
|
|
|
+ dataIndex: 'description',
|
|
|
+ scopedSlots: { customRender: 'description' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '服务调用次数',
|
|
|
+ dataIndex: 'callNo',
|
|
|
+ width: '150px',
|
|
|
+ sorter: true,
|
|
|
+ needTotal: true,
|
|
|
+ scopedSlots: { customRender: 'callNo' },
|
|
|
+ // customRender: (text) => text + ' 次'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ width: '120px',
|
|
|
+ needTotal: true,
|
|
|
+ scopedSlots: { customRender: 'status' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '更新时间',
|
|
|
+ dataIndex: 'updatedAt',
|
|
|
+ width: '180px',
|
|
|
+ sorter: true,
|
|
|
+ scopedSlots: { customRender: 'updatedAt' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ table: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ width: '150px',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ return this.$http.get('/service', {
|
|
|
+ params: Object.assign(parameter, this.queryParam)
|
|
|
+ }).then(res => {
|
|
|
+ return res.result
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ selectedRowKeys: [],
|
|
|
+ selectedRows: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ handleChange (value, key, column) {
|
|
|
+ console.log(value, key, column)
|
|
|
+ },
|
|
|
+ edit (row) {
|
|
|
+ row.editable = true
|
|
|
+ row = Object.assign({}, row)
|
|
|
+ this.$refs.table.updateEdit()
|
|
|
+ },
|
|
|
+ save (row) {
|
|
|
+ delete row.editable
|
|
|
+ this.$refs.table.updateEdit()
|
|
|
+ },
|
|
|
+ cancel (row) {
|
|
|
+ delete row.editable
|
|
|
+ this.$refs.table.updateEdit()
|
|
|
+ },
|
|
|
+
|
|
|
+ onChange (selectedRowKeys, selectedRows) {
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
+ this.selectedRows = selectedRows
|
|
|
+ },
|
|
|
+ toggleAdvanced () {
|
|
|
+ this.advanced = !this.advanced
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ /*
|
|
|
+ 'selectedRows': function (selectedRows) {
|
|
|
+ this.needTotalList = this.needTotalList.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ total: selectedRows.reduce( (sum, val) => {
|
|
|
+ return sum + val[item.dataIndex]
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ */
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .search {
|
|
|
+ margin-bottom: 54px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fold {
|
|
|
+ width: calc(100% - 216px);
|
|
|
+ display: inline-block
|
|
|
+ }
|
|
|
+
|
|
|
+ .operator {
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 900px) {
|
|
|
+ .fold {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|