add 车型项目库：增删改查
This commit is contained in:
赵霄
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!--查询区域-->
|
||||
<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('projectLibrary.projectName')">
|
||||
<j-input :placeholder="$t('pleaseEnter') + $t('projectLibrary.projectName')" v-model="queryParam.projectName"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!--工作令编号-->
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item :label="$t('projectLibrary.workOrderNumber')">
|
||||
<j-input :placeholder="$t('pleaseEnter') + $t('projectLibrary.workOrderNumber')" v-model="queryParam.workNumber"></j-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!--项目健康状态-->
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item :label="$t('projectLibrary.projectHealthStatus')">
|
||||
<j-dict-select-tag
|
||||
class="box-input"
|
||||
v-model="queryParam.projectHealth"
|
||||
:placeholder="$t('pleaseSelect') + $t('personalCenter.collection.status')"
|
||||
:type="'select'"
|
||||
:triggerChange="false"
|
||||
:dictCode="'project_health'" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :md="6" :sm="8">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="searchReset" icon="reload" ghost>{{ $t('reset') }}</a-button>
|
||||
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px">{{ $t('query') }}</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<!-- 新增-->
|
||||
<a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
|
||||
<!-- 导出-->
|
||||
<a-button icon="upload" type="primary" ghost @click="handleExportXls($t('projectLibrary.vehicleItemLibrary.vehicleItemLibrary'))">
|
||||
{{ $t('export') }}
|
||||
</a-button>
|
||||
<!-- 批量删除-->
|
||||
<a-button type="primary" icon="delete" ghost @click="batchDel">{{ $t('batchDelete') }}</a-button>
|
||||
<!-- PMS信息同步-->
|
||||
<a-button type="primary" icon="setting" ghost @click="handlePMSInfoSynchronization">
|
||||
{{ $t('projectLibrary.vehicleItemLibrary.PMSInfoSynchronization') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<j-table
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:can-drag="true"
|
||||
rowKey="id"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
|
||||
:pagination="ipagination"
|
||||
:scroll="{x: '100%'}"
|
||||
@change="handleTableChange">
|
||||
|
||||
<template v-slot:operation="{text, record}">
|
||||
<!-- 收藏-->
|
||||
<a @click="operationClick(operationList[0],record)">{{ operationList[0].text }}</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown placement="bottomCenter">
|
||||
<a-icon type="more" class="operate-icon-btn operate-icon-more" />
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
|
||||
<a @click="operationClick(operation,record)">
|
||||
<div class="operate-btn">
|
||||
<!-- 编辑图标-->
|
||||
<i class="iconfont icon-bianji operate-btn-icon" v-if="operation.text === $t('edit')" />
|
||||
<!-- 删除图标-->
|
||||
<i class="iconfont icon-shanchu_ operate-btn-icon" v-if="operation.text === $t('delete')" />
|
||||
{{ operation.text }}
|
||||
</div>
|
||||
</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
</j-table>
|
||||
</div>
|
||||
|
||||
<!--新增、编辑-->
|
||||
<vehicle-item-library-modal ref="modalForm" @ok="modalFormOk" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@assets/less/common.less'
|
||||
import { JeroListMixin } from '../../../mixins/JeroListMixin.js'
|
||||
import JTable from '../../../components/jero/JTable.vue'
|
||||
import VehicleItemLibraryModal from './modules/VehicleItemLibraryModal.vue'
|
||||
|
||||
export default {
|
||||
name: 'VehicleItemLibrary',
|
||||
components: { JTable, VehicleItemLibraryModal },
|
||||
mixins: [JeroListMixin],
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
// 项目来源
|
||||
{
|
||||
dataIndex: 'projectSource_dictText',
|
||||
title: this.$t('projectLibrary.vehicleItemLibrary.projectSource'),
|
||||
width: 250
|
||||
},
|
||||
// 项目名称
|
||||
{
|
||||
dataIndex: 'projectName',
|
||||
title: this.$t('projectLibrary.projectName'),
|
||||
sorter: true,
|
||||
width: 250
|
||||
},
|
||||
// 工作令编号
|
||||
{
|
||||
dataIndex: 'workNumber',
|
||||
title: this.$t('projectLibrary.workOrderNumber'),
|
||||
sorter: true,
|
||||
width: 250
|
||||
},
|
||||
// 项目负责人
|
||||
{
|
||||
dataIndex: 'projectLeader',
|
||||
title: this.$t('projectLibrary.vehicleItemLibrary.projectLeader'),
|
||||
width: 250
|
||||
},
|
||||
// 项目健康状态
|
||||
{
|
||||
dataIndex: 'projectHealth_dictText',
|
||||
title: this.$t('projectLibrary.projectHealthStatus'),
|
||||
width: 250
|
||||
},
|
||||
// 操作
|
||||
{
|
||||
title: this.$t('operation'),
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
}
|
||||
],
|
||||
operationList: [
|
||||
// 查看
|
||||
{
|
||||
text: this.$t('view'),
|
||||
clickEvent: 'handleCollection',
|
||||
has: ''
|
||||
},
|
||||
{
|
||||
text: this.$t('projectLibrary.vehicleItemLibrary.PMSDetails'),
|
||||
clickEvent: 'handleShare',
|
||||
has: ''
|
||||
},
|
||||
{
|
||||
text: this.$t('edit'),
|
||||
clickEvent: 'handleEdit',
|
||||
has: ''
|
||||
},
|
||||
{
|
||||
text: this.$t('delete'),
|
||||
clickEvent: 'handleDelete',
|
||||
has: ''
|
||||
}
|
||||
],
|
||||
needFilterTableBtn: true, // 是否需要过滤表格操作列没有权限的按钮
|
||||
url: {
|
||||
list: '/projectLibrary/lawsProjectLibrary/page',
|
||||
delete: '/projectLibrary/lawsProjectLibrary/delete',
|
||||
deleteBatch: '/projectLibrary/lawsProjectLibrary/deleteBatch',
|
||||
exportXlsUrl: '/projectLibrary/lawsProjectLibrary/exportXls'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePMSInfoSynchronization () {
|
||||
|
||||
},
|
||||
operationClick (operation, record) {
|
||||
if (operation.clickEvent === 'handleDelete') {
|
||||
this.handleDelete(record.id)
|
||||
} else {
|
||||
this[operation.clickEvent](record)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="title"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
:maskClosable="false"
|
||||
:confirmLoading="confirmLoading"
|
||||
:ok-text="$t('preservation')"
|
||||
:cancel-text="$t('cancel')"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-row :gutter="30">
|
||||
<!--项目来源-->
|
||||
<a-col :span="12">
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('projectLibrary.vehicleItemLibrary.projectSource')">
|
||||
<j-dict-select-tag v-decorator="['projectSource', validatorRules.projectSource]" dictCode="project_source" disabled
|
||||
:placeholder="$t('pleaseSelect') + $t('projectLibrary.vehicleItemLibrary.projectSource')" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!--项目名称-->
|
||||
<a-col :span="12">
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('projectLibrary.projectName')">
|
||||
<a-input :placeholder="$t('pleaseEnter') + $t('projectLibrary.projectName')"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
:maxLength="50"
|
||||
v-decorator="['projectName', validatorRules.projectName]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="30">
|
||||
<!--工作令编号-->
|
||||
<a-col :span="12">
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('projectLibrary.workOrderNumber')">
|
||||
<a-input :placeholder="$t('pleaseEnter') + $t('projectLibrary.workOrderNumber')"
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
:maxLength="50"
|
||||
v-decorator="['workNumber', validatorRules.workNumber]" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!--项目负责人-->
|
||||
<a-col :span="12">
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('projectLibrary.vehicleItemLibrary.projectLeader')">
|
||||
<user-selection v-decorator="['projectLeader', validatorRules.projectLeader]"
|
||||
:placeholder="$t('pleaseSelect') + $t('projectLibrary.vehicleItemLibrary.projectLeader')" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="30">
|
||||
<!--项目健康度-->
|
||||
<a-col :span="12">
|
||||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('projectLibrary.projectHealthStatus')">
|
||||
<j-dict-select-tag v-decorator="['projectHealth', validatorRules.projectHealth]" dictCode="project_health"
|
||||
:placeholder="$t('pleaseSelect') + $t('projectLibrary.projectHealthStatus')" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserSelection from '../../../../components/selection/UserSelection.vue'
|
||||
import { addVehicleItemLibrary, editVehicleItemLibrary } from '../../../../api/projectLibraryApi.js'
|
||||
import { ProjectSource } from '../../../../enums/commonEnums.js'
|
||||
|
||||
export default {
|
||||
name: 'VehicleItemLibraryModal',
|
||||
components: { UserSelection },
|
||||
data () {
|
||||
return {
|
||||
title: this.$t('newlyAdded'),
|
||||
width: 800,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
model: {},
|
||||
form: this.$form.createForm(this),
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
},
|
||||
validatorRules: {
|
||||
// 项目来源
|
||||
projectSource: {
|
||||
rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('standardRegulationLibrary.nodeName') }],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
// 项目名称
|
||||
projectName: {
|
||||
rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('projectLibrary.projectName') }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
// 工作令编号
|
||||
workNumber: {
|
||||
rules: [{ required: false, message: this.$t('pleaseEnter') + this.$t('projectLibrary.workOrderNumber') }],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
// 项目负责人
|
||||
projectLeader: {
|
||||
rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('projectLibrary.vehicleItemLibrary.projectLeader') }],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
// 项目健康度
|
||||
projectHealth: {
|
||||
rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('projectLibrary.projectHealthStatus') }],
|
||||
validateTrigger: 'change'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.form.resetFields()
|
||||
this.visible = true
|
||||
this.model.projectSource = ProjectSource.ADD.value
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(this.model)
|
||||
})
|
||||
},
|
||||
edit (record) {
|
||||
this.form.resetFields()
|
||||
this.model = Object.assign({}, record)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(this.model)
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.form.validateFields((errors, values) => {
|
||||
if (!errors) {
|
||||
this.confirmLoading = true
|
||||
const formData = Object.assign(this.model, values)
|
||||
let submitFunc
|
||||
if (this.model.id) {
|
||||
submitFunc = editVehicleItemLibrary
|
||||
} else {
|
||||
submitFunc = addVehicleItemLibrary
|
||||
}
|
||||
submitFunc(formData).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.close()
|
||||
this.$emit('ok')
|
||||
} else {
|
||||
this.$message.warn(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user