FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code init

Browse Source
This commit is contained in:
chenxiaoxi
2021-05-25 18:06:45 +08:00
parent 02698d6dab
commit f54a8d4fa1
1367 changed files with 540755 additions and 21713 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/skillReq/SkillReqSee/SkillReqSee.vue
+201
View File
@@ -0,0 +1,201 @@
<!-- 标准法规库 - 动态&资料 -->
<template>
<div class="skillReqSee">
<div class="headerSearch">
<div class="search">
<el-input placeholder="请输入内容" v-model="keywordsValue" class="input-with-select">
<el-button slot="append" icon="el-icon-search" @click="searchData(searchDataValue)"></el-button>
</el-input>
</div>
</div>
<div class="content">
<!-- 左侧tree -->
<div class="contentLeft el-card">
<div>
<laws-tree
ref="layTree"
:zNodes="zNodes"
treeDivId="zNodesS"
checkEnable
:filterNode="false"
@treeOnCheck="(checkedList) => treeOnCheck(checkedList)"
class="ztree"
style="width: 200px;height: 400px;overflow: auto"
showRMenu
></laws-tree>
</div>
</div>
<div class="contentRight el-card">
<!-- 表单 -->
<div class="searchForm">
<search-form @searchData="searchData"></search-form>
</div>
<el-divider></el-divider>
<!-- table -->
<div class="dataTable">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
<el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="snum" label="编号" min-width="120"></el-table-column>
<el-table-column prop="area" label="领域" min-width="120"></el-table-column>
<el-table-column prop="subArea" label="子领域" min-width="120"></el-table-column>
<el-table-column prop="firSubjects" label="一级科目" min-width="120"></el-table-column>
<el-table-column prop="firSubjAsk" label="一级科目要求" min-width="120"></el-table-column>
<el-table-column prop="secSubjects" label="二级科目" min-width="120"></el-table-column>
<el-table-column prop="secSubjAsk" label="二级科目要求" min-width="120"></el-table-column>
<el-table-column prop="relateSystem" label="关联系统" min-width="120"></el-table-column>
<el-table-column prop="systemAsk" label="系统层级技术要求" min-width="120"></el-table-column>
<el-table-column prop="department" label="部门" min-width="120"></el-table-column>
</el-table>
<pagination
:page="pageItems"
:total="totalItems"
@pageChange="pageChangeItems"
@pageSizeChange="pageSizeChangeItems"
></pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import 'zTree/js/jquery.ztree.core.js'
import 'zTree/js/jquery.ztree.excheck.js'
import 'zTree/js/jquery.ztree.exedit.js'
import searchForm from './searchForm'
export default {
name: 'SkillReqSee',
components: {
searchForm
},
data () {
return {
zNodes: [],
keywordsValue: '',
tableData: [],
multipleSelection: [],
pageItems: 1,
totalItems: 0,
itemsRows: 10,
searchDataValue: {},
relateSystemList: [], // 系统
relateAssemList: [], // 总成
relatePartsList: [] // 部件
}
},
created () {
this.selectMenu()
this.searchData()
},
methods: {
// 查询二级菜单
selectMenu () {
this.$http.get('lawss/sarSkillList/queryTreeSkillList', {}, {
_this: this
}, res => {
let cur = res.data
let str = []
let option = {}
// eslint-disable-next-line no-unused-vars
let saveRoot = {}
for (var i = 0; i < cur.length; i++) {
option = {
id: cur[i].id,
pId: cur[i].parentId,
name: cur[i].dicTypeName,
dicTypeCode: cur[i].dicTypeCode
}
str.push(option)
if (cur[i].parentId == null || cur[i].parentId === '') {
this.saveRootNodes = cur[i].id
saveRoot = cur[i]
}
}
this.zNodes = str
}, e => {
})
},
// 获取选中的tree数组
treeOnCheck (checkedList) {
this.relateSystemList = []
this.relateAssemList = []
this.relatePartsList = []
checkedList.map((item, index) => {
if (item.level === 0) {
this.relateSystemList.push(item.dicTypeCode)
} else if (item.level === 1) {
this.relateAssemList.push(item.dicTypeCode)
} else if (item.level === 2) {
this.relatePartsList.push(item.dicTypeCode)
}
})
this.searchData()
},
pageChangeItems (page) {
this.pageItems = page
},
pageSizeChangeItems (pageSize) {
this.itemsRows = pageSize
this.getTestItemRow()
},
searchData (data = {}) {
data['keywords'] = this.keywordsValue ? this.keywordsValue : ''
data['page'] = 1
data['pageSize'] = 10
data['relateSystemList'] = this.relateSystemList || null // 系统
data['relateAssemList'] = this.relateAssemList || null // 总成
data['relatePartsList'] = this.relatePartsList || null // 部件
this.searchDataValue = data
this.$http.postData('lawss/sarSkillList/page', JSON.stringify(data), {
_this: this,
'Content-Type': 'application/json'
}, res => {
if (res.ok) {
this.tableData = res.data.list
this.totalItems = res.data.count
}
})
}
}
}
</script>
<style lang="less" scoped>
// @import "~@/assets/styles/style";
// @import "~@/assets/styles/mixins";
.skillReqSee {
height: 100%;
display: flex;
flex-direction: column;
.headerSearch {
padding-top: 10px;
text-align: center;
.search {
display: inline-block;
width: 400px;
}
}
.content {
display: flex;
flex-grow: 1;
margin-top: 10px;
.contentLeft {
flex-shrink: 0;
}
.contentRight {
margin-left: 3px;
flex-grow: 1;
.searchForm {
}
.dataTable {
padding: 10px;
}
.pagination {
position: static;
}
}
}
}
</style>
src/pages/skillReq/SkillReqSee/searchForm.vue
+433
View File
@@ -0,0 +1,433 @@
<!-- 标准法规库 - 动态&资料 -->
<template>
<div class="searchForm" v-loading="loading">
<div
v-for="(item,index) in searchOption"
class="searchRow"
:key="index"
:ref="item.needOpen ? 'searchRowRef' : ''"
:class="{ 'needOpen': item.needOpen && item.enoughData && !item.openStatus}"
>
<span class="searchLabel">{{item.label}}:</span>
<div class="searchData">
<span
v-for="(option, optionIndex) in item.data"
:key="optionIndex"
@click="selectOPtion(option.value,index)"
:class="{ 'active': item.selectValue.includes(option.value) }"
>{{option.label}}</span>
</div>
<span
v-if="item.needOpen && item.enoughData"
class="openBtn"
@click="openRow(item)"
>{{ item.openStatus ? '收缩' : '展开' }}</span>
</div>
<div class="searchRow" style="margin:15px 21px 0 0;border:none;">
<el-form class="label-input-form" style="width: 100%;display: flex;" >
<el-form-item label="科目"
prop="dicTypeName"
class="my-form-item add-form-item">
<el-input v-model="subject" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="生效日期"
prop="dicTypeName"
class="my-form-item add-form-item">
<el-date-picker
v-model="startDate"
type="daterange"
range-separator="—"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
</el-form>
<el-button icon="el-icon-search" type="primary" class="searchAngNewBtn" @click="reloadTable()"></el-button>
<el-button type="primary" @click="clearAllSearch()" class="searchAngNewBtn">清空查询</el-button>
</div>
<!-- <div class="searchRow" style="margin:15px 0">-->
<!-- <span class="searchLabel">科目:</span>-->
<!-- <el-input v-model="subject" placeholder="请输入内容" size="small" style="width:200px"></el-input>-->
<!-- </div>-->
<!-- <div class="searchRow">-->
<!-- <span class="searchLabel">生效日期:</span>-->
<!-- <el-date-picker-->
<!-- v-model="startDate"-->
<!-- type="daterange"-->
<!-- size="small"-->
<!-- range-separator="至"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- ></el-date-picker>-->
<!-- </div>-->
<!-- <div class="searchBtn">-->
<!-- <el-button icon="el-icon-search" type="primary" class="searchAngNewBtn" @click="reloadTable()"></el-button>-->
<!-- <el-button type="primary" @click="clearAllSearch()" class="searchAngNewBtn">清空查询</el-button>-->
<!-- </div>-->
</div>
</template>
<script>
const all = {label: '全部', value: 'all'}
export default {
name: 'searchForm',
props: {
keywordsValue: ''
},
data () {
return {
subject: '',
startDate: '',
loading: true,
// 搜索行数据
searchOption: [
{
label: '区域',
data: [],
selectValue: ['all']
},
{
label: '国家',
data: [],
// 是否需要展开
needOpen: true,
openStatus: false,
enoughData: false,
selectValue: ['all']
},
{
label: '来源类型',
data: [{label: '全部', value: 'all'}, {label: '强制法规', value: 'QZFG'}, {label: '机构测评', value: 'JGPC'}, {label: '市场要求', value: 'SCXQ'}, {label: '顾客需求', value: 'GKXQ'}, {label: '竞争策略', value: 'JZCL'}, {label: '部件专属要求', value: 'ZSXQ'}, {label: '其他', value: 'other'}],
selectValue: ['all']
},
{
label: '车辆类型',
data: [{label: '全部', value: 'all'}, {label: 'M1', value: 'M1'}, {label: 'M2', value: 'M2'}, {label: 'N1', value: 'N1'}, {label: 'N2', value: 'N2'}],
selectValue: ['all']
},
{
label: '车辆品类',
data: [{label: '全部', value: 'all'}, {label: '三厢轿车', value: 'SXJC'}, {label: '两厢轿车', value: 'LXJC'}, {label: '承载式SUV', value: 'CZSUV'}, {label: '非承载式SUV', value: 'FCZSUV'}, {label: '皮卡', value: 'PK'}, {label: '轻客', value: 'QK'}, {label: '轻货', value: 'QH'}],
selectValue: ['all']
},
{
label: '领域',
data: [],
selectValue: ['all']
},
{
label: '子领域',
data: [],
selectValue: ['all'],
// 是否需要展开
needOpen: true,
enoughData: false,
openStatus: false
},
// {
// label: '系统',
// data: [],
// selectValue: ['all']
// },
// {
// label: '总成',
// data: [],
// selectValue: ['all']
// },
// {
// label: '部件',
// data: [],
// selectValue: ['all']
// },
{
label: '部门',
data: [],
selectValue: ['all']
}
]
}
},
created () {
console.log('Object.keys(searchOption): ', Object.keys(this.searchOption))
this.getOptionData()
// setTimeout(() => {
// this.searchOption[6].data = Array(45).fill('test')
// this.searchOption[6].data = Array(45).fill('test')
// this.ifHaveEnoughData()
// }, 5000)
},
methods: {
/*
*@description: 获取选项数据
*@modifyContent:
*@author: 刘志超
*@date: 2020-09-27 10:47:29
*/
getOptionData () {
this.$http.get('sys/org/getTree', {}, {_this: this}, res => {
console.log('res: ', res)
this.searchOption[7].data = res.data.map(item => {
return {
label: item.orgName,
value: item.id
}
})
this.searchOption[7].data.unshift(all)
})
this.$http.get('sys/dictype/getDicTypeListCode', {}, {_this: this}, res => {
console.log('res: ', res)
Object.keys(res.data).forEach(item => {
switch (item) {
case 'REGION' :
this.searchOption[0].data = res.data[item]
this.searchOption[0].data.unshift(all)
break
case 'COUNTRY' :
this.searchOption[1].data = res.data[item]
this.searchOption[1].data.unshift(all)
break
case 'AREA' :
this.searchOption[5].data = res.data[item]
this.searchOption[5].data.unshift(all)
break
case 'SUBAREA' :
this.searchOption[6].data = res.data[item]
this.searchOption[6].data.unshift(all)
break
// case 'RELATESYSTEM' :
// this.searchOption[7].data = res.data[item]
// this.searchOption[7].data.unshift(all)
// break
// case 'RELATEASSEM' :
// this.searchOption[8].data = res.data[item]
// this.searchOption[8].data.unshift(all)
// break
// case 'RELATEPARTS' :
// this.searchOption[9].data = res.data[item]
// this.searchOption[9].data.unshift(all)
// break
}
})
this.ifHaveEnoughData()
this.loading = false
})
},
/*
*@description: 点击选项
*@modifyContent:
*@author: 刘志超
*@date: 2020-09-18 17:14:17
*/
selectOPtion (value, index) {
let optionArr = this.searchOption[index]['selectValue']
let optionIndex = optionArr.indexOf(value)
// 取消选中
if (optionIndex !== -1) {
// 只有全部不取消
if (!(optionArr.length === 1 && value === 'all')) {
optionArr.splice(optionIndex, 1)
}
// 取消之后没有选中的了，选中全部
if (optionArr.length === 0) {
optionArr.push('all')
}
} else {
if (value === 'all') {
optionArr.splice(0, optionArr.length)
optionArr.push('all')
} else {
optionArr.push(value)
if (optionArr[0] === 'all') {
optionArr.shift()
}
}
}
this.handleOptionClick(optionArr, index)
},
/*
*@description:处理选项点击
*@modifyContent:
*@author: 刘志超
*@date: 2020-09-27 13:50:21
*/
handleOptionClick (value, index) {
console.log('value: ', value)
// 区域
if (index === 0 || index === 5 || index === 7 || index === 8) {
this.loading = true
this.regionChange(value, index)
}
this.reloadTable()
},
/*
*@description: 区域改变
*@modifyContent:
*@author: 刘志超
*@date: 2020-09-27 11:32:22
*/
regionChange (value, index) {
// 全部
if (value[0] === 'all') {
this.$http.get('sys/dictype/getDicTypeListCode', {}, {_this: this}, res => {
console.log('res: ', res)
this.searchOption[index + 1].data = index === 0 ? res.data['COUNTRY'] : res.data['SUBAREA']
this.searchOption[index + 1].data.unshift(all)
this.ifHaveEnoughData()
this.loading = false
})
} else {
this.$http.get('sys/dictype/getDicTypeByParentCodes', {
dicTypeCode: value.toString()
}, {
_this: this
}, res => {
if (res.ok) {
this.searchOption[index + 1].data = res.data
this.searchOption[index + 1].data.unshift(all)
this.searchOption[index + 1].selectValue = ['all']
this.ifHaveEnoughData()
this.loading = false
}
})
}
},
/*
*@description: 搜索数据
*@modifyContent:
*@author: 刘志超
*@date: 2020-09-27 15:38:13
*/
reloadTable () {
let searchdata = this.searchOption.map(item => item.selectValue)
console.log('searchdata: ', searchdata)
let data = {}
const keys = ['regionList', 'countryList', 'sourceTypeList', 'carTypeList', 'carCategoryList', 'areaList', 'subAreaList', 'departmentList']
keys.forEach((key, index) => {
if (searchdata[index][0] !== 'all') {
data[key] = searchdata[index]
}
})
data['allSubjects'] = this.subject ? this.subject : null
console.log('this.startDate: ', this.startDate)
data['effectiveDate1'] = this.startDate[0] ? this.startDate[0] : null
data['effectiveDate2'] = this.startDate[1] ? this.startDate[1] : null
console.log('data: ', data)
this.$emit('searchData', data)
},
/*
*@description: 点击展开
*@modifyContent:
*@author: 刘志超
*@date: 2020-09-18 17:14:33
*/
openRow (item) {
item.openStatus = !item.openStatus
},
/*
*@description:重置
*@modifyContent:
*@author: 刘志超
*@date: 2020-09-18 17:14:52
*/
clearAllSearch () {
Object.keys(this.searchOption).forEach(key => {
this.searchOption[key].selectValue = ['all']
})
this.startDate = ''
this.subject = ''
},
/*
*@description:判断数据是否大于一行
*@modifyContent:
*@author: 刘志超
*@date: 2020-09-18 17:15:55
*/
ifHaveEnoughData () {
this.searchOption[1].enoughData = false
this.searchOption[6].enoughData = false
this.$nextTick(function () {
let cur = this.$refs['searchRowRef']
cur.forEach((dom, index) => {
// 数据足够多的时候才需要显示展开
if (dom.clientHeight > 40) {
// 这里searchOption里的index是写死的
index === 0 ? this.searchOption[1].enoughData = true : this.searchOption[6].enoughData = true
} else {
index === 0 ? this.searchOption[1].enoughData = false : this.searchOption[6].enoughData = false
}
})
})
}
}
}
</script>
<style lang="less" scoped>
.searchForm {
padding: 10px;
.my-form-item {
display: flex;
margin-right: 10px;
margin-bottom: 0;
}
.needOpen {
max-height: 35px;
overflow: hidden;
}
.searchRow {
border-bottom: 1px dashed #efefef;
font-size: 15px;
line-height: 35px;
display: flex;
position: relative;
margin-bottom: 5px;
.searchLabel {
flex-shrink: 0;
flex-basis: 80px;
}
.searchData {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.openBtn {
flex-shrink: 0;
color:#3391ce;
// align-self: flex-end;
}
span {
margin-right: 15px;
padding: 0px 7px;
border-radius: 2px;
transition: all 0.3s ease;
user-select: none;
margin-bottom: 5px;
}
}
.searchBtn {
margin-top: 20px;
}
.active {
background: #3391ce;
color: #fff;
line-height: 24px;
height: 24px;
}
}
</style>
<style lang="less">
.searchForm {
.el-range-separator {
line-height: 32px;
}
}
.el-table th {
background: rgb(248, 248, 249) !important;
}
</style>