Skip to content

Z
zhongtong-avi-web
Commit 2db19791 authored by 李志鸣's avatar 李志鸣
Browse files
Options

fea(表格组件): 业务表格组件开发

parent ff2774e8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 246 additions and 1865 deletions
build/api.js
View file @ 2db19791
......@@ -5,7 +5,7 @@
const fs = require('fs')
const path = require('path')
const axios = require('axios')
let url = 'http://10.100.172.150:9105/v2/api-docs'
let url = 'http://10.100.172.150:9108/v2/api-docs'
let filePath = path.join(__dirname, '../src')
function fetch () {
......
config/index.js
View file @ 2db19791
......@@ -13,12 +13,7 @@ module.exports = {
// 代理后端服务器
proxyTable: {
'/host': {
// target: 'http://10.168.1.72:9009', //设置你调用的接口域名和端口号 别忘了加http 现场测试环境
target: 'http://10.100.172.150:9105', //设置你调用的接口域名和端口号 别忘了加http
// target: 'http://10.100.172.207:8080', //设置你调用的接口域名和端口号 别忘了加http 许翔服务器
// target: 'http://10.100.172.169:9997', // 旭的服务器地址
// target: 'http://10.100.172.168:8080', // 伟材的服务器地址
// target: 'http://10.100.172.34:8080', // 浩鹏服务器地址
target: 'http://10.100.172.150:9108', //设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/host': ''//这里理解成用‘/host’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
......
index.html
View file @ 2db19791
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>华莹生产制造执行系统</title>
<title>中通</title>
</head>
<body>
<div id="app"></div>
......
src/components/PreviewTable/index.vue 0 → 100644
View file @ 2db19791
<template>
<div v-if="tableForceUpdateToggle"
class="table-pack">
<el-table
ref="table"
:data="tableConfig.data"
style="width: 100%"
tooltip-effect="dark"
stripe
border
:height="tableConfig.height"
:highlight-current-row="tableConfig.highLightCurrentToggle"
@row-click="doTableRowClick"
@sort-change="onSortChange"
@selection-change="onSelectChange">
<el-table-column
v-if="tableConfig.checkedToggle"
type="selection"
width="55"
align="center">
</el-table-column>
<template
v-for="(item, index) in tableConfig.fieldList">
<!-- 正常表格 -->
<el-table-column
:key="index"
:prop="item.value"
show-overflow-tooltip
v-bind="judgeTableColumnAttribute(item)">
<template slot-scope="scope">
<span v-if="item.dataType === 'DATETIME'">
{{ scope.row[item.value] === null || scope.row[item.value] === '' || scope.row[item.value] === undefined ? '暂无' : format(scope.row[item.value], 'yyyy-MM-dd hh:mm:ss') }}
</span>
<span v-if="item.dataType === 'NUMBER'">
{{ scope.row[item.value] === null || scope.row[item.value] === '' || scope.row[item.value] === undefined ? '暂无' : (scope.row[item.value]).toFix(2) }}
</span>
<span v-else>
{{ scope.row[item.value] === null || scope.row[item.value] === '' || scope.row[item.value] === undefined ? '暂无' : scope.row[item.value] }}
</span>
</template>
</el-table-column>
</template>
<!-- 预留字段及其他功能插槽 -->
<slot name="operationColumn"></slot>
</el-table>
<!-- 分页 -->
<div class="pagination-pack" v-if="tableConfig.paginationToggle">
<el-pagination
background
:total="tableConfig.paginationConfig.total"
style="text-align: center; margin-top: 12px;"
:page-sizes="[20, 50, 100, 200]"
layout="prev, pager, next, sizes, jumper"
:current-page.sync="tableConfig.paginationConfig.currentPage"
:page-size.sync="tableConfig.paginationConfig.pageSize"
@size-change="onPageSizeChange"
@current-change="onCurrentPageChange">
</el-pagination>
</div>
</div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
props: {
tableConfig: {
type: Object,
required: true
}
},
data () {
return {
// 表格强制刷新开关
tableForceUpdateToggle: true
}
},
methods: {
// 日期时间格式化
format (date, fmt) {
let nowDate = new Date(date);
let o = {
'M+': nowDate.getMonth() + 1, //月份
'd+': nowDate.getDate(), //日
'h+': nowDate.getHours(), //小时
'm+': nowDate.getMinutes(), //分
's+': nowDate.getSeconds(), //秒
'q+': Math.floor((nowDate.getMonth() + 3) / 3), //季度
'S': nowDate.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (nowDate.getFullYear() + '').substr(4 - RegExp.$1.length));
for (let k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
}
}
return fmt;
},
// 触发分页数量改变事件
onPageSizeChange (pageSize) {
this.tableConfig.paginationConfig.currentPage = 1
this.tableConfig.paginationConfig.pageSize = pageSize
this.$emit('onPageSizeChange', pageSize)
},
// 触发分页页数改变事件
onCurrentPageChange (currentPage) {
this.tableConfig.paginationConfig.currentPage = currentPage
this.$emit('onCurrentPageChange', currentPage)
},
// 表格数据点击事件
doTableRowClick (tableNodeValue) {
this.$emit('doTableRowClick', tableNodeValue)
},
// 触发表格排序功能
onSortChange (sortValue) {
this.$emit('onSortChange', sortValue)
},
// 触发表格多选功能
onSelectChange (selectValue) {
this.$emit('onSelectChange', selectValue)
},
// 解析属性
judgeTableColumnAttribute (attributeArray) {
let judgeObject = _.cloneDeep(attributeArray)
// 默认加入排序功能
// 中通项目暂不加默认排序功能
// if (judgeObject.hasOwnProperty('sortable')) {
// judgeObject.sortable = attributeArray.sort
// } else {
// judgeObject.sortable = 'custom'
// }
return judgeObject
}
},
watch: {
tableConfig: {
handler (newVal, oldVal) {
this.tableConfig = newVal
}
// deep: true
},
'tableConfig.fieldList': {
handler (newVal, oldVal) {
// 当数据有所变动时，强制刷新表格组件
this.tableForceUpdateToggle = false
this.$nextTick(() => {
this.tableForceUpdateToggle = true
})
}
},
$route (to, from) {
// 如果路由发生变化时，强制刷新表格组件
this.tableForceUpdateToggle = false
this.$nextTick(() => {
this.tableForceUpdateToggle = true
})
}
}
}
</script>
<style lang="scss">
.table-pack {
.el-table__body tr.current-row>td {
background: #b2d8ff !important;
}
}
</style>
src/interface/apis.js
View file @ 2db19791
This diff is collapsed.
src/views/Welcome/index.vue
View file @ 2db19791
......@@ -16,11 +16,11 @@
methods: {},
mounted () {
// // 获取ScadaUrl 相关配置
this.$fetch('scada-controller/url-get', '').then((response) => {
window.sessionStorage.setItem('Admin-scadaUrl', JSON.stringify(response))
}).catch((response) => {
// this.$fetch('scada-controller/url-get', '').then((response) => {
// window.sessionStorage.setItem('Admin-scadaUrl', JSON.stringify(response))
// }).catch((response) => {
})
// })
}
}
</script>
......
src/views/Workshop/Parts/list.vue
View file @ 2db19791
......@@ -38,16 +38,16 @@
</div>
<div class="tool-pack clear-float pl-15 pr-15">
<Search
searchCode="MATERIEL_TYPE"
searchCode="3D_LASER_CUTTING"
@search="doSearchClick"
@reset="doResetClick">
</Search>
</div>
<div class="general-list-main-pack pl-15 pr-15">
<div>
<Table
<PreviewTable
:tableConfig="tableConfig">
</Table>
</PreviewTable>
</div>
</div>
</div>
......@@ -55,13 +55,13 @@
</template>
<script>
import Table from '@/components/Table/index.vue'
import PreviewTable from '@/components/PreviewTable'
import Search from '@/components/Search'
export default {
name: 'Parts',
components: {
Table,
PreviewTable,
Search
},
data () {
......@@ -129,7 +129,16 @@
// 点击搜索组件搜索按钮
doSearchClick () {},
// 点击搜索组件重置按钮
doResetClick () {}
doResetClick () {},
// 获取列表表头展示字段
getTableLabel () {
let queryParams = { searchCode: '3D_LASER_CUTTING' }
this.$fetch('show-field-controller/showField-get', queryParams).then((response) => {
this.tableConfig.fieldList = _.cloneDeep(response)
})
},
// 获取列表数据
getTableData () {}
},
mounted () {
setTimeout(() => {
......@@ -137,6 +146,8 @@
this.tableConfig.height = document.querySelector('.page-pack').offsetHeight - 180
this.$refs.sortTree.setCurrentKey(this.sortTreeData[0].id)
this.currentSort = _.cloneDeep(this.sortTreeData[0])
// 获取列表表头展示字段
this.getTableLabel()
}, 0)
}
}
......
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