[add] 市场法规清单新增
This commit is contained in:
lideqin
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="selection-wrapper">
|
||||
<div class="box-title-text">
|
||||
<a-input class="box-input"
|
||||
:value="nameStr || value"
|
||||
:title="value"
|
||||
@input="indexClick($event)"
|
||||
:disabled="disabled || selectOnly"
|
||||
:max-length="500"
|
||||
:placeholder="placeholder">
|
||||
|
||||
<a-icon v-if="(nameStr || value) && !disabled" slot="suffix" class="close-icon" type="close-circle" theme="filled" @click="clearInput" />
|
||||
</a-input>
|
||||
<a-button v-if="!disabled" type="primary" class="button-box" @click="listClick">
|
||||
{{ $t('marketRegulationsListSelect.marketRegulationsListSelection') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<market-regulations-list-selection-modal
|
||||
ref="marketRegulationsListSelectionModal"
|
||||
v-bind="$attrs"
|
||||
:value="value"
|
||||
@change="modalInput"
|
||||
@nameChange="modalNameChange"
|
||||
@listChange="modalListChange">
|
||||
</market-regulations-list-selection-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarketRegulationsListSelectionModal from './MarketRegulationsListSelectionModal'
|
||||
export default {
|
||||
name: 'MarketRegulationsListSelection',
|
||||
components: { MarketRegulationsListSelectionModal },
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否只能选择
|
||||
selectOnly: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 自定义点击标准选择按钮的事件
|
||||
customClickFunc: {
|
||||
type: Function
|
||||
},
|
||||
// 回显内容的字符串
|
||||
nameStr: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击选择法规清单按钮
|
||||
listClick () {
|
||||
if (this.customClickFunc && typeof this.customClickFunc === 'function') {
|
||||
this.customClickFunc(() => {
|
||||
this.$refs.marketRegulationsListSelectionModal.open()
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$refs.marketRegulationsListSelectionModal.open()
|
||||
},
|
||||
// 清空输入框
|
||||
clearInput () {
|
||||
console.log('输入框清空了')
|
||||
this.$emit('change', '')
|
||||
this.$emit('nameChange', '')
|
||||
this.$emit('listChange', [])
|
||||
},
|
||||
// 输入框输入监听
|
||||
indexClick (event) {
|
||||
this.$emit('change', event.target.value)
|
||||
},
|
||||
modalInput (value) {
|
||||
this.$emit('change', value)
|
||||
},
|
||||
modalNameChange (value) {
|
||||
this.$emit('nameChange', value)
|
||||
},
|
||||
modalListChange (value) {
|
||||
this.$emit('listChange', value)
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
.selection-wrapper {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.box-title-text {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.box-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button-box {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.close-icon:hover {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:title="$t('marketRegulationsListSelect.marketRegulationsListSelection')"
|
||||
:maskClosable="false"
|
||||
:width="1000"
|
||||
placement="right"
|
||||
:closable="true"
|
||||
@close="handleCancel"
|
||||
:visible="visible"
|
||||
class="custom-drawer-style">
|
||||
<div class="custom-drawer-style-scroll">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<!-- 清单编号 -->
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item :label="$t('standardRegulationLibrary.marketRegulationsList.listNumber')">
|
||||
<j-input
|
||||
:placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.marketRegulationsList.listNumber')"
|
||||
v-model="queryParam.listNumber"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<!-- 清单名称 -->
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item :label="$t('standardRegulationLibrary.marketRegulationsList.listName')">
|
||||
<j-input
|
||||
:placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.marketRegulationsList.listName')"
|
||||
v-model="queryParam.listName"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<!-- 国家/地区 -->
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item :label="$t('standardRegulationLibrary.marketRegulationsList.countryRegion')">
|
||||
<j-dict-select-tag
|
||||
:placeholder="$t('pleaseSelect') + $t('standardRegulationLibrary.marketRegulationsList.countryRegion')"
|
||||
v-model="queryParam.countryRegion"
|
||||
dict-code="market_state"></j-dict-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<!-- 驾驶位置 -->
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item :label="$t('standardRegulationLibrary.marketRegulationsList.drivingPosition')">
|
||||
<j-dict-select-tag
|
||||
:placeholder="$t('pleaseSelect') + $t('standardRegulationLibrary.marketRegulationsList.drivingPosition')"
|
||||
v-model="queryParam.drivingPosition"
|
||||
dict-code="driving_position"></j-dict-select-tag>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<!-- 作者 -->
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item :label="$t('standardRegulationLibrary.marketRegulationsList.author')">
|
||||
<j-input
|
||||
:placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.marketRegulationsList.author')"
|
||||
v-model="queryParam.author"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchQuery" icon="search">{{ $t('query') }}</a-button>
|
||||
<a-button type="primary" ghost @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
|
||||
</div>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
rowKey="standardNumber"
|
||||
:scroll="{x: 900}"
|
||||
:data-source="dataList"
|
||||
:pagination="ipagination"
|
||||
:row-selection="{ type: type, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
:loading="loading"
|
||||
@change="handleTableChange">
|
||||
<template slot="text" slot-scope="text">
|
||||
<a-tooltip overlay-class-name="tooltip-style">
|
||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||
<div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<!-- 清单编号/清单名称 -->
|
||||
<template v-slot:toDetail="text, record">
|
||||
<a-tooltip overlay-class-name="tooltip-style">
|
||||
<template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
|
||||
<a v-if="text" class="link-a" @click="handleGoDetail(record)">{{ text }}</a>
|
||||
<div v-else class="table-text">{{ global.emptyLine }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<div class="custom-drawer-style-bottom-btn">
|
||||
<a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
|
||||
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{ $t('submit') }}</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JDictSelectTag from '../dict/JDictSelectTag'
|
||||
import { StandardSource } from '../../enums/commonEnums'
|
||||
import { getMarketRegulationsList } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: 'MarketRegulationsListSelectionModal',
|
||||
components: { JDictSelectTag },
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'checkbox'
|
||||
},
|
||||
// 列表数据不包含的标准
|
||||
excludeStandardNumbers: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
// 过滤条件
|
||||
filters: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
labelCol: {
|
||||
sm: 8
|
||||
},
|
||||
wrapperCol: {
|
||||
sm: 14
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
selectedRowList: [],
|
||||
loading: false,
|
||||
queryParam: {},
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
columns: [
|
||||
{ // 国家/地区
|
||||
title: this.$t('standardRegulationLibrary.marketRegulationsList.countryRegion'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'countryRegion',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{ // 清单编号
|
||||
title: this.$t('standardRegulationLibrary.marketRegulationsList.listNumber'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'listNumber',
|
||||
scopedSlots: { customRender: 'toDetail' }
|
||||
},
|
||||
{ // 清单编号
|
||||
title: this.$t('standardRegulationLibrary.marketRegulationsList.listName'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'listName',
|
||||
scopedSlots: { customRender: 'toDetail' }
|
||||
},
|
||||
{ // 驾驶位置
|
||||
title: this.$t('standardRegulationLibrary.marketRegulationsList.drivingPosition'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'drivingPosition',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{ // 清单版本
|
||||
title: this.$t('standardRegulationLibrary.marketRegulationsList.listVersion'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'listVersion',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{ // 发布时间
|
||||
title: this.$t('standardRegulationLibrary.marketRegulationsList.releaseTime'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'releaseTime',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{ // 作者
|
||||
title: this.$t('standardRegulationLibrary.marketRegulationsList.author'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'author',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{ // 清单状态
|
||||
title: this.$t('standardRegulationLibrary.marketRegulationsList.listState'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
dataIndex: 'listState',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: this.$t('operation'),
|
||||
scopedSlots: { customRender: 'action' },
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 170
|
||||
}
|
||||
],
|
||||
dataList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open () {
|
||||
this.visible = true
|
||||
this.queryParam = {}
|
||||
this.$nextTick(() => {
|
||||
this.replacePage()
|
||||
})
|
||||
},
|
||||
// 获取表格数据
|
||||
replacePage (arg) {
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1
|
||||
}
|
||||
const query = {
|
||||
...this.queryParam,
|
||||
...this.filters,
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
excludeStandardNumbers: this.excludeStandardNumbers
|
||||
}
|
||||
// this.selectedRowKeys = []
|
||||
this.loading = true
|
||||
getMarketRegulationsList(query).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataList = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
this.selectedRowKeys = this.value ? this.value.split(',') : (this.selectedRowKeys || [])
|
||||
} else {
|
||||
this.dataList = []
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
searchQuery () {
|
||||
this.replacePage(1)
|
||||
},
|
||||
searchReset () {
|
||||
// 如果禁用来源，就不重置来源
|
||||
if (this.disabledSourceSearch) {
|
||||
this.queryParam = {}
|
||||
} else {
|
||||
this.queryParam = {}
|
||||
}
|
||||
this.replacePage(1)
|
||||
},
|
||||
// 表格选择改变
|
||||
onSelectChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
// this.selectedRowList = row
|
||||
if (this.type === 'checkbox') {
|
||||
if (selectedRowKeys.length > this.selectedRowList.length) {
|
||||
// 说明是增加了数据
|
||||
for (const rowIndex in selectedRows) {
|
||||
if (!this.selectedRowList.find(item => item.standardNumber === selectedRows[rowIndex].standardNumber)) {
|
||||
// 不存在，追加
|
||||
this.selectedRowList.push(selectedRows[rowIndex])
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 说明是删除了数据
|
||||
if (selectedRowKeys && selectedRowKeys.length > 0) {
|
||||
// 没有选中数据，说明这一页没有选中数据了
|
||||
for (let i = 0; i < this.selectedRowList.length; i++) {
|
||||
if (!selectedRowKeys.find(item => item === this.selectedRowList[i].standardNumber)) {
|
||||
// 表格选中中没有找到这一条数据，说明已经被删了
|
||||
this.selectedRowList.splice(i, 1)
|
||||
i--
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.selectedRowList = []
|
||||
}
|
||||
}
|
||||
console.log(this.selectedRowList)
|
||||
} else {
|
||||
this.selectedRowList = selectedRows
|
||||
}
|
||||
},
|
||||
handleTableChange (pagination) {
|
||||
// 分页、排序、筛选变化时触发
|
||||
this.ipagination = pagination
|
||||
this.replacePage()
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
handleSubmit () {
|
||||
const serialNumber = []
|
||||
const serialNameArr = []
|
||||
if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
|
||||
this.selectedRowList.forEach(res => {
|
||||
serialNumber.push(res.standardNumber)
|
||||
serialNameArr.push(res.standardName)
|
||||
})
|
||||
this.$emit('change', this.selectedRowKeys.join(','))
|
||||
this.$emit('nameChange', serialNameArr.join(','))
|
||||
this.$emit('listChange', this.selectedRowList)
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(this.$t('selectLeastOne'))
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.selectedRowKeys = []
|
||||
this.ipagination = {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
handleTypeChange () {
|
||||
this.$forceUpdate()
|
||||
},
|
||||
// 点击跳转标准详情
|
||||
handleGoDetail (record) {
|
||||
let path = ''
|
||||
this.$openPageNewSheet({
|
||||
path: path,
|
||||
query: {
|
||||
id: record.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
Reference in New Issue
Block a user