'init'
This commit is contained in:
264
src/views/basicData/AlarmManagement/alarmInfo.vue
Normal file
264
src/views/basicData/AlarmManagement/alarmInfo.vue
Normal file
@@ -0,0 +1,264 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:20
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<alarmInfo-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import i18n from '@/lang'
|
||||
import { alarmInfoList, alarmInfoDelete } from '@/api/basicData/AlarmManagement/alarmInfo'
|
||||
import { alarmLevelList } from '@/api/basicData/AlarmManagement/alarmLevel'
|
||||
import { alarmTypeList } from '@/api/basicData/AlarmManagement/alarmType'
|
||||
import alarmInfoAdd from './components/alarmInfo-add.vue'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
// , handleLimit
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmGrade',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmType',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmType'),
|
||||
align: 'center'
|
||||
},
|
||||
// {
|
||||
// prop: 'alarmContent',
|
||||
// label: i18n.t('module.basicData.alarmManagement.AlarmContent'),
|
||||
// align: 'center',
|
||||
// filter: handleLimit
|
||||
// },
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'AlarmInfo',
|
||||
components: { TopTitle, HeadForm, Pagination, BaseTable, MethodBtn, alarmInfoAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
alarmType: '',
|
||||
code: '',
|
||||
alarmGrade: ''
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmCode'),
|
||||
placeholder: this.$t('module.basicData.alarmManagement.AlarmCode'),
|
||||
param: 'code'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: this.$t('module.basicData.alarmManagement.AlarmType'),
|
||||
selectOptions: [],
|
||||
param: 'alarmType',
|
||||
defaultSelect: ''
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: this.$t('module.basicData.alarmManagement.AlarmLevel'),
|
||||
selectOptions: [],
|
||||
param: 'alarmGrade',
|
||||
defaultSelect: ''
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
alarmInfoDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
const lQuery = {
|
||||
current: 1,
|
||||
size: 999
|
||||
}
|
||||
alarmTypeList(lQuery).then(response => {
|
||||
this.headFormConfig[1].selectOptions = response.data.records.map(item => {
|
||||
return { id: item.name, name: item.name }
|
||||
})
|
||||
})
|
||||
alarmLevelList(lQuery).then(response => {
|
||||
this.headFormConfig[2].selectOptions = response.data.records.map(item => {
|
||||
return { id: item.alarmGrade, name: item.alarmGrade }
|
||||
})
|
||||
})
|
||||
this.listLoading = true
|
||||
this.listQuery.code = this.headFormValue.code
|
||||
this.listQuery.alarmType = this.headFormValue.alarmType
|
||||
this.listQuery.alarmGrade = this.headFormValue.alarmGrade
|
||||
alarmInfoList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()// 新增
|
||||
}
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
215
src/views/basicData/AlarmManagement/alarmLevel.vue
Normal file
215
src/views/basicData/AlarmManagement/alarmLevel.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:23
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<alarmLevel-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import i18n from '@/lang'
|
||||
import { alarmLevelList, alarmLevelDelete } from '@/api/basicData/AlarmManagement/alarmLevel'
|
||||
import alarmLevelAdd from './components/alarmLevel-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmGradeCode',
|
||||
label: i18n.t('module.basicData.alarmManagement.LevelCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmGrade',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'AlarmLevel',
|
||||
components: { TopTitle, Pagination, BaseTable, MethodBtn, HeadForm, alarmLevelAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.alarmManagement.AlarmLevel') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.alarmManagement.LevelCode'),
|
||||
param: 'keyName',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.alarmGrade}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
alarmLevelDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.alarmGrade = this.headFormValue.keyName
|
||||
this.listQuery.alarmGradeCode = this.headFormValue.keyName
|
||||
alarmLevelList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()// 新增
|
||||
}
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
215
src/views/basicData/AlarmManagement/alarmType.vue
Normal file
215
src/views/basicData/AlarmManagement/alarmType.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:25
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<alarmType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import i18n from '@/lang'
|
||||
import { alarmTypeList, alarmTypeDelete } from '@/api/basicData/AlarmManagement/alarmType'
|
||||
import alarmTypeAdd from './components/alarmType-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmTypeCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmType'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'AlarmType',
|
||||
components: { TopTitle, Pagination, BaseTable, MethodBtn, HeadForm, alarmTypeAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.alarmManagement.AlarmType') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.alarmManagement.AlarmTypeCode'),
|
||||
param: 'keyName',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
alarmTypeDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.keyName
|
||||
this.listQuery.code = this.headFormValue.keyName
|
||||
alarmTypeList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()// 新增
|
||||
}
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
165
src/views/basicData/AlarmManagement/components/alarmInfo-add.vue
Normal file
165
src/views/basicData/AlarmManagement/components/alarmInfo-add.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-04-16 15:02:00
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmName')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmName')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmCode')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmType')" prop="alarmType">
|
||||
<el-select v-model="dataForm.alarmType" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmType')])" clearable>
|
||||
<el-option
|
||||
v-for="item in TypeArr"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmLevel')" prop="alarmGrade">
|
||||
<el-select v-model="dataForm.alarmGrade" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmLevel')])" clearable>
|
||||
<el-option
|
||||
v-for="item in GradeArr"
|
||||
:key="item.id"
|
||||
:label="item.alarmGrade"
|
||||
:value="item.alarmGrade"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="$t('module.basicData.alarmManagement.AlarmContent')" prop="alarmContent">
|
||||
<el-input v-model="dataForm.alarmContent" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmContent')])" clearable />
|
||||
</el-form-item> -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { alarmInfoDetail, alarmInfoUpdate, alarmInfoAdd, alarmInfoCode } from '@/api/basicData/AlarmManagement/alarmInfo'
|
||||
import { alarmLevelList } from '@/api/basicData/AlarmManagement/alarmLevel'
|
||||
import { alarmTypeList } from '@/api/basicData/AlarmManagement/alarmType'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
GradeArr: [],
|
||||
TypeArr: [],
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
alarmGrade: '',
|
||||
alarmType: '',
|
||||
alarmContent: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmName')]), trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmCode')]), trigger: 'blur' }
|
||||
],
|
||||
alarmGrade: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmLevel')]), trigger: 'blur' }
|
||||
],
|
||||
alarmType: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmType')]), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
const listQuery = {
|
||||
current: 1,
|
||||
size: 999
|
||||
}
|
||||
alarmTypeList(listQuery).then(response => {
|
||||
this.TypeArr = response.data.records
|
||||
})
|
||||
alarmLevelList(listQuery).then(response => {
|
||||
this.GradeArr = response.data.records
|
||||
})
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
alarmInfoDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm.name = res.data.name
|
||||
this.dataForm.code = res.data.code
|
||||
this.dataForm.alarmType = res.data.alarmType
|
||||
this.dataForm.alarmGrade = res.data.alarmGrade
|
||||
this.dataForm.alarmContent = res.data.alarmContent
|
||||
this.dataForm.remark = res.data.remark
|
||||
})
|
||||
} else {
|
||||
alarmInfoCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'name': this.dataForm.name,
|
||||
'code': this.dataForm.code,
|
||||
'alarmGrade': this.dataForm.alarmGrade,
|
||||
'alarmType': this.dataForm.alarmType,
|
||||
'alarmContent': this.dataForm.alarmContent,
|
||||
'remark': this.dataForm.remark,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
alarmInfoUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
alarmInfoAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,113 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-06 11:12:30
|
||||
* @remark:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmLevel')" prop="alarmGrade">
|
||||
<el-input v-model="dataForm.alarmGrade" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmLevel')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.LevelCode')" prop="alarmGradeCode">
|
||||
<el-input v-model="dataForm.alarmGradeCode" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.LevelCode')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { alarmLevelDetail, alarmLevelUpdate, alarmLevelAdd, alarmLevelCode } from '@/api/basicData/AlarmManagement/alarmLevel'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
alarmGradeCode: '',
|
||||
alarmGrade: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
alarmGrade: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmLevel')]), trigger: 'blur' }
|
||||
],
|
||||
alarmGradeCode: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.LevelCode')]), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
alarmLevelDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm.alarmGradeCode = res.data.alarmGradeCode
|
||||
this.dataForm.alarmGrade = res.data.alarmGrade
|
||||
this.dataForm.remark = res.data.remark
|
||||
})
|
||||
} else {
|
||||
alarmLevelCode().then(res => {
|
||||
this.dataForm.alarmGradeCode = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'alarmGradeCode': this.dataForm.alarmGradeCode,
|
||||
'alarmGrade': this.dataForm.alarmGrade,
|
||||
'remark': this.dataForm.remark,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
alarmLevelUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
alarmLevelAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
113
src/views/basicData/AlarmManagement/components/alarmType-add.vue
Normal file
113
src/views/basicData/AlarmManagement/components/alarmType-add.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-25 16:22:53
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmType')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmType')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmTypeCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmTypeCode')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { alarmTypeDetail, alarmTypeUpdate, alarmTypeAdd, alarmTypeCode } from '@/api/basicData/AlarmManagement/alarmType'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmType')]), trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmTypeCode')]), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
alarmTypeDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm.name = res.data.name
|
||||
this.dataForm.code = res.data.code
|
||||
this.dataForm.remark = res.data.remark
|
||||
})
|
||||
} else {
|
||||
alarmTypeCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'name': this.dataForm.name,
|
||||
'code': this.dataForm.code,
|
||||
'remark': this.dataForm.remark,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
alarmTypeUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
alarmTypeAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
298
src/views/basicData/Cache/area.vue
Normal file
298
src/views/basicData/Cache/area.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-03-18 11:00:00
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="areaList"
|
||||
@emitFun="handleTableEvents"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<area-add-dialog
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:cache-id="listQuery.cacheId"
|
||||
@refreshDataList="getList"
|
||||
@handleClosed="handleClosed"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del, toggleEnable, getCacheList } from '@/api/basicData/Cache/area'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import viewDetailBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
import statusSwitch from './components/statusBtn.vue'
|
||||
import areaAddDialog from './components/cacheArea-add.vue'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.cache.AreaNameInTable')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.cache.AreaCodeInTable')
|
||||
},
|
||||
{
|
||||
prop: 'cacheName',
|
||||
label: i18n.t('module.basicData.cache.AreaCache')
|
||||
},
|
||||
{
|
||||
prop: 'enName',
|
||||
label: i18n.t('module.basicData.cache.EnglishName')
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: i18n.t('module.basicData.cache.AreaStatus'),
|
||||
subcomponent: statusSwitch
|
||||
},
|
||||
{
|
||||
prop: 'stockDetails',
|
||||
label: i18n.t('module.basicData.cache.StockDetails'),
|
||||
subcomponent: viewDetailBtn,
|
||||
buttonContent: '查看详情'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Area',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, areaAddDialog },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
areaList: [],
|
||||
cacheList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.cache.Keywords'),
|
||||
placeholder: this.$t('module.basicData.cache.AreaName'),
|
||||
param: 'keyName'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
current: 1,
|
||||
size: 500
|
||||
}
|
||||
getCacheList(params).then(response => {
|
||||
if (response.data.records) {
|
||||
this.cacheList = response.data.records
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
showStocksDialog(vArea) {
|
||||
// 查看库位详情的功能在此处和编辑是一样的
|
||||
this.addNew(vArea.id, true)
|
||||
},
|
||||
|
||||
handleTableEvents({ action, data }) {
|
||||
if (action === 'toggleEnabled') this.updateStatus(data)
|
||||
else if (action === 'view-detail-action') this.showStocksDialog(data)
|
||||
// 其他可能等用到再添加
|
||||
},
|
||||
|
||||
updateStatus(vArea) {
|
||||
// vArea 并非完整的 area 对象,而是接口需要的对象
|
||||
toggleEnable(vArea).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
} else {
|
||||
this.addNew(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.keyName
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.areaList = response.data.records
|
||||
this.areaList.forEach(item => {
|
||||
const name = this.cacheList.find(citem => {
|
||||
if (citem.id === item.cacheId) return citem
|
||||
})
|
||||
if (name) {
|
||||
item.cacheName = name.name
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.areaList.splice(0, this.areaList.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, readonly) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, 'area', readonly)
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClosed() {
|
||||
this.addOrUpdateVisible = false
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew() // 新增
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
319
src/views/basicData/Cache/cache.vue
Normal file
319
src/views/basicData/Cache/cache.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:31
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="cacheList"
|
||||
:is-loading="listLoading"
|
||||
@emitFun="handleTableEvents"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
|
||||
<!-- 新增|编辑 缓存区 -->
|
||||
<cache-edit-dialog
|
||||
v-if="showEditDialog"
|
||||
ref="edit-dialog"
|
||||
@refreshDataList="getList"
|
||||
@handleClosed="handleClosed"
|
||||
/>
|
||||
|
||||
<!-- 库位详情 -->
|
||||
<stock-detail-dialog
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:cache-id="listQuery.cacheId"
|
||||
@refreshDataList="getList"
|
||||
@handleClosed="handleClosed"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del, toggleEnabled } from '@/api/basicData/Cache/cache'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import statusSwitch from './components/statusBtn.vue'
|
||||
import viewDetailBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
|
||||
import cacheEditDialog from './components/cache-edit.vue'
|
||||
import stockDetailDialog from './components/cacheArea-add.vue'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.cache.CacheName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.cache.CacheCode')
|
||||
},
|
||||
{
|
||||
prop: 'enName',
|
||||
label: i18n.t('module.basicData.visual.EnglishName')
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: i18n.t('module.basicData.cache.AreaStatus'),
|
||||
subcomponent: statusSwitch
|
||||
},
|
||||
{
|
||||
prop: 'stockDetails',
|
||||
label: i18n.t('module.basicData.cache.StockDetails'),
|
||||
subcomponent: viewDetailBtn,
|
||||
buttonContent: '查看详情',
|
||||
detailType: 'cache'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Cache',
|
||||
components: {
|
||||
cacheEditDialog,
|
||||
Pagination,
|
||||
BaseTable,
|
||||
MethodBtn,
|
||||
HeadForm,
|
||||
stockDetailDialog
|
||||
},
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showEditDialog: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
cacheList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
addOrUpdateVisible: false,
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder:
|
||||
this.$t('module.basicData.cache.CacheName') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.cache.CacheCode'),
|
||||
param: 'keyName',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleTableEvents({ action, data }) {
|
||||
if (action === 'toggleEnabled') this.updateStatus(data)
|
||||
else if (action === 'view-detail-action') this.viewStockDetails(data)
|
||||
},
|
||||
|
||||
// 查看库位详情
|
||||
viewStockDetails(vCache) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(vCache.id, 'cache', true) // true 代表 readonly
|
||||
})
|
||||
},
|
||||
|
||||
// 切换启停状态
|
||||
updateStatus(vCache) {
|
||||
// vCache: nota a full cache obj, but the necessary part: { id, enabled }
|
||||
toggleEnabled(vCache).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id) // 传入 cacheId
|
||||
} else {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.keyName
|
||||
this.listQuery.code = this.headFormValue.keyName
|
||||
// 先清空list
|
||||
this.cacheList.splice(0, this.cacheList.length)
|
||||
// 再填满list, 可以实现在关闭编辑弹窗之后能同步更新table里的状态
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.cacheList = response.data.records
|
||||
} else {
|
||||
this.cacheList.splice(0, this.cacheList.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
addNew(cacheId) {
|
||||
this.showEditDialog = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['edit-dialog'].init(cacheId)
|
||||
})
|
||||
},
|
||||
|
||||
// 新增 / 修改
|
||||
// addNew(id, isdetail) {
|
||||
// this.$router.push({
|
||||
// name: 'cacheAdd',
|
||||
// query: {
|
||||
// id: id,
|
||||
// isdetail: isdetail
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
|
||||
handleClosed() {},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew(null) // 新增
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
36
src/views/basicData/Cache/components/PositionDetail.vue
Normal file
36
src/views/basicData/Cache/components/PositionDetail.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<!--
|
||||
* @Date: 2021-01-07 20:09:37
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-07-21 14:18:59
|
||||
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<span>
|
||||
<el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.storageBox.PositionDetail') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitClick() {
|
||||
this.$router.push({
|
||||
name: 'PositionDetailInfo',
|
||||
query: {
|
||||
id: this.injectData.id,
|
||||
name: this.injectData.name,
|
||||
code: this.injectData.code,
|
||||
quantity: this.injectData.quantity
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-07-21 14:39:23
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.storageBox.PositionCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.PositionCode')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.storageBox.PositionCodeAlias')" prop="aliasName">
|
||||
<el-input v-model="dataForm.aliasName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.PositionCodeAlias')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.storageBox.PositionNo')" prop="serial">
|
||||
<el-input v-model="dataForm.serial" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.PositionNo')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { PositionDetailInfoAdd } from '@/api/basicData/Cache/storageBox'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
storageTankId: 0,
|
||||
code: '',
|
||||
aliasName: '',
|
||||
serial: ''
|
||||
},
|
||||
dataRule: {
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.storageBox.PositionCode')]),
|
||||
trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id, code) {
|
||||
this.dataForm.storageTankId = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.dataForm.code = code
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = this.dataForm
|
||||
PositionDetailInfoAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
112
src/views/basicData/Cache/components/PositionDetailInfo.vue
Normal file
112
src/views/basicData/Cache/components/PositionDetailInfo.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-21 14:05:30
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-07-21 14:41:24
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="margin:50px">
|
||||
<span>{{ $t('module.basicData.storageBox.code') }}:{{ injectData.code }}</span>
|
||||
<span>{{ $t('module.basicData.storageBox.name') }}:{{ injectData.name }}</span>
|
||||
<span>{{ $t('module.basicData.storageBox.StorageQuantity') }}:{{ injectData.quantity }}</span>
|
||||
<span>
|
||||
<el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
|
||||
<el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
/>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<PositionDetailInfo-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:cache-id="listQuery.cacheId"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import PositionDetailInfoAdd from './PositionDetailInfo-add'
|
||||
import { PositionDetailInfoList } from '@/api/basicData/Cache/storageBox'
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'serial',
|
||||
label: i18n.t('module.basicData.storageBox.PositionNo')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.storageBox.PositionCode')
|
||||
},
|
||||
{
|
||||
prop: 'aliasName',
|
||||
label: i18n.t('module.basicData.storageBox.PositionCodeAlias')
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: { Pagination, BaseTable, PositionDetailInfoAdd },
|
||||
data() {
|
||||
return {
|
||||
injectData: {},
|
||||
addOrUpdateVisible: false,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.injectData = this.$route.query
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
PositionDetailInfoList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew() {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(this.injectData.id, this.injectData.code)
|
||||
})
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
margin-left: 30px;
|
||||
}
|
||||
</style>
|
||||
243
src/views/basicData/Cache/components/cache-edit.vue
Normal file
243
src/views/basicData/Cache/components/cache-edit.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-14 15:00:00
|
||||
* @LastEditors: juzi
|
||||
* @LastEditTime: 2022-04-19
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :visible.sync="visible" :title="!isEdit ? 'btn.add' : 'btn.edit' | i18nFilter" @closed="handleClosed">
|
||||
<!-- <span slot="title">
|
||||
<small-title>
|
||||
{{ !isEdit ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title>
|
||||
</span> -->
|
||||
|
||||
<div>
|
||||
<el-form
|
||||
ref="cacheForm"
|
||||
:model="cacheForm"
|
||||
:rules="cacheValidationRules"
|
||||
label-width="100px"
|
||||
@keyup.enter.native="submitCacheForm()"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<!-- 缓存区编码 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.cache.CacheCode')" prop="code">
|
||||
<el-input
|
||||
v-model="cacheForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.CacheCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 缓存区名称 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.cache.CacheName')" prop="name">
|
||||
<el-input
|
||||
v-model="cacheForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.CacheName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 英文名 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.cache.EnglishName')" prop="enName">
|
||||
<el-input
|
||||
v-model="cacheForm.enName"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.EnglishName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 缩写 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.cache.abbr')" prop="abbr">
|
||||
<el-input
|
||||
v-model="cacheForm.abbr"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.abbr')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 规格描述 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.cache.Specs')" prop="description">
|
||||
<el-input
|
||||
v-model="cacheForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.Specs')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 库位数 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.cache.StockNumber')" prop="stockNumber">
|
||||
<el-input-number
|
||||
v-model="cacheForm.stockNumber"
|
||||
type="number"
|
||||
:min="0"
|
||||
:step="1"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.StockNumber')])"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 当前状态 -->
|
||||
<el-col>
|
||||
<el-form-item :label="$t('module.basicData.cache.CurrentState')" prop="enabled">
|
||||
<el-switch v-model="currentStatus" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 备注 -->
|
||||
<el-col>
|
||||
<el-form-item :label="$t('module.basicData.cache.Notes')" prop="remark">
|
||||
<el-input
|
||||
v-model="cacheForm.remark"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.Notes')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="submitCacheForm">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCode, detail, update, add } from '@/api/basicData/Cache/cache'
|
||||
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
export default {
|
||||
// components: { SmallTitle },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
isEdit: false, // false means isCreate
|
||||
visible: false,
|
||||
cacheForm: {
|
||||
id: null,
|
||||
code: '',
|
||||
name: '',
|
||||
enName: '',
|
||||
abbr: '',
|
||||
description: '',
|
||||
stockNumber: 0,
|
||||
remark: '',
|
||||
enabled: 0
|
||||
},
|
||||
cacheValidationRules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.CacheName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.CacheCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStatus: {
|
||||
get() {
|
||||
return !!this.cacheForm.enabled
|
||||
},
|
||||
set(val) {
|
||||
this.cacheForm.enabled = val ? 1 : 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initCacheForm()
|
||||
},
|
||||
methods: {
|
||||
// initialize this.cacheForm
|
||||
initCacheForm() {
|
||||
this.cacheForm.id = null
|
||||
this.cacheForm.code = ''
|
||||
this.cacheForm.name = ''
|
||||
this.cacheForm.enName = ''
|
||||
this.cacheForm.abbr = ''
|
||||
this.cacheForm.description = ''
|
||||
this.cacheForm.stockNumber = 0
|
||||
this.cacheForm.remark = ''
|
||||
this.cacheForm.enabled = 1 // 初始化默认的可用状态为true
|
||||
},
|
||||
// init
|
||||
init(cacheId) {
|
||||
this.initCacheForm()
|
||||
// 显示对话框
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
if (cacheId) {
|
||||
this.isEdit = true
|
||||
// 如果是编辑
|
||||
this.cacheForm.id = cacheId
|
||||
detail(this.cacheForm.id).then(response => {
|
||||
this.cacheForm = response.data
|
||||
})
|
||||
} else {
|
||||
this.isEdit = false
|
||||
// 新增
|
||||
getCode().then(response => {
|
||||
this.cacheForm.code = response.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
submitCacheForm() {
|
||||
this.$refs['cacheForm'].validate(valid => {
|
||||
console.log(valid)
|
||||
if (valid) {
|
||||
const ajaxAction = this.isEdit ? update : add
|
||||
ajaxAction(this.cacheForm).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 弹窗关闭
|
||||
handleClosed() {
|
||||
this.$emit('handleClosed')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
772
src/views/basicData/Cache/components/cacheArea-add.vue
Normal file
772
src/views/basicData/Cache/components/cacheArea-add.vue
Normal file
@@ -0,0 +1,772 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:42
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<!-- <el-dialog :visible.sync="visible" @closed="handleClosed" class="custom-dialog"> -->
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" :class="{ 'drawer-wider': showStocks }">
|
||||
<span slot="title">
|
||||
<small-title>
|
||||
{{ readonly ? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title>
|
||||
</span>
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-position="top"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<!-- 缓存区/区域名 -->
|
||||
<el-col :span="!showStocks ? 24 : 8">
|
||||
<el-form-item
|
||||
:label="isFromAreaPage ? $t('module.basicData.cache.AreaName') : $t('module.basicData.cache.CacheName')"
|
||||
prop="name"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="
|
||||
isFromAreaPage
|
||||
? $i18nForm(['placeholder.input', $t('module.basicData.cache.AreaName')])
|
||||
: $i18nForm(['placeholder.input', $t('module.basicData.cache.CacheName')])
|
||||
"
|
||||
:disabled="readonly"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 区域编码 -->
|
||||
<el-col :span="!showStocks ? 24 : 8">
|
||||
<el-form-item v-if="isFromAreaPage" :label="$t('module.basicData.cache.AreaCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="
|
||||
isFromAreaPage
|
||||
? $i18nForm(['placeholder.input', $t('module.basicData.cache.AreaCode')])
|
||||
: $i18nForm(['placeholder.input', $t('module.basicData.cache.CacheCode')])
|
||||
"
|
||||
:disabled="readonly"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 缓存区id -->
|
||||
<el-col :span="!showStocks ? 24 : 8">
|
||||
<el-form-item v-if="isFromAreaPage" :label="$t('module.basicData.cache.CacheName')" prop="cacheId">
|
||||
<el-select
|
||||
v-model="dataForm.cacheId"
|
||||
filterable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.CacheName')])"
|
||||
clearable
|
||||
:disabled="readonly"
|
||||
>
|
||||
<el-option v-for="item in cacheArr" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template v-if="showStocks">
|
||||
<!-- 分隔标题: 基础资料/库位详情 -->
|
||||
<small-title :size="'sm'">
|
||||
{{ 'routerTitle.basicData.ports.locationDetails' | i18nFilter }}
|
||||
</small-title>
|
||||
|
||||
<el-row v-if="isFromAreaPage && !readonly">
|
||||
<!-- 不是从'缓存区页面'弹出的此页面就允许展示'新建库位'按钮 -->
|
||||
<div v-if="displayCreateStockButton">
|
||||
<button
|
||||
style="cursor: pointer; margin-top: 8px; color: #0b58ff; border:none; outline:none; background: none;"
|
||||
@click.prevent="displayCreateStockForm"
|
||||
>
|
||||
{{ 'btn.add' | i18nFilter }}{{ 'routerTitle.basicData.ports.locationAdd' | i18nFilter }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<el-form
|
||||
ref="stockForm"
|
||||
style="padding: 24px 0; text-align: center"
|
||||
:model="stockForm"
|
||||
label-width="80px"
|
||||
:rules="stockFormValidationRules"
|
||||
label-position="left"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.cache.AreaName')" prop="areaId">
|
||||
<!-- <el-input v-model="stockForm.areaId" disabled clearable /> -->
|
||||
<el-input v-model="dataForm.name" disabled clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.cache.LocationCode')" prop="code">
|
||||
<el-input v-model="stockForm.code" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.cache.LocationName')" prop="name">
|
||||
<el-input v-model="stockForm.name" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.cache.LocationAlias')" prop="anotherName">
|
||||
<el-input v-model="stockForm.anotherName" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.cache.EnglishName')" prop="enName">
|
||||
<el-input v-model="stockForm.enName" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.cache.Notes')" prop="remark">
|
||||
<el-input v-model="stockForm.remark" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="display: flex; justify-content: flex-end;">
|
||||
<el-button @click="displayCreateStockButton = true">
|
||||
{{ 'btn.cancel' | i18nFilter }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="stockCreateOrEditController">
|
||||
{{ 'btn.confirm' | i18nFilter }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<template v-if="hasStocks">
|
||||
<el-row>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-data="stocks"
|
||||
:table-config="tableProps"
|
||||
@emitFun="toggleStockEnabled"
|
||||
>
|
||||
<template v-if="!readonly">
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="stockClickHandler"
|
||||
/>
|
||||
</template>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page-sizes="[3, 5, 10, 20]"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="fetchStocks"
|
||||
/>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div
|
||||
style="color: #c0c0c0; display: inline-block; font-size: 32px; padding: 1em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
|
||||
>
|
||||
暂无库位信息
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </el-dialog> -->
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
detail as areaDetail,
|
||||
update as areaUpdate,
|
||||
add as areaAdd,
|
||||
getCode as areaCode,
|
||||
getLocations as getLocationsOfArea
|
||||
} from '@/api/basicData/Cache/area'
|
||||
import {
|
||||
list as cacheList,
|
||||
detail as cacheDetail,
|
||||
getCode as cacheCode,
|
||||
getLocations as getLocationsOfCache
|
||||
} from '@/api/basicData/Cache/cache'
|
||||
import {
|
||||
getCode as locationCode,
|
||||
add as locationAdd,
|
||||
toggleLocationStatus as locationToggleEnabled,
|
||||
del as locationDelete,
|
||||
update as locationUpdate
|
||||
} from '@/api/basicData/Cache/location'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import i18n from '@/lang'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import statusSwitch from './statusBtn.vue'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
|
||||
// 区域页面库位详情表格配置
|
||||
const areaStockTableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter,
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.cache.LocationName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.cache.LocationCode'),
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
prop: 'anotherName',
|
||||
label: i18n.t('module.basicData.cache.LocationAlias')
|
||||
},
|
||||
{
|
||||
prop: 'enName',
|
||||
label: i18n.t('module.basicData.cache.EnglishName')
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: i18n.t('module.basicData.cache.AreaStatus'),
|
||||
subcomponent: statusSwitch
|
||||
// readonly: true, // 证实可行
|
||||
}
|
||||
]
|
||||
|
||||
// 缓存区页面库位详情表格配置
|
||||
const cacheStockTableProps = [
|
||||
{
|
||||
prop: 'areaName',
|
||||
label: i18n.t('module.basicData.cache.AreaName')
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.cache.LocationName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.cache.LocationCode')
|
||||
},
|
||||
{
|
||||
prop: 'anotherName',
|
||||
label: i18n.t('module.basicData.cache.LocationAlias')
|
||||
},
|
||||
{
|
||||
prop: 'enName',
|
||||
label: i18n.t('module.basicData.cache.EnglishName')
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: i18n.t('module.basicData.cache.AreaStatus'),
|
||||
subcomponent: statusSwitch
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseTable,
|
||||
MethodBtn,
|
||||
Pagination,
|
||||
SmallTitle
|
||||
},
|
||||
props: {
|
||||
cacheId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
readonly: false, // 开启不可编辑状态
|
||||
// 库位信息
|
||||
stockEdit: false,
|
||||
stockForm: {
|
||||
areaId: '',
|
||||
code: '',
|
||||
name: '',
|
||||
anotherName: '',
|
||||
id: '',
|
||||
enName: '',
|
||||
remark: '',
|
||||
cacheId: ''
|
||||
},
|
||||
displayCreateStockButton: true,
|
||||
total: 0,
|
||||
listQuery: {
|
||||
current: 1, // 固定默认请求第1页
|
||||
size: 3 // 固定默认请求3条数据
|
||||
},
|
||||
showStocks: false,
|
||||
listLoading: true,
|
||||
trueWidth: 200,
|
||||
tableBtn,
|
||||
stocks: [],
|
||||
tableProps: null,
|
||||
visible: false,
|
||||
isFromAreaPage: false,
|
||||
// 表单数据
|
||||
dataForm: {
|
||||
// 这是一个'区域'和'缓存区'复用的结构
|
||||
id: 0, // 区域id | 缓存区id
|
||||
cacheId: '', // 显式地保存缓存区id
|
||||
name: '', // 区域/缓存区名称
|
||||
code: '', // 区域/缓存区编码
|
||||
areaNumber: '', // 缓存区里的区域数量
|
||||
enabled: 1 // 区域启停状态，默认为1
|
||||
},
|
||||
cacheArr: [],
|
||||
// 表单验证
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.AreaName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.AreaCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
cacheId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.CacheName')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
stockFormValidationRules: {
|
||||
areaId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.AreaId')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.LocationName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.LocationCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasStocks() {
|
||||
return this.stocks?.length > 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 判断当前是库位的编辑，还是库位的新增
|
||||
stockCreateOrEditController() {
|
||||
if (this.stockEdit) {
|
||||
// 编辑
|
||||
this.submitEditStockForm()
|
||||
} else {
|
||||
// 新增
|
||||
this.submitCreateStockForm()
|
||||
}
|
||||
},
|
||||
|
||||
// 库位的编辑操作
|
||||
stockClickHandler(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
// 删除区域里的一个库位
|
||||
locationDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.fetchStocks()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
// 调取本页的库位编辑页面相关代码
|
||||
this.displayEditStockForm(raw.data)
|
||||
}
|
||||
},
|
||||
|
||||
toggleStockEnabled({ data: vStock }) {
|
||||
locationToggleEnabled(vStock).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.fetchStocks()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
submitEditStockForm() {
|
||||
// 库位编辑 表单提交
|
||||
this.$refs['stockForm'].validate(valid => {
|
||||
if (valid) {
|
||||
locationUpdate(this.stockForm).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.displayCreateStockButton = true
|
||||
this.fetchStocks()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
submitCreateStockForm() {
|
||||
// 库位新增 表单提交
|
||||
this.$refs['stockForm'].validate(valid => {
|
||||
if (valid) {
|
||||
locationAdd(this.stockForm).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.displayCreateStockButton = true
|
||||
this.fetchStocks()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
displayCreateStockForm() {
|
||||
// 展示新增库位表单
|
||||
this.initStockForm()
|
||||
this.stockEdit = false
|
||||
this.displayCreateStockButton = false
|
||||
this.$nextTick(() => {
|
||||
// 清空表单
|
||||
this.$refs['stockForm'].resetFields()
|
||||
// 请求并填充库位code
|
||||
locationCode().then(response => {
|
||||
this.stockForm.code = response.data
|
||||
})
|
||||
// 填充库位的区域ID | 缓存区ID
|
||||
this.stockForm.areaId = this.dataForm.id || null
|
||||
})
|
||||
},
|
||||
|
||||
displayEditStockForm(stockData) {
|
||||
// 点击编辑库位信息时触发
|
||||
this.stockEdit = true
|
||||
this.displayCreateStockButton = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs['stockForm'].resetFields()
|
||||
// 填充当前库位的相关数据
|
||||
this.stockForm.id = stockData.id // 库位id
|
||||
this.stockForm.code = stockData.code
|
||||
this.stockForm.name = stockData.name
|
||||
this.stockForm.anotherName = stockData.anotherName || ''
|
||||
this.stockForm.remark = stockData.remark || ''
|
||||
this.stockForm.enName = stockData.enName || ''
|
||||
this.stockForm.areaId = this.dataForm.id || '' // 库位所属的区域id | 缓存区id
|
||||
})
|
||||
},
|
||||
|
||||
fetchStocks() {
|
||||
if (this.isFromAreaPage) {
|
||||
this.fetchStocksInArea()
|
||||
} else {
|
||||
this.fetchStocksInCache()
|
||||
}
|
||||
},
|
||||
|
||||
fetchStocksInCache() {
|
||||
this.showStocks = true
|
||||
// 获取缓存区库位列表（分页），供'库位详情'时调用
|
||||
getLocationsOfCache({
|
||||
cacheId: this.dataForm.id,
|
||||
...this.listQuery
|
||||
}).then(response => {
|
||||
// 把响应数据放进表格
|
||||
this.stocks = response.data.records || []
|
||||
this.total = response.data.total
|
||||
|
||||
// if (this.total > 0) {
|
||||
// this.showStocks = true
|
||||
// }
|
||||
})
|
||||
},
|
||||
|
||||
fetchStocksInArea() {
|
||||
this.showStocks = true
|
||||
// 获取区域库位列表（分页），供'编辑'时调用
|
||||
getLocationsOfArea({
|
||||
areaId: this.dataForm.id,
|
||||
...this.listQuery
|
||||
}).then(response => {
|
||||
// 把响应数据放进表格
|
||||
this.stocks = response.data.records || []
|
||||
this.total = response.data.total
|
||||
|
||||
// if (this.total > 0) {
|
||||
// this.showStocks = true
|
||||
// }
|
||||
})
|
||||
},
|
||||
|
||||
initStockForm() {
|
||||
// 初始化库位表单
|
||||
this.stockForm = {
|
||||
areaId: null,
|
||||
code: '',
|
||||
name: '',
|
||||
anotherName: '',
|
||||
id: '',
|
||||
enName: '',
|
||||
remark: '',
|
||||
cacheId: null
|
||||
}
|
||||
},
|
||||
|
||||
init(id, entry, readonly) {
|
||||
// id: 区域的id | 缓存区的id
|
||||
// entry: area | cache
|
||||
this.dataForm.id = id || ''
|
||||
this.stocks.splice(0)
|
||||
this.showStocks = false
|
||||
|
||||
// 判断使用什么 tableProps:
|
||||
if (entry === 'area') this.tableProps = areaStockTableProps
|
||||
else if (entry === 'cache') this.tableProps = cacheStockTableProps
|
||||
|
||||
// readonly 代表当前是可编辑状态还是只读状态，默认都是可编辑
|
||||
this.readonly = !!readonly
|
||||
// 如果是 readonly 模式，则需要修改 tableProps
|
||||
if (readonly) {
|
||||
this.tableProps.forEach((obj, index) => {
|
||||
if (obj.prop === 'enabled') {
|
||||
this.$set(obj, 'readonly', this.readonly)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 如果不是 readonly，需要显式的删除 tableProps 里 swtichBtn 子组件的 readonly 属性
|
||||
// 因为 cacheArea-add.vue 这个组件在area页面被复用了2次，不这么做的话，一旦添加readonly
|
||||
// 之后所有的复用都会携带readonly，造成不希望的后果
|
||||
this.tableProps.forEach((obj, index) => {
|
||||
if (obj.prop === 'enabled' && Object.prototype.hasOwnProperty.call(obj, 'readonly')) {
|
||||
this.$delete(obj, 'readonly')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 此文件会被复用，所以需要做通用化处理
|
||||
if (entry === 'area') {
|
||||
// 如果是从区域界面进入此组件,则需要获取缓存区列表
|
||||
// 因为要选择正在编辑的区域属于哪一个缓存区：
|
||||
|
||||
// 1.获取所有缓存区列表
|
||||
this.cacheArr.splice(0, this.cacheArr.length)
|
||||
const params = {
|
||||
current: 1,
|
||||
size: 500
|
||||
}
|
||||
cacheList(params).then(response => {
|
||||
if (response.data.records) {
|
||||
this.cacheArr = response.data.records
|
||||
}
|
||||
})
|
||||
this.isFromAreaPage = true
|
||||
} else if (entry === 'cache') {
|
||||
this.isFromAreaPage = false
|
||||
}
|
||||
|
||||
// 选择接口
|
||||
const fetchDetail = this.isFromAreaPage ? areaDetail : cacheDetail
|
||||
const fetchCode = this.isFromAreaPage ? areaCode : cacheCode
|
||||
|
||||
// 显示弹窗
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
// 如果是编辑，则通过id获取'区域|缓存区'的详情
|
||||
fetchDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
// 检查区域是否有库位，有则展示
|
||||
this.fetchStocks()
|
||||
} else {
|
||||
// 缓存区新增不在这里面完成，所以不需要fetchCode
|
||||
// 为了保持代码风格的统一，写上也无妨，缓存区调用此组件时压根就不会走到此分支
|
||||
|
||||
// 如果是新增，就请求一个'区域编码'来填充表单
|
||||
fetchCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
|
||||
// 新增时，不展示库位信息
|
||||
this.showStocks = false
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
// 如果是从 area 页面来，就提交表单，否则直接关闭即可
|
||||
if (this.isFromAreaPage && !this.readonly) {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = this.dataForm
|
||||
if (this.dataForm.id) {
|
||||
areaUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
areaAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
// 通过返回的区域id，获取对应的库位列表
|
||||
// this.dataForm.id = res.data.id
|
||||
// this.fetchStocks()
|
||||
// this.showStocks = true
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
|
||||
// 弹窗关闭
|
||||
handleClosed() {
|
||||
// this.$emit('handleClosed')
|
||||
// if (this.dataForm.id) {
|
||||
// 如果是编辑
|
||||
this.$emit('refreshDataList')
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-dialog >>> .el-dialog__body {
|
||||
padding: 30px 24px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer {
|
||||
transition: all .3s ease-out;
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
|
||||
.drawer-wider >>> .el-drawer {
|
||||
width: 60% !important;
|
||||
}
|
||||
</style>
|
||||
189
src/views/basicData/Cache/components/location-add.vue
Normal file
189
src/views/basicData/Cache/components/location-add.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:46
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin:10px 50px">
|
||||
<el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<locationAttr-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:shelf-id="listQuery.shelfId"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { locationList, locationDelete } from '@/api/basicData/Cache/location'
|
||||
import locationAttrAdd from './locationAttr-add.vue'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.cache.LocationCode')
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.cache.LocationName')
|
||||
},
|
||||
{
|
||||
prop: 'anotherName',
|
||||
label: i18n.t('module.basicData.cache.anotherName')
|
||||
},
|
||||
{
|
||||
prop: 'place',
|
||||
label: i18n.t('module.basicData.cache.place')
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Location',
|
||||
components: { BaseTable, MethodBtn, locationAttrAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 990,
|
||||
shelfId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.listQuery.shelfId = this.$route.query.id
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
locationDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList(key) {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = key
|
||||
locationList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(shelfId) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(shelfId)
|
||||
})
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
130
src/views/basicData/Cache/components/locationAttr-add.vue
Normal file
130
src/views/basicData/Cache/components/locationAttr-add.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-03-17 16:36:00
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.shelfId ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.cache.LocationName')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.LocationName')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.cache.LocationCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.LocationCode')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.cache.anotherName')" prop="anotherName">
|
||||
<el-input v-model="dataForm.anotherName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.anotherName')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.cache.place')" prop="place">
|
||||
<el-input v-model="dataForm.place" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.place')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.cache.Notes')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.Notes')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { locationDetail, locationUpdate, locationAdd, locationCode } from '@/api/basicData/Cache/location'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
shelfId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
anotherName: '',
|
||||
place: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.LocationName')]), trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.LocationCode')]), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
locationDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
} else {
|
||||
locationCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'name': this.dataForm.name,
|
||||
'code': this.dataForm.code,
|
||||
'anotherName': this.dataForm.anotherName,
|
||||
'place': this.dataForm.place,
|
||||
'remark': this.dataForm.remark,
|
||||
'shelfId': this.shelfId,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
locationUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
locationAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
33
src/views/basicData/Cache/components/locationBtn.vue
Normal file
33
src/views/basicData/Cache/components/locationBtn.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<!--
|
||||
* @Date: 2021-01-07 20:09:37
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-06 13:12:47
|
||||
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<span>
|
||||
<el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.cache.ManageLocation') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitClick() {
|
||||
this.$router.push({
|
||||
name: 'locationAdd',
|
||||
query: {
|
||||
id: this.injectData.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
182
src/views/basicData/Cache/components/shelf-add.vue
Normal file
182
src/views/basicData/Cache/components/shelf-add.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:49
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin:10px 50px">
|
||||
<el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="shelfList"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<shelfAttr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :area-id="listQuery.areaId" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/Cache/shelf'
|
||||
import shelfAttrAdd from './shelfAttr-add.vue'
|
||||
import locationBtn from './locationBtn.vue'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.cache.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.cache.ShelfCode')
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.cache.ShelfName')
|
||||
},
|
||||
{
|
||||
prop: 'shelfNumber',
|
||||
label: i18n.t('module.basicData.cache.StorageQuantity')
|
||||
},
|
||||
{
|
||||
prop: 'location',
|
||||
label: i18n.t('module.basicData.cache.Location'),
|
||||
subcomponent: locationBtn
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Shelf',
|
||||
components: { BaseTable, MethodBtn, shelfAttrAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
shelfList: [],
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 990,
|
||||
areaId: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.listQuery.areaId = this.$route.query.id
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList(key) {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = key
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.shelfList = response.data.records
|
||||
} else {
|
||||
this.shelfList.splice(0, this.shelfList.length)
|
||||
}
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
251
src/views/basicData/Cache/components/shelfAttr-add.vue
Normal file
251
src/views/basicData/Cache/components/shelfAttr-add.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-03-18 10:01:45
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :visible.sync="visible" :title="isedit ? 'btn.edit' : 'btn.add' | i18nFilter">
|
||||
<!-- <span slot="title">
|
||||
<small-title>
|
||||
{{ isedit ? 'btn.edit' : 'btn.add' | i18nFilter }}
|
||||
</small-title>
|
||||
</span> -->
|
||||
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="100px"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<el-form-item :label="$t('module.basicData.cache.ShelfType')" prop="dicDataId">
|
||||
<el-select
|
||||
v-model="dataForm.dicDataId"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ShelfType')])"
|
||||
clearable
|
||||
class="lb-el-select"
|
||||
>
|
||||
<el-option v-for="item in dataTypes" :key="item.dataCode" :label="item.dataName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('module.basicData.cache.ShelfName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ShelfName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('module.basicData.cache.ShelfCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ShelfCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('module.basicData.cache.ShelfAnotherCode')" prop="anotherCode">
|
||||
<el-input
|
||||
v-model="dataForm.anotherCode"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ShelfAnotherCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('module.basicData.cache.ShelfAvailable')" prop="available">
|
||||
<!-- 是否可用 -->
|
||||
<el-switch v-model="shelfIsAvailable" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('module.basicData.cache.Notes')" prop="remark">
|
||||
<!-- 备注 -->
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.Notes')])"
|
||||
clearable
|
||||
@change="forceUpdate"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode, getAreaList, getDictListByType } from '@/api/basicData/Cache/shelf'
|
||||
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
export default {
|
||||
// components: { SmallTitle },
|
||||
props: {
|
||||
areaId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusChanged: false, // 启停状态是否变更
|
||||
visible: false,
|
||||
isPage: false,
|
||||
dataTypes: [], // 所有类型
|
||||
dataForm: {
|
||||
//
|
||||
id: 0,
|
||||
dicDataId: '', // 选择的类型
|
||||
name: '',
|
||||
code: '',
|
||||
anotherCode: '',
|
||||
enabled: 0,
|
||||
remark: '' // 后续可能要添加更多字段
|
||||
},
|
||||
areaArr: [],
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.ShelfName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.ShelfCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dicDataId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.ShelfType')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
anotherCode: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.cache.ShelfAnotherCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shelfIsAvailable: {
|
||||
get() {
|
||||
return !!this.dataForm.enabled
|
||||
},
|
||||
set(val) {
|
||||
// 此处仅通过更新内部的dataForm.enabled从而触发DOM视觉上的更新
|
||||
// 并记录状态是否改变，但并不负责将更新同步至服务器
|
||||
this.dataForm.enabled = val ? 1 : 0
|
||||
this.statusChanged = true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
forceUpdate() {
|
||||
// 为了解决输入框无法输入的问题
|
||||
this.$forceUpdate()
|
||||
},
|
||||
init(id, isPage) {
|
||||
this.isedit = !!id || false
|
||||
this.statusChanged = false
|
||||
this.isPage = isPage || false
|
||||
this.dataForm.id = id || ''
|
||||
if (!this.isPage) {
|
||||
this.dataForm.areaId = this.areaId
|
||||
}
|
||||
this.areaArr.splice(0, this.areaArr.length)
|
||||
const params = {
|
||||
current: 1,
|
||||
size: 500
|
||||
}
|
||||
getAreaList(params).then(response => {
|
||||
if (response.data.records) {
|
||||
this.areaArr = response.data.records
|
||||
}
|
||||
})
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
|
||||
// 通过货架的类型ID，获取货架类型的字典列表
|
||||
const HJTypeId = '1393401964580093950'
|
||||
getDictListByType({
|
||||
dictTypeId: HJTypeId,
|
||||
current: 1,
|
||||
size: 100 // 默认请求100条
|
||||
}).then(res => {
|
||||
this.dataTypes = res.data.records
|
||||
})
|
||||
|
||||
if (this.dataForm.id) {
|
||||
// 如果当前是编辑，则获取对应的货架信息
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
} else {
|
||||
// 如果当前是新增，则获取货架代码
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
// 默认为可用
|
||||
this.shelfIsAvailable = true
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = this.dataForm
|
||||
if (this.dataForm.id) {
|
||||
update(data).then(res => {
|
||||
// 更新货架信息，并将'可用状态'的更新emit到父级
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
add(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.lb-el-select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
33
src/views/basicData/Cache/components/shelfBtn.vue
Normal file
33
src/views/basicData/Cache/components/shelfBtn.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<!--
|
||||
* @Date: 2021-01-07 20:09:37
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-06 13:03:40
|
||||
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\CheckDetail.vue
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<span>
|
||||
<el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.cache.ManageShelves') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitClick() {
|
||||
this.$router.push({
|
||||
name: 'shelfAdd',
|
||||
query: {
|
||||
id: this.injectData.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
src/views/basicData/Cache/components/simple-table.vue
Normal file
104
src/views/basicData/Cache/components/simple-table.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
class="table"
|
||||
:header-cell-style="headerStyle"
|
||||
:row-class-name="setRowClass"
|
||||
@cell-mouse-enter="showTooltip"
|
||||
@cell-mouse-leave="hideTooltip"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column prop="_index" label="序号" width="55" align="center" />
|
||||
<el-table-column prop="code" label="库位编码" width="180" align="center" />
|
||||
<el-table-column prop="name" label="库位名称">
|
||||
<template slot-scope="scope">
|
||||
<el-tooltip
|
||||
v-model="scope.row.showTooltip"
|
||||
:disabled="!scope.row.showTooltip"
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="scope.row.canSelect ? '点击选择' : '不可选择'"
|
||||
placement="right"
|
||||
>
|
||||
<span>
|
||||
{{ scope.row.name }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库位状态" width="90" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div slot="content" style="display: flex; justify-content: center; align-items: center;">
|
||||
<span class="enabled-icon" :class="{ 'enabled-icon-disabled': scope.row.canSelect !== true }" />
|
||||
<span>
|
||||
{{ scope.row.canSelect ? '可使用' : '已占用' }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headerStyle: {
|
||||
// backgroundColor: '#ebebeb'
|
||||
// backgroundColor: '#e9e9e9'
|
||||
backgroundColor: '#fafafa',
|
||||
color: '#000',
|
||||
fontFamily: '微软雅黑',
|
||||
fontWeight: 600
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTooltip(row) {
|
||||
row.showTooltip = true
|
||||
},
|
||||
hideTooltip(row) {
|
||||
row.showTooltip = false
|
||||
},
|
||||
setRowClass({ row, rowIndex }) {
|
||||
if (!row.canSelect) {
|
||||
return 'row-disabled'
|
||||
}
|
||||
},
|
||||
handleRowClick(row, column, event) {
|
||||
if (row.canSelect) {
|
||||
// console.log('点击了: ', { id: row.id, name: row.name })
|
||||
this.$emit('stock-selected', { id: row.id, name: row.name })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.test {
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.enabled-icon {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #10dc76;
|
||||
}
|
||||
|
||||
.enabled-icon-disabled {
|
||||
background-color: #a8a8a8;
|
||||
}
|
||||
|
||||
.table >>> .row-disabled {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
</style>
|
||||
77
src/views/basicData/Cache/components/statusBtn.vue
Normal file
77
src/views/basicData/Cache/components/statusBtn.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-3-8 10:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-3-8 10:00:00
|
||||
* @Description: 启停某个区域的状态
|
||||
-->
|
||||
<template>
|
||||
<el-switch v-model="state" type="text" size="small" :disabled="readonly" @change="changeHandler" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
state: false,
|
||||
payload: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readonly() {
|
||||
return !!this.injectData.readonly
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mapToState()
|
||||
},
|
||||
// watch: {
|
||||
// "injectData.enabled": {
|
||||
// handler: function (val) {
|
||||
// this.state = !!this.injectData.enabled;
|
||||
// },
|
||||
// deep: true,
|
||||
// },
|
||||
// "injectData.currentStatus": {
|
||||
// handler: function (val) {
|
||||
// this.state = !!(this.injectData.currentStatus === 'true');
|
||||
// },
|
||||
// deep: true,
|
||||
// },
|
||||
// },
|
||||
methods: {
|
||||
mapToState() {
|
||||
if (this.injectData.prop === 'currentStatus') {
|
||||
this.state = !!(this.injectData[this.injectData.prop].toString().trim() === 'true')
|
||||
return
|
||||
} else {
|
||||
// enabled
|
||||
this.state = !!this.injectData['enabled']
|
||||
return
|
||||
}
|
||||
},
|
||||
|
||||
changeHandler() {
|
||||
if (this.injectData.prop === 'enabled') {
|
||||
// 启停区域/缓存区
|
||||
this.payload.id = this.injectData.id
|
||||
this.payload.enabled = this.state ? 1 : 0
|
||||
} else {
|
||||
// 启停其他实体-该else分支后期可能会被删除
|
||||
this.payload.id = this.injectData.id
|
||||
this.payload.code = this.injectData.code
|
||||
this.payload.name = this.injectData.name
|
||||
this.payload.currentStatus = this.state
|
||||
}
|
||||
|
||||
this.$emit('emitData', { action: 'toggleEnabled', data: this.payload })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
164
src/views/basicData/Cache/components/stock-dialog.vue
Normal file
164
src/views/basicData/Cache/components/stock-dialog.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-23 15:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-05-16 09:33:37
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:append-to-body="true"
|
||||
class="dialog"
|
||||
custom-class="custom-dialog"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<!-- :title="!isEdit ? 'btn.add' : 'btn.edit' | i18nFilter" -->
|
||||
<div slot="title" class="dialog-title">
|
||||
库位选择
|
||||
</div>
|
||||
|
||||
<div class="dialog-body">
|
||||
<div v-if="stockList.length === 0" style="text-align: center">该区域没有库位信息</div>
|
||||
<div v-else>
|
||||
<!-- 三张表格 -->
|
||||
<triple-table :stock-list="stockList" :entires="30" @stock-selected="handleStockSelect" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<el-checkbox v-show="false" v-model="onlyAvailable">仅看可用</el-checkbox>
|
||||
<!-- 分页器 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
:layout="'prev, pager, next, jumper'"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination'
|
||||
import { getAvailableStocks } from '@/api/basicData/Cache/storage'
|
||||
import TripleTable from './triple-table.vue'
|
||||
|
||||
export default {
|
||||
components: { TripleTable, Pagination },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
visible: false,
|
||||
stockList: [],
|
||||
onlyAvailable: false,
|
||||
total: 0,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 30
|
||||
},
|
||||
baseinfo: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initListQuery() {
|
||||
this.listQuery = {
|
||||
current: 1,
|
||||
size: 30 // 固定30条
|
||||
}
|
||||
},
|
||||
// 初始化弹窗
|
||||
init(data) {
|
||||
this.initListQuery()
|
||||
this.stockList.splice(0)
|
||||
// 保存下数据
|
||||
this.baseinfo = data
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
// 显示对话框
|
||||
this.visible = true
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
getAvailableStocks({ ...this.baseinfo, ...this.listQuery }).then(res => {
|
||||
if (res.data.records) {
|
||||
this.stockList = res.data.records
|
||||
} else {
|
||||
this.stockList.splice(0)
|
||||
}
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
// 处理选中事件
|
||||
handleStockSelect(data) {
|
||||
this.$emit('stock-selected', data)
|
||||
this.visible = false
|
||||
},
|
||||
// 弹窗关闭
|
||||
handleClosed() {
|
||||
this.$emit('handleClosed')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 设置宽度自适应 */
|
||||
.dialog >>> .custom-dialog {
|
||||
display: inline-block;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 50%;
|
||||
max-width: 85vw;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.dialog >>> .el-dialog__body {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
padding: 8px;
|
||||
font-size: 20px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dialog-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
background: #0b58ff;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
/* 开启仅看可用功能时，需要使用： */
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dialog >>> .pagination-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dialog-footer >>> .el-pagination__jump {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.dialog-footer >>> .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #0b58ff;
|
||||
border-color: #0b58ff;
|
||||
}
|
||||
|
||||
.dialog-footer >>> .el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #0b58ff;
|
||||
}
|
||||
</style>
|
||||
65
src/views/basicData/Cache/components/stockPickerDialog.vue
Normal file
65
src/views/basicData/Cache/components/stockPickerDialog.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-05-12 16:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-05-12 16:00:00
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
v-loading.fullscreen.lock="loading"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-background="rgba(255, 255, 255, 0.1)"
|
||||
:title="!isEdit ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<!-- 填充内容，库位列表 -->
|
||||
|
||||
<!-- 双击事件 @emit 库位信息 -->
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="initStorageForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getStockList } from '@/api/basicData/Cache/storage'
|
||||
|
||||
/** 请求参数配置 - 后续或许会需要更改 */
|
||||
// const stockListQueryParams = {
|
||||
// current: 1,
|
||||
// size: 100
|
||||
// }
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
visible: false,
|
||||
stockList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化弹窗
|
||||
init() {
|
||||
// 显示对话框
|
||||
this.visible = true
|
||||
this.$nextTick(() => {})
|
||||
},
|
||||
pickStock(data) {
|
||||
// 把所选的库位传到外面
|
||||
// data.id
|
||||
// data.name
|
||||
this.$emit('stockPicked', data)
|
||||
},
|
||||
// 弹窗关闭
|
||||
handleClosed() {
|
||||
this.$emit('handleClosed')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
396
src/views/basicData/Cache/components/storage-dialog-bak.vue
Normal file
396
src/views/basicData/Cache/components/storage-dialog-bak.vue
Normal file
@@ -0,0 +1,396 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-23 15:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-03-28 8:30:00
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
v-loading.fullscreen.lock="loading"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-background="rgba(255, 255, 255, 0.1)"
|
||||
:title="!isEdit ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
@closed="handleClosed"
|
||||
>
|
||||
<div style="text-align: center">
|
||||
<el-form
|
||||
ref="storageForm"
|
||||
:inline="true"
|
||||
:model="storageForm"
|
||||
:rules="storageValidationRules"
|
||||
label-width="100px"
|
||||
@keyup.enter.native="submit"
|
||||
>
|
||||
<!-- 方式 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.OperateType')" prop="operateType">
|
||||
<el-select
|
||||
v-model="storageForm.operateType"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.OperateType')])"
|
||||
clearable
|
||||
style="width:247px"
|
||||
>
|
||||
<el-option :label="$t('module.basicData.cache.Export')" :value="1" />
|
||||
<el-option :label="$t('module.basicData.cache.Import')" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 货架编码 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.ShelfCode')" prop="shelfId">
|
||||
<el-select
|
||||
v-model="storageForm.shelfId"
|
||||
filterable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ShelfCode')])"
|
||||
clearable
|
||||
style="width:247px"
|
||||
>
|
||||
<el-option v-for="sCode in shelfList" :key="sCode.id" :label="sCode.code" :value="sCode.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 缓存区 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.CacheNameAbbr')" prop="cacheId">
|
||||
<el-select
|
||||
v-model="storageForm.cacheId"
|
||||
clearable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.CacheNameAbbr')])"
|
||||
style="width:247px"
|
||||
>
|
||||
<el-option v-for="item in cacheList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 区域 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.AreaAbbr')" prop="areaId">
|
||||
<el-select
|
||||
v-model="storageForm.areaId"
|
||||
filterable
|
||||
clearable
|
||||
:disabled="!storageForm.cacheId"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.AreaAbbr')])"
|
||||
style="width:247px"
|
||||
>
|
||||
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 库位 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.StorageLocation')" prop="stockId">
|
||||
<!-- <el-select
|
||||
v-model="storageForm.stockId"
|
||||
clearable
|
||||
:disabled="!storageForm.areaId"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.StorageLocation')])"
|
||||
style="width:247px"
|
||||
>
|
||||
<el-option v-for="item in stockList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select> -->
|
||||
|
||||
<!-- 不用采用下拉框的形式了 -->
|
||||
<el-button type="text" @click="openStockDialog">查看库位</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 产品，物料名 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.ProductAndMaterialName')" prop="semifinishedProductId">
|
||||
<el-select
|
||||
v-model="storageForm.semifinishedProductId"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ProductAndMaterialName')])"
|
||||
style="width:247px"
|
||||
@change="$forceUpdate()"
|
||||
>
|
||||
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 产品规格 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.ProductSpecs')">
|
||||
<el-input
|
||||
v-model="productSpecifications"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ProductSpecs')])"
|
||||
style="width:247px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 数量 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.Quantity')" prop="num">
|
||||
<el-input-number
|
||||
v-model.number="storageForm.num"
|
||||
style="width:247px"
|
||||
type="number"
|
||||
:min="1"
|
||||
:step="1"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.Quantity')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="initStorageForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Vue from 'vue'
|
||||
import {
|
||||
getShelfList,
|
||||
getCacheList,
|
||||
getAreaList,
|
||||
getStockList,
|
||||
getProductsList,
|
||||
detail,
|
||||
update,
|
||||
add
|
||||
} from '@/api/basicData/Cache/storage'
|
||||
|
||||
/** 请求参数配置 - 后续或许会需要更改 */
|
||||
const shelfListQueryParams = {
|
||||
current: 1,
|
||||
size: 100
|
||||
}
|
||||
const cacheListQueryParams = shelfListQueryParams
|
||||
const areaListQueryParams = shelfListQueryParams
|
||||
const stockListQueryParams = shelfListQueryParams
|
||||
const productsListQueryParams = shelfListQueryParams
|
||||
|
||||
const storageValidationRules = {
|
||||
operateType: {
|
||||
required: true,
|
||||
type: 'enum',
|
||||
enum: [1, 2],
|
||||
// message: () => this.$t('')
|
||||
message: '出入库为必选项',
|
||||
trigger: 'change'
|
||||
},
|
||||
cacheId: { required: true, message: '缓存区必填', trigger: 'change' },
|
||||
areaId: { required: true, message: '区域必填', trigger: 'change' },
|
||||
stockId: { required: true, message: '库位必填', trigger: 'change' },
|
||||
shelfId: { required: true, message: '货架必填', trigger: 'change' },
|
||||
semifinishedProductId: { required: true, message: '产品必填', trigger: 'change' },
|
||||
num: { required: true, message: '数量大于1', trigger: 'blur' }
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
storageValidationRules,
|
||||
isEdit: false,
|
||||
visible: false,
|
||||
storageForm: {
|
||||
// 出入库的表单
|
||||
id: null,
|
||||
operateType: 1, // 默认1出库，2入库
|
||||
stockId: '', // 库位id
|
||||
shelfId: '', // 货架id
|
||||
semifinishedProductId: '', // 产品id
|
||||
source: 0, // 来源
|
||||
num: 0, // 数量
|
||||
remark: '', // 备注始终为空，后端没实现该字段
|
||||
cacheId: '',
|
||||
areaId: ''
|
||||
},
|
||||
temporaryForm: {},
|
||||
productSpecifications: null,
|
||||
productList: [],
|
||||
cacheList: [],
|
||||
areaList: [],
|
||||
stockList: [],
|
||||
shelfList: [],
|
||||
allowWatch: false,
|
||||
finishedRequest: 0 // 编辑页面中，异步完成的请求数
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
finishedRequest(val) {
|
||||
// 监听异步请求完成数量，如果完成了 5 个，代表所有请求都已完成
|
||||
if (val === 5) {
|
||||
this.$emit('allListLoaded') // 在 created() 中监听此事件
|
||||
}
|
||||
},
|
||||
'storageForm.cacheId': function(val, oldVal) {
|
||||
// 只在新增模式下观察
|
||||
if ((!this.isEdit || this.allowWatch) && val && val !== oldVal) {
|
||||
this.loading = true
|
||||
getAreaList({
|
||||
...areaListQueryParams,
|
||||
cacheId: val
|
||||
}).then(response => {
|
||||
this.areaList.splice(0, this.areaList.length)
|
||||
this.storageForm.areaId = null
|
||||
if (response.data.records) {
|
||||
this.areaList = response.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
'storageForm.areaId': function(val, oldVal) {
|
||||
// 只在新增模式下观察
|
||||
if ((!this.isEdit || this.allowWatch) && val && val !== oldVal) {
|
||||
// 请求 stockList
|
||||
this.loading = true
|
||||
// ==> 这里可能需要修改了，需将 areaId/cacheId 传入新的库位列表弹窗
|
||||
getStockList({
|
||||
...stockListQueryParams,
|
||||
areaId: val
|
||||
}).then(response => {
|
||||
this.storageForm.stockId = null
|
||||
this.stockList.splice(0, this.stockList.length)
|
||||
if (response.data.records) {
|
||||
this.stockList = response.data.records
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
'storageForm.semifinishedProductId': {
|
||||
handler: function(val, oldVal) {
|
||||
if (val && val !== oldVal) {
|
||||
// 获得规格描述，直接从本地 productList 里筛选出来
|
||||
const chosenProduct = this.productList.find(obj => obj.id === val)
|
||||
this.productSpecifications = chosenProduct.specifications || ''
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$on('allListLoaded', this.fillTheEditForm)
|
||||
this.$on('oneRequestComplete', () => {
|
||||
this.finishedRequest += 1
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
openStockDialog(data) {
|
||||
// 打开库位列表
|
||||
// data 包含缓存区和区域相关信息，用于定位库位列表
|
||||
},
|
||||
handleStockPicked(data) {
|
||||
// 处理选择库位的事件
|
||||
// data 应该包含所选的库位信息，或要能定位库位
|
||||
},
|
||||
// 填充编辑表单
|
||||
fillTheEditForm() {
|
||||
this.storageForm = this.temporaryForm
|
||||
this.$set(this.storageForm, 'semifinishedProductId', this.temporaryForm.productId)
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.allowWatch = true
|
||||
})
|
||||
},
|
||||
// 初始化出入库表单
|
||||
initStorageForm() {
|
||||
this.storageForm.id = null
|
||||
this.storageForm.operateType = 1
|
||||
this.storageForm.stockId = null
|
||||
this.storageForm.shelfId = null
|
||||
this.storageForm.semifinishedProductId = null
|
||||
this.storageForm.source = 0 // 一直默认：0，手动
|
||||
this.storageForm.num = 1 // 不能为负数和0，需要在验证器里添加验证
|
||||
this.storageForm.remark = ''
|
||||
this.storageForm.cacheId = null
|
||||
this.storageForm.areaId = null
|
||||
this.productSpecifications = ''
|
||||
},
|
||||
// 初始化弹窗
|
||||
init(storageId) {
|
||||
// 显示对话框
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
if (storageId) {
|
||||
this.loading = true
|
||||
this.isEdit = true
|
||||
// 默认关闭 watch 功能
|
||||
this.allowWatch = false
|
||||
// 如果是编辑
|
||||
detail(storageId).then(response => {
|
||||
// 把后端数据存入一个临时的表单对象里
|
||||
// 等万事俱备时再将这个临时表单的内容填入 storageForm 展现到页面上
|
||||
this.temporaryForm = response.data
|
||||
|
||||
// 异步请求
|
||||
// shelf数据，cache数据，area数据
|
||||
// stock数据，product数据
|
||||
getShelfList({ ...shelfListQueryParams, enabled: 1 }).then(r => {
|
||||
this.shelfList.splice(0, this.shelfList.length)
|
||||
if (r.data.records) this.shelfList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
getCacheList({ ...cacheListQueryParams }).then(r => {
|
||||
this.cacheList.splice(0, this.cacheList.length)
|
||||
if (r.data.records) this.cacheList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
getAreaList({ ...areaListQueryParams, cacheId: this.temporaryForm.cacheId }).then(r => {
|
||||
this.areaList.splice(0, this.areaList.length)
|
||||
if (r.data.records) this.areaList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
getStockList({ ...stockListQueryParams, areaId: this.temporaryForm.areaId }).then(r => {
|
||||
this.stockList.splice(0, this.stockList.length)
|
||||
if (r.data.records) this.stockList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
getProductsList({ ...productsListQueryParams, enabled: 1 }).then(r => {
|
||||
this.productList.splice(0, this.productList.length)
|
||||
if (r.data.records) this.productList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.isEdit = false
|
||||
// 新增时，只用获取下面这些列表即可:
|
||||
// 拉取货架列表
|
||||
getShelfList({ ...shelfListQueryParams, enabled: 1 }).then(response => {
|
||||
this.shelfList.splice(0, this.shelfList.length)
|
||||
if (response.data.records) this.shelfList = response.data.records
|
||||
})
|
||||
// 拉取缓存区列表
|
||||
getCacheList(cacheListQueryParams).then(response => {
|
||||
this.cacheList.splice(0, this.cacheList.length)
|
||||
if (response.data.records) this.cacheList = response.data.records
|
||||
})
|
||||
// 拉取产品列表
|
||||
getProductsList({ ...productsListQueryParams, enabled: 1 }).then(response => {
|
||||
this.productList.splice(0, this.productList.length)
|
||||
if (response.data.records) this.productList = response.data.records
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 提交出入库表单
|
||||
submit() {
|
||||
this.$refs['storageForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.isEdit ? update : add
|
||||
ajaxAction(this.storageForm).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 弹窗关闭
|
||||
handleClosed() {
|
||||
this.$emit('handleClosed')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
601
src/views/basicData/Cache/components/storage-drawer.vue
Normal file
601
src/views/basicData/Cache/components/storage-drawer.vue
Normal file
@@ -0,0 +1,601 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-05-16 09:33:37
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-05-16 09:33:37
|
||||
* @specifications: 出入库编辑-抽屉结构
|
||||
-->
|
||||
<template>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer">
|
||||
<div slot="title" class="drawer-title">
|
||||
<!-- {{ isdetail ? 'btn.detail' : !storageForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }} -->
|
||||
出入库填写
|
||||
</div>
|
||||
|
||||
<div style="margin:0 64px">
|
||||
<el-form
|
||||
ref="storageForm"
|
||||
:model="storageForm"
|
||||
:rules="dataRule"
|
||||
label-width="100px"
|
||||
label-position="top"
|
||||
@keyup.enter.native="dataFormSubmit"
|
||||
>
|
||||
<el-row :gutter="50">
|
||||
<!-- 第一列 -->
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<!-- 方式 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.OperateType')" prop="operateType">
|
||||
<el-select
|
||||
v-model="storageForm.operateType"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.OperateType')])"
|
||||
clearable
|
||||
>
|
||||
<el-option :label="$t('module.basicData.cache.Export')" :value="1" />
|
||||
<el-option :label="$t('module.basicData.cache.Import')" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 缓存区 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.CacheNameAbbr')" prop="cacheId">
|
||||
<el-select
|
||||
v-model="storageForm.cacheId"
|
||||
clearable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.CacheNameAbbr')])"
|
||||
>
|
||||
<el-option v-for="item in cacheList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 库位 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.StorageLocation')" prop="stockId">
|
||||
<div class="el-form-item__content">
|
||||
<button
|
||||
class="stock-btn"
|
||||
:class="{ 'stock-disabled': !storageForm.areaId, 'stock-enabled': storageForm.areaId }"
|
||||
@click.prevent.stop="openStockDialog"
|
||||
>
|
||||
<span class="stock-btn__text">
|
||||
{{ selectedStock ? selectedStock : $i18nForm(['placeholder.input', $t('module.basicData.cache.Location')]) }}
|
||||
</span>
|
||||
<span class="stock-btn__icon">
|
||||
<svg
|
||||
width="65%"
|
||||
height="65%"
|
||||
viewBox="0 0 14 14"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>弹窗</title>
|
||||
<g id="仓库管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="出入库操作_新增" transform="translate(-1641.000000, -374.000000)">
|
||||
<g id="编组-19" transform="translate(1448.000000, 0.000000)">
|
||||
<g id="编组-15" transform="translate(56.000000, 341.000000)">
|
||||
<g id="单独-32-备份" transform="translate(0.000000, 24.000000)">
|
||||
<g id="编组" transform="translate(136.000000, 8.000000)">
|
||||
<rect
|
||||
id="矩形"
|
||||
fill="#000000"
|
||||
fill-rule="nonzero"
|
||||
opacity="0"
|
||||
x="0"
|
||||
y="0"
|
||||
width="16"
|
||||
height="16"
|
||||
/>
|
||||
<g id="工单下发备份" fill-rule="nonzero">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16" />
|
||||
<path
|
||||
id="形状结合"
|
||||
d="M13.0438556,1.20937158 C13.2588773,1.20937158 13.4620313,1.26372912 13.6397417,1.35989534 C13.8001729,1.44729129 13.9368068,1.56547787 14.0439848,1.70683585 C14.0574819,1.72469691 14.0704621,1.74280568 14.0829665,1.76127119 C14.1201606,1.81644256 14.1513042,1.8710832 14.1782718,1.92803778 C14.2030362,1.98070901 14.2242847,2.03507227 14.2417389,2.09118375 L14.2730699,2.21241367 C14.2896612,2.29375583 14.2983584,2.37786569 14.2983584,2.4638744 L14.2983584,2.4638744 L14.2983584,13.5359655 L14.2918811,13.6642242 C14.2276335,14.296785 13.6933564,14.7904683 13.0438556,14.7904683 L13.0438556,14.7904683 L8.07874437,14.7904683 L7.99964162,14.7833716 L7.92125563,14.7904683 L2.95614444,14.7904683 C2.30664357,14.7904683 1.77236646,14.296785 1.70811893,13.6642242 L1.70164162,13.5359655 L1.70164162,2.4638744 C1.70164162,2.20584828 1.77991647,1.96491181 1.91478176,1.76452387 C1.9676768,1.68648532 2.02612316,1.61755083 2.09115852,1.55558994 C2.1703925,1.48009344 2.25985438,1.41462726 2.35729285,1.36160585 C2.53796872,1.26372912 2.74112267,1.20937158 2.95614444,1.20937158 L2.95614444,1.20937158 L13.0438556,1.20937158 Z M7.99964162,5.63437158 L2.76364162,5.65837158 L2.76524387,13.4758909 C2.76524387,13.5948261 2.84779995,13.6943729 2.95876835,13.7203876 L3.01636958,13.7270166 L7.93119278,13.7270166 L7.99964162,13.7313716 L8.06880722,13.7270166 L12.9836304,13.7270166 L13.0412317,13.7203876 C13.1522001,13.6943729 13.2347561,13.5948261 13.2347561,13.4758909 L13.2347561,13.4758909 L13.2356416,5.65837158 L7.99964162,5.63437158 Z M13.0438556,2.27297383 L2.95614444,2.27297383 C2.93161206,2.27297383 2.90797392,2.27768001 2.88621631,2.28615171 C2.81562722,2.31403543 2.76524387,2.38323471 2.76524387,2.4638744 L2.76524387,2.4638744 L2.76464162,4.59837158 L7.99964162,4.62337158 L13.2346416,4.59837158 L13.2347561,2.4638744 L13.2266826,2.4089277 C13.2030025,2.33040279 13.1299491,2.27297383 13.0438556,2.27297383 Z"
|
||||
:fill="!storageForm.areaId ? '#BFBFBF' : '#115CFF'"
|
||||
/>
|
||||
</g>
|
||||
<rect
|
||||
id="矩形"
|
||||
stroke="#979797"
|
||||
fill="#D8D8D8"
|
||||
opacity="0"
|
||||
x="0.5"
|
||||
y="0.5"
|
||||
width="15"
|
||||
height="15"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 产品规格 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.ProductSpecs')">
|
||||
<el-input
|
||||
v-model="productSpecifications"
|
||||
disabled
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ProductSpecs')])"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<!-- 第二列 -->
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<!-- 货架编码 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.ShelfCode')" prop="shelfId">
|
||||
<el-select
|
||||
v-model="storageForm.shelfId"
|
||||
filterable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ShelfCode')])"
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="sCode in shelfList" :key="sCode.id" :label="sCode.code" :value="sCode.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 区域 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.AreaAbbr')" prop="areaId">
|
||||
<el-select
|
||||
v-model="storageForm.areaId"
|
||||
filterable
|
||||
clearable
|
||||
:disabled="!storageForm.cacheId"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.AreaAbbr')])"
|
||||
>
|
||||
<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 产品，物料名 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.ProductAndMaterialName')" prop="semifinishedProductId">
|
||||
<el-select
|
||||
v-model="storageForm.semifinishedProductId"
|
||||
filterable
|
||||
clearable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.ProductAndMaterialName')])"
|
||||
>
|
||||
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 数量 -->
|
||||
<el-form-item :label="$t('module.basicData.cache.Quantity')" prop="num">
|
||||
<el-input
|
||||
v-model="storageForm.num"
|
||||
:min="1"
|
||||
:step="1"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.cache.Quantity')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="goback()">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="submit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
<!-- <el-button @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
|
||||
<span v-if="!isdetail">
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
<el-button v-if="storageForm.id && !isdetail" type="primary" @click="addNew()">
|
||||
{{ 'btn.addattr' | i18nFilter }}
|
||||
</el-button>
|
||||
</span> -->
|
||||
</div>
|
||||
|
||||
<!-- <base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="productAttributeList"
|
||||
>
|
||||
<method-btn v-if="!isdetail" slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
@pagination="getList"
|
||||
/> -->
|
||||
</div>
|
||||
<stock-dialog v-if="addOrUpdateVisible" ref="addOrUpdate" @stock-selected="handleStockChange" />
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import Vue from 'vue'
|
||||
import {
|
||||
getShelfList,
|
||||
getCacheList,
|
||||
getAreaList,
|
||||
// getStockList,
|
||||
getProductsList,
|
||||
detail,
|
||||
update,
|
||||
add
|
||||
} from '@/api/basicData/Cache/storage'
|
||||
|
||||
import StockDialog from './stock-dialog.vue'
|
||||
|
||||
/** 请求参数配置 - 后续或许会需要更改 */
|
||||
const shelfListQueryParams = {
|
||||
current: 1,
|
||||
size: 100
|
||||
}
|
||||
const cacheListQueryParams = shelfListQueryParams
|
||||
const areaListQueryParams = shelfListQueryParams
|
||||
// const stockListQueryParams = shelfListQueryParams
|
||||
const productsListQueryParams = shelfListQueryParams
|
||||
|
||||
const storageValidationRules = {
|
||||
operateType: {
|
||||
required: true,
|
||||
type: 'enum',
|
||||
enum: [1, 2],
|
||||
// message: () => this.$t('')
|
||||
message: '出入库为必选项',
|
||||
trigger: 'change'
|
||||
},
|
||||
cacheId: { required: true, message: '缓存区必填', trigger: 'change' },
|
||||
areaId: { required: true, message: '区域必填', trigger: 'change' },
|
||||
stockId: { required: true, message: '库位必填', trigger: 'change' },
|
||||
shelfId: { required: true, message: '货架必填', trigger: 'change' },
|
||||
semifinishedProductId: { required: true, message: '产品必填', trigger: 'change' },
|
||||
num: { required: true, message: '数量大于1', trigger: 'blur' }
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { StockDialog },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
storageValidationRules,
|
||||
isEdit: false,
|
||||
visible: false,
|
||||
addOrUpdateVisible: false,
|
||||
dataRule: {},
|
||||
selectedStock: '',
|
||||
storageForm: {
|
||||
// 出入库的表单
|
||||
id: null,
|
||||
operateType: 1, // 默认1出库，2入库
|
||||
stockId: '', // 库位id
|
||||
shelfId: '', // 货架id
|
||||
semifinishedProductId: '', // 产品id
|
||||
source: 0, // 来源
|
||||
num: 0, // 数量
|
||||
remark: '', // 备注始终为空，后端没实现该字段
|
||||
cacheId: '',
|
||||
areaId: ''
|
||||
},
|
||||
temporaryForm: {},
|
||||
productSpecifications: null,
|
||||
productList: [],
|
||||
cacheList: [],
|
||||
areaList: [],
|
||||
// stockList: [],
|
||||
shelfList: [],
|
||||
allowWatch: false,
|
||||
finishedRequest: 0 // 编辑页面中，异步完成的请求数
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
finishedRequest(val) {
|
||||
// 监听异步请求完成数量，如果完成了 5 个，代表所有请求都已完成
|
||||
if (val === 4) {
|
||||
this.$emit('allListLoaded') // 在 created() 中监听此事件
|
||||
this.finishedRequest = 0
|
||||
}
|
||||
},
|
||||
'storageForm.cacheId': function(val, oldVal) {
|
||||
// 只在新增模式下观察
|
||||
if ((!this.isEdit || this.allowWatch) && val && val !== oldVal) {
|
||||
this.loading = true
|
||||
getAreaList({
|
||||
...areaListQueryParams,
|
||||
cacheId: val
|
||||
}).then(response => {
|
||||
this.areaList.splice(0, this.areaList.length)
|
||||
this.storageForm.areaId = null
|
||||
if (response.data.records) {
|
||||
this.areaList = response.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
// 'storageForm.areaId': function(val, oldVal) {
|
||||
// // 只在新增模式下观察
|
||||
// if ((!this.isEdit || this.allowWatch) && val && val !== oldVal) {
|
||||
// // 请求 stockList
|
||||
// this.loading = true
|
||||
// // ==> 这里可能需要修改了，需将 areaId/cacheId 传入新的库位列表弹窗
|
||||
// getStockList({
|
||||
// ...stockListQueryParams,
|
||||
// areaId: val
|
||||
// }).then(response => {
|
||||
// this.storageForm.stockId = null
|
||||
// this.stockList.splice(0, this.stockList.length)
|
||||
// if (response.data.records) {
|
||||
// this.stockList = response.data.records
|
||||
// }
|
||||
// this.loading = false
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
'storageForm.semifinishedProductId': {
|
||||
handler: function(val, oldVal) {
|
||||
if (val && val !== oldVal) {
|
||||
// 获得规格描述，直接从本地 productList 里筛选出来
|
||||
const chosenProduct = this.productList.find(obj => obj.id === val)
|
||||
this.productSpecifications = chosenProduct.specifications || ''
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$on('allListLoaded', this.fillTheEditForm)
|
||||
this.$on('oneRequestComplete', () => {
|
||||
this.finishedRequest += 1
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
openStockDialog() {
|
||||
if (this.storageForm.areaId) {
|
||||
// 如果允许选择库位
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init({
|
||||
cacheId: this.storageForm.cacheId,
|
||||
areaId: this.storageForm.areaId,
|
||||
operateType: this.storageForm.operateType
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
// 填充编辑表单
|
||||
fillTheEditForm() {
|
||||
this.storageForm = this.temporaryForm
|
||||
// 填充库位名
|
||||
this.selectedStock = this.temporaryForm.stockName ? this.temporaryForm.stockName : ''
|
||||
this.productSpecifications = this.temporaryForm.specifications ? this.temporaryForm.specifications : ''
|
||||
// console.log('temporaryForm', this.temporaryForm)
|
||||
this.$set(this.storageForm, 'semifinishedProductId', this.temporaryForm.productId)
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.allowWatch = true
|
||||
})
|
||||
},
|
||||
// 初始化出入库表单
|
||||
initStorageForm() {
|
||||
this.storageForm.id = null
|
||||
this.storageForm.operateType = 1
|
||||
this.storageForm.stockId = null
|
||||
this.storageForm.shelfId = null
|
||||
this.storageForm.semifinishedProductId = null
|
||||
this.storageForm.source = 0 // 一直默认：0，手动
|
||||
this.storageForm.num = 1 // 不能为负数和0，需要在验证器里添加验证
|
||||
this.storageForm.remark = ''
|
||||
this.storageForm.cacheId = null
|
||||
this.storageForm.areaId = null
|
||||
this.productSpecifications = ''
|
||||
this.selectedStock = ''
|
||||
},
|
||||
// 初始化弹窗
|
||||
init(storageId) {
|
||||
this.initStorageForm()
|
||||
// 显示对话框
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
if (storageId) {
|
||||
this.loading = true
|
||||
this.isEdit = true
|
||||
// 默认关闭 watch 功能
|
||||
this.allowWatch = false
|
||||
// 如果是编辑
|
||||
detail(storageId).then(response => {
|
||||
// 把后端数据存入一个临时的表单对象里
|
||||
// 等万事俱备时再将这个临时表单的内容填入 storageForm 展现到页面上
|
||||
this.temporaryForm = response.data
|
||||
|
||||
// 异步请求
|
||||
// shelf数据，cache数据，area数据
|
||||
// stock数据，product数据
|
||||
getShelfList({ ...shelfListQueryParams, enabled: 1 }).then(r => {
|
||||
this.shelfList.splice(0)
|
||||
if (r.data.records) this.shelfList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
getCacheList({ ...cacheListQueryParams }).then(r => {
|
||||
this.cacheList.splice(0)
|
||||
if (r.data.records) this.cacheList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
getAreaList({ ...areaListQueryParams, cacheId: this.temporaryForm.cacheId }).then(r => {
|
||||
this.areaList.splice(0)
|
||||
if (r.data.records) this.areaList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
// getStockList({ ...stockListQueryParams, areaId: this.temporaryForm.areaId }).then(r => {
|
||||
// this.stockList.splice(0)
|
||||
// if (r.data.records) this.stockList = r.data.records
|
||||
// this.$emit('oneRequestComplete')
|
||||
// })
|
||||
getProductsList({ ...productsListQueryParams, enabled: 1 }).then(r => {
|
||||
this.productList.splice(0)
|
||||
if (r.data.records) this.productList = r.data.records
|
||||
this.$emit('oneRequestComplete')
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.isEdit = false
|
||||
// 新增时，只用获取下面这些列表即可:
|
||||
// 拉取货架列表
|
||||
getShelfList({ ...shelfListQueryParams, enabled: 1 }).then(response => {
|
||||
this.shelfList.splice(0, this.shelfList.length)
|
||||
if (response.data.records) this.shelfList = response.data.records
|
||||
})
|
||||
// 拉取缓存区列表
|
||||
getCacheList(cacheListQueryParams).then(response => {
|
||||
this.cacheList.splice(0, this.cacheList.length)
|
||||
if (response.data.records) this.cacheList = response.data.records
|
||||
})
|
||||
// 拉取产品列表
|
||||
getProductsList({ ...productsListQueryParams, enabled: 1 }).then(response => {
|
||||
this.productList.splice(0, this.productList.length)
|
||||
if (response.data.records) this.productList = response.data.records
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 选择库位
|
||||
handleStockChange({ id, name }) {
|
||||
this.storageForm.stockId = id
|
||||
this.selectedStock = name
|
||||
},
|
||||
// 提交出入库表单
|
||||
submit() {
|
||||
this.$refs['storageForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.isEdit ? update : add
|
||||
ajaxAction(this.storageForm).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 弹窗关闭
|
||||
handleClosed() {
|
||||
this.$emit('handleClosed')
|
||||
},
|
||||
goback() {
|
||||
this.$emit('refreshDataList')
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* .drawer >>> .el-drawer__body {
|
||||
margin-top: 0;
|
||||
} */
|
||||
|
||||
.drawer-title {
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: #000;
|
||||
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.drawer-title::before {
|
||||
content: '';
|
||||
background: #0b58ff;
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
vertical-align: top;
|
||||
margin-right: 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.stock-btn {
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0 5px 0 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: box-shadow 0.3s ease-out;
|
||||
}
|
||||
/*
|
||||
.stock-btn:not([class*='stock-disabled']):hover {
|
||||
cursor: pointer;
|
||||
border-color: #ccc;
|
||||
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
|
||||
} */
|
||||
|
||||
.stock-btn__text {
|
||||
text-align: left;
|
||||
flex: 1 auto;
|
||||
overflow: hidden;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.stock-btn__icon {
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stock-enabled {
|
||||
/* color: #115cff; */
|
||||
/* background-color: #e9e9e9; */
|
||||
}
|
||||
|
||||
.stock-disabled {
|
||||
color: #ccc;
|
||||
background-color: #f5f7fa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.stock-disabled svg {
|
||||
color: #ccc;
|
||||
background-color: #f5f7fa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
146
src/views/basicData/Cache/components/storageBox-add.vue
Normal file
146
src/views/basicData/Cache/components/storageBox-add.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-07-21 13:59:43
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.storageBox.name')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.name')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.storageBox.code')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.code')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.storageBox.StorageQuantity')" prop="quantity">
|
||||
<el-input-number v-model="dataForm.quantity" :min="0" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.StorageQuantity')])" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.storageBox.alias')" prop="aliasName">
|
||||
<el-input v-model="dataForm.aliasName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.alias')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.storageBox.status')" prop="status">
|
||||
<el-select v-model="dataForm.status" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.storageBox.status')])" clearable>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storageBoxDetail, storageBoxUpdate, storageBoxAdd, storageBoxCode } from '@/api/basicData/Cache/storageBox'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
status: 0,
|
||||
aliasName: '',
|
||||
quantity: 0,
|
||||
remark: ''
|
||||
},
|
||||
options: [
|
||||
{
|
||||
value: 0,
|
||||
label: '正常'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '维修中'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '报废'
|
||||
}
|
||||
],
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.storageBox.name')]),
|
||||
trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.storageBox.code')]),
|
||||
trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
storageBoxDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
} else {
|
||||
storageBoxCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = this.dataForm
|
||||
data.id = this.dataForm.id
|
||||
if (this.dataForm.id) {
|
||||
storageBoxUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
storageBoxAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
135
src/views/basicData/Cache/components/triple-table.vue
Normal file
135
src/views/basicData/Cache/components/triple-table.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<!--
|
||||
[] 仅看可用 功能
|
||||
最大30条数据
|
||||
不足10条，只显示一张表，居中
|
||||
不足20条，只显示2张表，居中
|
||||
多张表之间有竖线分隔
|
||||
每一行hover有颜色加深
|
||||
每一行hover有tips出现
|
||||
每一行点击时：
|
||||
[有颜色效果]
|
||||
关闭弹窗
|
||||
将选中的库位信息传递出去 { id, name }，外面用对象接收，展示用name，发送到后端用id
|
||||
-->
|
||||
<div>
|
||||
<el-row class="tables">
|
||||
<!-- tables -->
|
||||
<el-col :span="entires > 20 ? 8 : entires > 10 ? 12 : 24" class="col-1">
|
||||
<simple-table :table-data="stockTable1" @stock-selected="handleStockSelect" />
|
||||
</el-col>
|
||||
<el-col v-if="entires > 10" :span="entires > 20 ? 8 : 12" class="col-2">
|
||||
<simple-table :table-data="stockTable2" @stock-selected="handleStockSelect" />
|
||||
</el-col>
|
||||
<el-col v-if="entires > 20" :span="8" class="col-3">
|
||||
<simple-table :table-data="stockTable3" @stock-selected="handleStockSelect" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SimpleTable from './simple-table.vue'
|
||||
|
||||
export default {
|
||||
components: { SimpleTable },
|
||||
props: {
|
||||
stockList: { type: Array, default: () => [] },
|
||||
total: { type: Number, default: 0 }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
stockTable1: [],
|
||||
stockTable2: [],
|
||||
stockTable3: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
entires() {
|
||||
return this.stockList.length
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
stockList: function(val) {
|
||||
this.shunt()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.shunt()
|
||||
},
|
||||
methods: {
|
||||
// 30条数据分流
|
||||
shunt() {
|
||||
this.index = 1 // 默认为 1
|
||||
this.stockTable1.splice(0)
|
||||
this.stockTable2.splice(0)
|
||||
this.stockTable3.splice(0)
|
||||
|
||||
// 将stockList分流到stockTable 1~3
|
||||
const length = this.stockList.length
|
||||
|
||||
if (length < 10) {
|
||||
this.stockTable1 = this.stockList
|
||||
.slice(0, this.stockList.length)
|
||||
.map(stock => ({ ...stock, _index: this.index++ }))
|
||||
} else if (length < 20) {
|
||||
this.stockTable1 = this.stockList.slice(0, 10).map(stock => ({ ...stock, _index: this.index++ }))
|
||||
this.stockTable2 = this.stockList
|
||||
.slice(10, this.stockList.length)
|
||||
.map(stock => ({ ...stock, _index: this.index++ }))
|
||||
} else {
|
||||
this.stockTable1 = this.stockList.slice(0, 10).map(stock => ({ ...stock, _index: this.index++ }))
|
||||
this.stockTable2 = this.stockList.slice(10, 20).map(stock => ({ ...stock, _index: this.index++ }))
|
||||
this.stockTable3 = this.stockList
|
||||
.slice(20, this.stockList.length)
|
||||
.map(stock => ({ ...stock, _index: this.index++ }))
|
||||
}
|
||||
|
||||
// console.log('stock table 1', this.stockTable1)
|
||||
// console.log('stock table 2', this.stockTable2)
|
||||
// console.log('stock table 3', this.stockTable3)
|
||||
},
|
||||
// 处理选中事件
|
||||
handleStockSelect(data) {
|
||||
this.$emit('stock-selected', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tables >>> .el-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tables >>> .el-col + .el-col {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/* .tables >>> .col-1,
|
||||
.tables >>> .col-2 {
|
||||
padding-right: 8px;
|
||||
border-right: 1px solid #e9e9e9;
|
||||
} */
|
||||
|
||||
/* .tables >>> .el-col:not(:last-child) {
|
||||
padding-right: 8px;
|
||||
border-right: 1px solid #e9e9e9;
|
||||
} */
|
||||
|
||||
.tables >>> .el-col:not(:first-child) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tables >>> .el-col:not(:first-child)::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 4px;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: #e9e9e9;
|
||||
}
|
||||
</style>
|
||||
39
src/views/basicData/Cache/components/viewDetailBtn.vue
Normal file
39
src/views/basicData/Cache/components/viewDetailBtn.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-3-8 10:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-3-17 14:38:00
|
||||
* @Description: 库位详情按钮
|
||||
-->
|
||||
<template>
|
||||
<span>
|
||||
<el-button type="text" size="small" @click="emitClick">{{ $t('module.basicData.cache.ViewDetail') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
detailType: '' // 'cache' or 'area' or 'stock' itself
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.detailType = this.injectData.detailType
|
||||
},
|
||||
methods: {
|
||||
emitClick() {
|
||||
// action: { 'showStocks', 'toggleEnabled' }
|
||||
// data: { object }
|
||||
// 通知外面，点击了库位详情按钮
|
||||
this.$emit('emitData', { action: 'showStocks', data: { id: this.injectData.id }})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
194
src/views/basicData/Cache/inventory.vue
Normal file
194
src/views/basicData/Cache/inventory.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-23 10:09:59
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-03-23 10:09:59
|
||||
* @Description: 库存统计
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="tableData"
|
||||
:is-loading="listLoading"
|
||||
/>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import { list, getCaches } from '@/api/basicData/Cache/inventory'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import { timeFormatter } from '@/filters'
|
||||
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*/
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'stockTime',
|
||||
label: i18n.t('module.basicData.cache.StockTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'cacheName',
|
||||
label: i18n.t('module.basicData.cache.CacheNameAbbr')
|
||||
},
|
||||
{
|
||||
prop: 'areaName',
|
||||
label: i18n.t('module.basicData.cache.AreaNameInTable')
|
||||
},
|
||||
{
|
||||
prop: 'stockName',
|
||||
label: i18n.t('module.basicData.cache.LocationNameAbbr')
|
||||
},
|
||||
{
|
||||
prop: 'shelfCode',
|
||||
label: i18n.t('module.basicData.cache.ShelfCode')
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: i18n.t('module.basicData.cache.ProductName')
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: i18n.t('module.basicData.cache.Quantity')
|
||||
},
|
||||
{
|
||||
prop: 'specifications',
|
||||
label: i18n.t('module.basicData.cache.Specifications')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Inventory',
|
||||
components: { HeadForm, Pagination, BaseTable },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cacheOptions: [],
|
||||
currentCache: null,
|
||||
tableProps,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
CACHE_MAX_SIZE: 100,
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: this.$t('module.basicData.cache.CacheNameAbbr'),
|
||||
selectOptions: [],
|
||||
param: 'currentCache',
|
||||
defaultSelect: ''
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCacheOptions()
|
||||
},
|
||||
methods: {
|
||||
getCacheOptions() {
|
||||
// 清空一下 cacheOptions []
|
||||
this.cacheOptions.splice(0, this.cacheOptions.length)
|
||||
// 填充 cacheOptions
|
||||
getCaches({
|
||||
current: 1,
|
||||
size: 100 // 这个值具体怎么处理以后肯定会改进
|
||||
})
|
||||
.then(response => {
|
||||
response.data.records.forEach((obj, idx) => {
|
||||
// 只需要cache的这两个字段
|
||||
this.cacheOptions.push({ id: obj.id, name: obj.name })
|
||||
this.headFormConfig[0].selectOptions = this.cacheOptions
|
||||
if (idx === 0) {
|
||||
// 保存第一个Cache的id为默认展示的值
|
||||
this.currentCache = obj.id
|
||||
this.headFormConfig[0].defaultSelect = this.currentCache
|
||||
}
|
||||
})
|
||||
})
|
||||
.then(() => {
|
||||
// 待 cacheOptions 填充完并有一个默认的 cacheId 后，请求库存列表
|
||||
return this.getList()
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
// 将 cacheId 作为请求参数之一传给 list()
|
||||
// 请求与该缓存区对应的库存详情
|
||||
list({
|
||||
...this.listQuery,
|
||||
cacheId: this.headFormConfig[0].defaultSelect
|
||||
}).then(response => {
|
||||
if (response.data.records) {
|
||||
// 如果后台有数据则填充
|
||||
this.tableData = response.data.records
|
||||
} else {
|
||||
// 如果后台无数据则清空tableData，防止报错
|
||||
this.tableData.splice(0, this.tableData.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClosed() {
|
||||
this.addOrUpdateVisible = false
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
275
src/views/basicData/Cache/shelf.vue
Normal file
275
src/views/basicData/Cache/shelf.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:33
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="shelfList"
|
||||
:is-loading="listLoading"
|
||||
@emitFun="updateStatus"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<shelfAttr-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:cache-id="listQuery.cacheId"
|
||||
@refreshDataList="getList"
|
||||
@statusChanged="updateStatus"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { list, del, toggleEnabled } from '@/api/basicData/Cache/shelf'
|
||||
import shelfAttrAdd from './components/shelfAttr-add.vue'
|
||||
import statusSwitch from './components/statusBtn.vue'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'type',
|
||||
label: i18n.t('module.basicData.cache.ShelfType')
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.cache.ShelfName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.cache.ShelfCode')
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: i18n.t('module.basicData.cache.ShelfAvailable'),
|
||||
subcomponent: statusSwitch
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.cache.Notes')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Area',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, shelfAttrAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
shelfList: [],
|
||||
areaList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.cache.Keywords'),
|
||||
placeholder: this.$t('module.basicData.cache.ShelfName'),
|
||||
param: 'keyName'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// getAreaList(params).then(response => {
|
||||
// if (response.data.records) {
|
||||
// this.areaList = response.data.records
|
||||
// }
|
||||
// this.getList()
|
||||
// })
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 更新可用状态
|
||||
// 货架没有'查看详情'的需求，故此处不用commonEventHandler了
|
||||
updateStatus({ data: vShelf }) {
|
||||
toggleEnabled(vShelf).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
// 编辑
|
||||
this.addNew(raw.data.id)
|
||||
} else {
|
||||
// 新增
|
||||
this.addNew(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.keyName
|
||||
// 先清空
|
||||
this.shelfList.splice(0, this.shelfList.length)
|
||||
// 再获取，避免启停状态不刷新
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.shelfList = response.data.records
|
||||
// this.shelfList.forEach(item => {
|
||||
// const name = this.areaList.find(aitem => {
|
||||
// if (aitem.id === item.areaId) return aitem
|
||||
// })
|
||||
// if (name) {
|
||||
// item.areaName = name.name
|
||||
// }
|
||||
// })
|
||||
} else {
|
||||
this.shelfList.splice(0, this.shelfList.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, true)
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew() // 新增
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
274
src/views/basicData/Cache/storage.vue
Normal file
274
src/views/basicData/Cache/storage.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-03-23 14:09:59
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:36
|
||||
* @Description: 出入库操作
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="tableData"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
|
||||
<storage-drawer
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="getList"
|
||||
@handleClosed="handleClosed"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/Cache/storage'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import StorageDrawer from './components/storage-drawer.vue'
|
||||
import { timeFormatter, operateTypeFilter, sourceFilter } from '@/filters'
|
||||
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
// {
|
||||
// type: 'edit',
|
||||
// btnName: 'btn.edit'
|
||||
// },
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'stockTime',
|
||||
label: i18n.t('module.basicData.cache.Time'),
|
||||
filter: timeFormatter,
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
prop: 'cacheName',
|
||||
label: i18n.t('module.basicData.cache.CacheNameAbbr')
|
||||
},
|
||||
{
|
||||
prop: 'areaName',
|
||||
label: i18n.t('module.basicData.cache.AreaNameInTable')
|
||||
},
|
||||
{
|
||||
prop: 'stockName',
|
||||
label: i18n.t('module.basicData.cache.LocationNameAbbr')
|
||||
},
|
||||
{
|
||||
prop: 'shelfCode',
|
||||
label: i18n.t('module.basicData.cache.ShelfCode')
|
||||
},
|
||||
{
|
||||
prop: 'operateType',
|
||||
label: i18n.t('module.basicData.cache.OperateType'),
|
||||
filter: operateTypeFilter
|
||||
},
|
||||
{
|
||||
prop: 'source',
|
||||
label: i18n.t('module.basicData.cache.Source'),
|
||||
filter: sourceFilter
|
||||
},
|
||||
{
|
||||
prop: 'productName',
|
||||
label: i18n.t('module.basicData.cache.ProductName')
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: i18n.t('module.basicData.cache.Quantity')
|
||||
},
|
||||
{
|
||||
prop: 'specifications',
|
||||
label: i18n.t('module.basicData.cache.Specifications')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Storage',
|
||||
components: { HeadForm, Pagination, BaseTable, MethodBtn, /* storageDialog, */ StorageDrawer },
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
shelfCode: null,
|
||||
operation: null, // 默认没有选择任何方式
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
tableData: [],
|
||||
total: 0,
|
||||
listLoading: false,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: this.$t('module.basicData.cache.ShelfCode'),
|
||||
placeholder: this.$t('module.basicData.cache.ShelfCode'),
|
||||
param: 'shelfCode'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: this.$t('module.basicData.cache.OperateType'),
|
||||
selectOptions: [
|
||||
{ id: '0', name: this.$t('module.basicData.cache.All') },
|
||||
{ id: '1', name: this.$t('module.basicData.cache.Export') },
|
||||
{ id: '2', name: this.$t('module.basicData.cache.Import') }
|
||||
],
|
||||
param: 'operation'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')} [id为:${raw.data.id}] 的记录吗?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
doNothing() {},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
// 准备额外参数
|
||||
const extraParams = {}
|
||||
// 如果没有选择出库、还是入库，则默认全部，0 代表全部
|
||||
extraParams.operateType = this.headFormValue.operation ? this.headFormValue.operation : 0
|
||||
// 如果设置了 shelfCode 过滤条件，则加上
|
||||
this.headFormValue.shelfCode ? (extraParams.shelfCode = this.headFormValue.shelfCode) : this.doNothing()
|
||||
// 发起请求
|
||||
list({
|
||||
...this.listQuery,
|
||||
...extraParams
|
||||
}).then(response => {
|
||||
if (response.data.records) {
|
||||
this.tableData = response.data.records
|
||||
} else {
|
||||
this.tableData.splice(0, this.tableData.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, readonly) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, readonly)
|
||||
})
|
||||
},
|
||||
// 关闭弹窗
|
||||
handleClosed() {
|
||||
this.addOrUpdateVisible = false
|
||||
},
|
||||
add() {},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew() // 新增
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
223
src/views/basicData/Cache/storageBox.vue
Normal file
223
src/views/basicData/Cache/storageBox.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:39
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :placeholder-name="placeholderName" :key-name="keyName" @getDataList="getList" @add="addNew" />
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<storageBox-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:cache-id="listQuery.cacheId"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import PositionDetail from './components/PositionDetail'
|
||||
import storageBoxAdd from './components/storageBox-add'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { storageBoxList, storageBoxDelete } from '@/api/basicData/Cache/storageBox'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import basicData from '@/filters/basicData'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.storageBox.name')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.storageBox.code')
|
||||
},
|
||||
{
|
||||
prop: 'aliasName',
|
||||
label: i18n.t('module.basicData.storageBox.alias')
|
||||
},
|
||||
{
|
||||
prop: 'quantity',
|
||||
label: i18n.t('module.basicData.storageBox.StorageQuantity')
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: i18n.t('module.basicData.storageBox.status'),
|
||||
filter: basicData('storage')
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.storageBox.remark')
|
||||
},
|
||||
{
|
||||
prop: 'location',
|
||||
label: i18n.t('module.basicData.cache.Location'),
|
||||
subcomponent: PositionDetail
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Area',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, storageBoxAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
keyName: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholderName:
|
||||
this.$t('module.basicData.storageBox.name') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.storageBox.code'),
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
areaList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
storageBoxDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
} else {
|
||||
this.addNew(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList(key) {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = key
|
||||
this.listQuery.code = key
|
||||
storageBoxList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, true)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
192
src/views/basicData/CodeRules.vue
Normal file
192
src/views/basicData/CodeRules.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:28:53
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :placeholder-name="placeholderName" :key-name="keyName" @getDataList="getList" @add="addNew" />
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<CodeRules-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { CodeRulesList, CodeRulesDelete } from '@/api/basicData/CodeRules'
|
||||
import CodeRulesAdd from './components/CodeRules-add'
|
||||
import attrBtn from './components/attrBtn'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.CodeRules.RuleName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.CodeRules.RuleCode')
|
||||
},
|
||||
{
|
||||
prop: 'abbreviation',
|
||||
label: i18n.t('module.basicData.visual.Abbreviation')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
},
|
||||
{
|
||||
prop: 'attribute',
|
||||
label: i18n.t('module.basicData.CodeRules.Property'),
|
||||
subcomponent: attrBtn
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'CodeRules',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, CodeRulesAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyName: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholderName: this.$t('module.basicData.CodeRules.RuleName'),
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
CodeRulesDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList(key) {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = key
|
||||
CodeRulesList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
206
src/views/basicData/CustomerSupplier/components/customer-add.vue
Normal file
206
src/views/basicData/CustomerSupplier/components/customer-add.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-21 16:24:15
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter" :visible.sync="visible" width="50%" :close-on-click-modal="false">
|
||||
<el-form ref="dataForm" class="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()">
|
||||
<!-- label-width="100px" -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 客户名称 -->
|
||||
<el-form-item :label="$t('module.basicData.customer.CustomerName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.CustomerName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 客户编号 - 生成，可修改 -->
|
||||
<el-form-item :label="$t('module.basicData.customer.CustomerNo')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.CustomerNo')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 联系人 -->
|
||||
<el-form-item :label="$t('module.basicData.customer.ContactPerson')" prop="contact">
|
||||
<el-input
|
||||
v-model="dataForm.contact"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.ContactPerson')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 联系电话 -->
|
||||
<el-form-item :label="$t('module.basicData.customer.Telephone')" prop="telephone">
|
||||
<el-input
|
||||
v-model="dataForm.telephone"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.Telephone')])"
|
||||
clearable
|
||||
prefix-icon="el-icon-phone"
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 地址 -->
|
||||
<el-form-item :label="$t('module.basicData.customer.Address')" prop="address">
|
||||
<el-input
|
||||
v-model="dataForm.address"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.customer.Address')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="20">
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row> -->
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="warning" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/CustomerSupplier/customer'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
contact: '',
|
||||
telephone: '',
|
||||
address: '',
|
||||
description: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.customer.CustomerName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.customer.CustomerNo')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
contact: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.customer.ContactPerson')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
telephone: [
|
||||
{
|
||||
required: true,
|
||||
pattern: /(^1\d{10}$)|(^[0-9]\d{7}$)/,
|
||||
message: this.$t('module.basicData.customer.Telephone') + this.$t('module.basicData.customer.format'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.$refs.dataForm.resetFields()
|
||||
// 然后重新生成一个code
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
},
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = refineData(res.data, [
|
||||
'id',
|
||||
'name',
|
||||
'code',
|
||||
'description',
|
||||
'contact',
|
||||
'address',
|
||||
'telephone'
|
||||
])
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dataForm >>> .el-form-item__label {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
206
src/views/basicData/CustomerSupplier/components/supplier-add.vue
Normal file
206
src/views/basicData/CustomerSupplier/components/supplier-add.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-21 13:24:15
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter" :visible.sync="visible" width="50%" :close-on-click-modal="false">
|
||||
<el-form ref="dataForm" class="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()">
|
||||
<!-- label-width="100px" -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 供应商名称 -->
|
||||
<el-form-item :label="$t('module.basicData.supplier.SupplierName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.SupplierName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 供应商编号 -->
|
||||
<el-form-item :label="$t('module.basicData.supplier.SupplierNo')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.SupplierNo')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 联系人 -->
|
||||
<el-form-item :label="$t('module.basicData.supplier.ContactPerson')" prop="contact">
|
||||
<el-input
|
||||
v-model="dataForm.contact"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.ContactPerson')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 联系电话 -->
|
||||
<el-form-item :label="$t('module.basicData.supplier.Telephone')" prop="telephone">
|
||||
<el-input
|
||||
v-model="dataForm.telephone"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.Telephone')])"
|
||||
clearable
|
||||
prefix-icon="el-icon-phone"
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 地址 -->
|
||||
<el-form-item :label="$t('module.basicData.supplier.Address')" prop="address">
|
||||
<el-input
|
||||
v-model="dataForm.address"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.supplier.Address')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="20">
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row> -->
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="warning" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/CustomerSupplier/supplier'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: null,
|
||||
name: '',
|
||||
code: '',
|
||||
contact: '',
|
||||
telephone: '',
|
||||
description: '',
|
||||
address: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.supplier.SupplierName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.supplier.SupplierNo')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
contact: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.supplier.ContactPerson')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
telephone: [
|
||||
{
|
||||
required: true,
|
||||
pattern: /(^1\d{10}$)|(^[0-9]\d{7}$)/,
|
||||
message: this.$t('module.basicData.supplier.Telephone') + this.$t('module.basicData.customer.format'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.$refs.dataForm.resetFields()
|
||||
// 然后重新生成一个code
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
},
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = refineData(res.data, [
|
||||
'id',
|
||||
'name',
|
||||
'code',
|
||||
'address',
|
||||
'contact',
|
||||
'telephone',
|
||||
'description'
|
||||
])
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dataForm >>> .el-form-item__label {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
216
src/views/basicData/CustomerSupplier/customer.vue
Normal file
216
src/views/basicData/CustomerSupplier/customer.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:04
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="customerList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<customer-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/CustomerSupplier/customer'
|
||||
import customerAdd from './components/customer-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.customer.CustomerName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.customer.CustomerCode')
|
||||
},
|
||||
{
|
||||
prop: 'contact',
|
||||
label: i18n.t('module.basicData.customer.ContactPerson')
|
||||
},
|
||||
{
|
||||
prop: 'telephone',
|
||||
label: i18n.t('module.basicData.customer.Telephone')
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: i18n.t('module.basicData.customer.Address')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Customer',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, customerAdd },
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
customerList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.customer.CustomerName'),
|
||||
param: 'keyName'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.keyName
|
||||
list({ ...this.listQuery }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.customerList = response.data.records
|
||||
} else {
|
||||
this.customerList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
220
src/views/basicData/CustomerSupplier/supplier.vue
Normal file
220
src/views/basicData/CustomerSupplier/supplier.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-27
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="supplierList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<supplier-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/CustomerSupplier/supplier'
|
||||
import supplierAdd from './components/supplier-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.supplier.SupplierName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.supplier.SupplierCode')
|
||||
},
|
||||
{
|
||||
prop: 'contact',
|
||||
label: i18n.t('module.basicData.supplier.ContactPerson')
|
||||
},
|
||||
{
|
||||
prop: 'telephone',
|
||||
label: i18n.t('module.basicData.supplier.Telephone')
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: i18n.t('module.basicData.supplier.Address')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Supplier',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, supplierAdd },
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
supplierList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder:
|
||||
this.$t('module.basicData.supplier.SupplierName') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.supplier.SupplierCode'),
|
||||
param: 'keyName',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList(key) {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.keyName
|
||||
this.listQuery.code = this.headFormValue.keyName
|
||||
list({ ...this.listQuery }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.supplierList = response.data.records
|
||||
} else {
|
||||
this.supplierList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
259
src/views/basicData/Equipment/EquipmentGroup.vue
Normal file
259
src/views/basicData/Equipment/EquipmentGroup.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:23
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="groupList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
@emitFun="handleTableEvents"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<equipmentGroup-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
<warning-drawer v-if="warningDrawerVisible" ref="warningDrawer" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, del } from '@/api/basicData/Equipment/equipmentGroup'
|
||||
import equipmentGroupAdd from './components/equipmentGroup-add.vue'
|
||||
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import i18n from '@/lang'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import ViewWarningBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
import WarningDrawer from './components/WarningDrawer.vue'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipmentGroup.name')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipmentGroup.code')
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
},
|
||||
{
|
||||
prop: 'viewWarning',
|
||||
label: i18n.t('module.basicData.equipmentGroup.viewWarning'),
|
||||
subcomponent: ViewWarningBtn,
|
||||
emitFullData: true,
|
||||
// actionName: 'view-warning-action // 不设置也罢，如果一个table里有两个子组件就必须要各自设置
|
||||
buttonContent: i18n.t('module.basicData.equipmentGroup.viewWarning')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentGroup',
|
||||
components: { HeadForm, Pagination, BaseTable, MethodBtn, equipmentGroupAdd, WarningDrawer },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
warningDrawerVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
groupList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder:
|
||||
this.$t('module.basicData.equipment.groupName') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.equipment.groupCode'),
|
||||
param: 'name',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// displayWarnings() {
|
||||
// this.$message({
|
||||
// message: '暂时未开放的需求！',
|
||||
// type: 'warning',
|
||||
// duration: 2000
|
||||
// })
|
||||
// },
|
||||
handleTableEvents({ action, data }) {
|
||||
// 由于table只会emit查看报警的事件，所以此处省略判断
|
||||
// this.displayWarnings()
|
||||
// console.log('view warning', action, data)
|
||||
this.viewWarning(data)
|
||||
},
|
||||
|
||||
viewWarning(data) {
|
||||
this.warningDrawerVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.warningDrawer.init(data)
|
||||
})
|
||||
},
|
||||
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
list({
|
||||
...this.listQuery,
|
||||
name: this.headFormValue.name,
|
||||
code: this.headFormValue.name
|
||||
}).then(response => {
|
||||
if (response.data.records) {
|
||||
this.groupList = response.data.records
|
||||
} else {
|
||||
this.groupList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
413
src/views/basicData/Equipment/components/WarningDrawer.vue
Normal file
413
src/views/basicData/Equipment/components/WarningDrawer.vue
Normal file
@@ -0,0 +1,413 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-6-10 14:50:00
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:31:04
|
||||
* @Description: 基本资料-设备分组-查看报警
|
||||
-->
|
||||
<template>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
|
||||
<small-title slot="title" :size="'lg'" :no-padding="true">
|
||||
<!-- {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }} -->
|
||||
{{ $t('module.basicData.equipment.viewAlarmDict') }}
|
||||
</small-title>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form ref="groupForm" :model="groupForm" label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label=" $t('module.basicData.equipmentGroup.code')">
|
||||
<span class="el-form-item__label" style="margin-left: 8px; font-weight: 700; font-size: 18px;">
|
||||
{{ groupForm.equipmentGroupCode }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.equipmentGroup.name')">
|
||||
<span class="el-form-item__label" style="margin-left: 8px; font-weight: 700; font-size: 18px;">
|
||||
{{ groupForm.equipmentGroupName }}
|
||||
</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<!-- <template v-if="isedit"> -->
|
||||
<small-title :size="'md'">{{ $t('module.basicData.equipment.alarmDetail') }}</small-title>
|
||||
|
||||
<transition mode="out-in" name="fade">
|
||||
<div v-if="!showAdd" key="__list">
|
||||
<!-- basetable -->
|
||||
<base-table
|
||||
key="inner-base-table"
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="warningList"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
|
||||
<!-- pagination -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
key="__add"
|
||||
style="border-radius: 8px;box-shadow: inset 0 0 8px 2px rgba(0,0,0,0.1);background-color: #f5f5f5; padding: 24px;margin-top: 26px;"
|
||||
>
|
||||
<small-title :size="'sm'">{{ $t('module.basicData.equipment.alarmDetail') }}</small-title>
|
||||
<br>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" label-width="100px" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<!-- 报警编码 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.alarmCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" disabled :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.alarmCode')])" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 报警类型 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.alarmType')" prop="alarmType">
|
||||
<el-input v-model="dataForm.alarmType" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.alarmType')])" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 报警级别 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.alarmLevel')" prop="alarmGrade">
|
||||
<el-input v-model="dataForm.alarmGrade" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.alarmLevel')])" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<!-- 报警内容 -->
|
||||
<el-col>
|
||||
<el-form-item :label="$t('module.basicData.equipment.alarmContent')" prop="alarmContent">
|
||||
<el-input v-model="dataForm.alarmContent" type="textarea" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.alarmContent')])" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button size="small" @click="showAdd = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button size="small" type="success" @click="handleAddWarning">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- </template> -->
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div
|
||||
v-if="showAdd"
|
||||
style="position: absolute; z-index: 10000; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background: lightblue; box-shadow: 0 2px 16px 2px rgba(0,0,0,.2); border-radius: 8px; padding: 6px;"
|
||||
>
|
||||
Show add
|
||||
<el-button class="close" @click="showAdd = false">close</el-button>
|
||||
</div> -->
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="close">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="close">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import {
|
||||
getWarningList,
|
||||
deleteWarning,
|
||||
addWarning,
|
||||
updateWarning,
|
||||
getWarningCode
|
||||
} from '@/api/basicData/Equipment/equipmentGroup'
|
||||
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
// import { timeFormatter } from '@/filters'
|
||||
// import { refineData } from '@/utils/helpers'
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// // label: i18n.t('module.basicData.factory.createTime'),
|
||||
// label: '添加时间',
|
||||
// filter: timeFormatter
|
||||
// },
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.alarmCode')
|
||||
},
|
||||
{
|
||||
prop: 'alarmType',
|
||||
label: i18n.t('module.basicData.equipment.alarmType')
|
||||
},
|
||||
{
|
||||
prop: 'alarmGrade',
|
||||
label: i18n.t('module.basicData.equipment.alarmLevel')
|
||||
},
|
||||
{
|
||||
prop: 'alarmContent',
|
||||
label: i18n.t('module.basicData.equipment.alarmContent')
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: { SmallTitle, BaseTable, MethodBtn, Pagination },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
isedit: false,
|
||||
topBtnConfig,
|
||||
tableProps,
|
||||
tableBtn,
|
||||
showAdd: false,
|
||||
groupForm: {
|
||||
equipmentGroupName: '',
|
||||
equipmentGroupCode: ''
|
||||
},
|
||||
dataForm: {
|
||||
id: null,
|
||||
equipmentGroupId: null,
|
||||
code: '',
|
||||
alarmContent: '',
|
||||
alarmGrade: '',
|
||||
alarmType: ''
|
||||
},
|
||||
warningList: [],
|
||||
total: 0,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 5
|
||||
},
|
||||
dataFormRules: {
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
// message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.workSection.name')]),
|
||||
message: this.$t('module.basicData.equipment.alarmCodeHint'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
|
||||
alarmContent: [
|
||||
{
|
||||
required: true,
|
||||
// message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.workSection.name')]),
|
||||
message: this.$t('module.basicData.equipment.alarmContentHint'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showAdd: function(val) {
|
||||
if (!this.isedit && val) {
|
||||
const tmpId = this.dataForm.id
|
||||
const tmpEquipmentGroupId = this.dataForm.equipmentGroupId
|
||||
this.initDataForm()
|
||||
this.dataForm.id = tmpId
|
||||
this.dataForm.equipmentGroupId = tmpEquipmentGroupId
|
||||
|
||||
getWarningCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
|
||||
// if (!this.warningTypeList.length || !this.warningGradeList.length) {
|
||||
// // 如果这些选项都没有数据缓存的话，就缓存下来
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initGroupForm() {
|
||||
this.groupForm = {
|
||||
equipmentGroupName: '',
|
||||
equipmentGroupCode: ''
|
||||
}
|
||||
},
|
||||
initDataForm() {
|
||||
this.dataForm = {
|
||||
id: null,
|
||||
equipmentGroupId: null,
|
||||
code: '',
|
||||
alarmContent: '',
|
||||
alarmGrade: '',
|
||||
alarmType: ''
|
||||
}
|
||||
},
|
||||
|
||||
init(data) {
|
||||
// 此处data必然有值，所以不判断了
|
||||
this.showAdd = false
|
||||
this.isedit = false
|
||||
this.initDataForm()
|
||||
this.initGroupForm()
|
||||
this.groupForm.equipmentGroupName = data.name
|
||||
this.groupForm.equipmentGroupCode = data.code
|
||||
this.dataForm.equipmentGroupId = data.id
|
||||
// 看看是不是有记录，有记录则拉取列表
|
||||
this.getList()
|
||||
this.visible = true
|
||||
},
|
||||
|
||||
close() {
|
||||
this.visible = false
|
||||
},
|
||||
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
// this.addNew()
|
||||
this.isedit = false
|
||||
this.showAdd = true
|
||||
}
|
||||
},
|
||||
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')} ${this.$t('module.basicData.equipment.EquipmentTypeAlarm')} [${raw.data.id}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
deleteWarning(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.isedit = true
|
||||
this.addNew(raw.data)
|
||||
}
|
||||
},
|
||||
|
||||
addNew(data) {
|
||||
this.dataForm.id = data.id
|
||||
this.dataForm.code = data.code
|
||||
this.dataForm.alarmContent = data.alarmContent
|
||||
this.dataForm.alarmGrade = data.alarmGrade
|
||||
this.dataForm.alarmType = data.alarmType
|
||||
this.showAdd = true
|
||||
},
|
||||
|
||||
getList() {
|
||||
// console.log('get list: ', this.dataForm)
|
||||
this.fetchList('warning-list')
|
||||
// this.warningList.push({
|
||||
// id: 1,
|
||||
// equipmentGroupId: 100,
|
||||
// code: 'ec-001',
|
||||
// alarmContent: 'content',
|
||||
// alarmGrade: 'grade',
|
||||
// alarmType: 'type'
|
||||
// })
|
||||
},
|
||||
|
||||
fetchList(type) {
|
||||
switch (type) {
|
||||
case 'warning-list':
|
||||
return getWarningList({ ...this.listQuery, equipmentGroupId: this.dataForm.equipmentGroupId }).then(res => {
|
||||
if (res.data.records) {
|
||||
this.warningList = res.data.records
|
||||
} else {
|
||||
this.warningList.splice(0)
|
||||
}
|
||||
this.total = res.data.total
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
handleAddWarning() {
|
||||
// 发送请求
|
||||
const ajaxAction = this.isedit ? updateWarning : addWarning
|
||||
ajaxAction({ ...this.dataForm }).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
// 成功后，关闭小窗，刷新列表
|
||||
this.showAdd = false
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
padding: 0;
|
||||
margin: 32px 0 8px 32px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,259 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:45
|
||||
* @enName:
|
||||
-->
|
||||
<template>
|
||||
<div style="margin:20px">
|
||||
<div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
|
||||
<div style="margin:0 15px">
|
||||
<el-form ref="dataForm" :inline="true" :model="dataForm" :rules="dataRule" label-width="120px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.DetectionArea')" prop="detectDistributionAreaId">
|
||||
<el-select v-model="dataForm.detectDistributionAreaId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.DetectionArea')])" clearable>
|
||||
<el-option
|
||||
v-for="item in detectAreaArr"
|
||||
:key="item.id"
|
||||
:label="item.detectArea"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')" prop="detectSystemId">
|
||||
<el-select v-model="dataForm.detectSystemId" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')])" clearable>
|
||||
<el-option
|
||||
v-for="item in SystemArr"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin:20px">
|
||||
<el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
|
||||
<span v-if="!isdetail">
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
<el-button v-if="dataForm.id" type="primary" @click="addNew()">{{ $t('module.basicData.equipmentDetectInfo.AddEquipment') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<div style="height:380px;overflow:auto">
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
>
|
||||
<method-btn
|
||||
v-if="!isdetail"
|
||||
slot="handleBtn"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
</div>
|
||||
</div>
|
||||
<detectSystemSettings-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :detect-area-system-id="dataForm.id" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { equipmentDetectAreaList } from '@/api/basicData/Equipment/equipmentDetectArea'
|
||||
import { equipmentDetectSystemList } from '@/api/basicData/Equipment/equipmentDetectSystem'
|
||||
import { equipmentDetectAreaSystemDetail, equipmentDetectAreaSystemUpdate, equipmentDetectAreaSystemAdd } from '@/api/basicData/Equipment/equipmentDetectAreaSystem'
|
||||
import { DetectAreaSystemAttrList, DetectAreaSystemAttrDelete } from '@/api/basicData/Equipment/equipmentDetectAreaSystemAttr'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import detectSystemSettingsAttrAdd from './detectSystemSettingsAttr-add'
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'function',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.EquipmentFunction'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: { BaseTable, MethodBtn, detectSystemSettingsAttrAdd },
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
categoryArr: [],
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
dataForm: {
|
||||
id: '',
|
||||
detectDistributionAreaId: '',
|
||||
detectSystemId: ''
|
||||
},
|
||||
dataRule: {
|
||||
detectDistributionAreaId: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.DetectionArea')]), trigger: 'change' }
|
||||
],
|
||||
detectSystemId: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')]), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 990,
|
||||
detectAreaSystemId: ''
|
||||
},
|
||||
detectAreaArr: [],
|
||||
SystemArr: [],
|
||||
isdetail: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dataForm.id = this.$route.query.id
|
||||
this.listQuery.detectAreaSystemId = this.$route.query.id
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.isdetail = false
|
||||
this.isdetail = Boolean(this.$route.query.isdetail)
|
||||
this.list.splice(0, this.list.length)
|
||||
const data = {
|
||||
current: 1,
|
||||
size: 500
|
||||
}
|
||||
equipmentDetectAreaList(data).then(response => {
|
||||
if (response.data.records) {
|
||||
this.detectAreaArr = response.data.records
|
||||
} else {
|
||||
this.detectAreaArr.splice(0, this.detectAreaArr.length)
|
||||
}
|
||||
})
|
||||
equipmentDetectSystemList(data).then(response => {
|
||||
if (response.data.records) {
|
||||
this.SystemArr = response.data.records
|
||||
} else {
|
||||
this.SystemArr.splice(0, this.SystemArr.length)
|
||||
}
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
equipmentDetectAreaSystemDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
DetectAreaSystemAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
DetectAreaSystemAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
DetectAreaSystemAttrDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = this.dataForm
|
||||
if (this.dataForm.id) {
|
||||
equipmentDetectAreaSystemUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
})
|
||||
} else {
|
||||
equipmentDetectAreaSystemAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
this.dataForm.id = res.data.id
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
goEdit() {
|
||||
this.isdetail = false
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-05-28 10:48:46
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentName')" prop="equipmentId">
|
||||
<el-select v-model="dataForm.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentName')])" clearable>
|
||||
<el-option
|
||||
v-for="item in equipmentArr"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DetectAreaSystemAttrDetail, DetectAreaSystemAttrUpdate, DetectAreaSystemAttrAdd } from '@/api/basicData/Equipment/equipmentDetectAreaSystemAttr'
|
||||
import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
detectAreaSystemId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
equipmentId: ''
|
||||
},
|
||||
equipmentArr: [],
|
||||
dataRule: {
|
||||
equipmentId: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
equipmentInfoList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
name: ''
|
||||
}).then(response => {
|
||||
this.equipmentArr = response.data.records
|
||||
})
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
DetectAreaSystemAttrDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm.equipmentId = res.data.equipmentId
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'equipmentId': this.dataForm.equipmentId,
|
||||
'detectAreaSystemId': this.detectAreaSystemId,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
DetectAreaSystemAttrUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
DetectAreaSystemAttrAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* 设备信息新增/编辑页面的组件配置
|
||||
* @Author: lb
|
||||
* @Date: 2022-04-18 10:46:10
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-18 10:46:10
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
export const setEquipmentInfoDataForm = () => ({
|
||||
id: null,
|
||||
name: '',
|
||||
code: '',
|
||||
enName: '',
|
||||
abbr: '',
|
||||
equipmentTypeId: null,
|
||||
groupId: null,
|
||||
supplierId: null, // 供应商id
|
||||
spec: '', // 规格描述
|
||||
productionTime: '', // datetime string
|
||||
enterTime: '', // datetime string
|
||||
tvalue: 0, // 暂定的tt值
|
||||
processingTime: null, // 暂定的单件产品加工时间(s)
|
||||
manufacturer: '',
|
||||
functions: '',
|
||||
description: '', // 功能描述
|
||||
remark: '',
|
||||
maintenanceCycle: 0, // 这个字段模型图里没有，默认传0
|
||||
maintenanceTime: 0 // 这个字段模型图里没有，默认传0
|
||||
})
|
||||
|
||||
// activiation: 0,
|
||||
// communication: 0,
|
||||
// controlStatus: 0,
|
||||
// debugPeriod: 0,
|
||||
// debugTime: '', // datetime string
|
||||
// eapVersion: 0,
|
||||
// equipmentArea: '',
|
||||
// equipmentId: null,
|
||||
// estatus: 0,
|
||||
// fileId: null,
|
||||
// intellectualProperty: '',
|
||||
// ip: '',
|
||||
// numberOfCavities: 0,
|
||||
// plcVersion: 0,
|
||||
// port: 0,
|
||||
// processingQuantityPerCavity: 0,
|
||||
// rangeNumber: 0,
|
||||
|
||||
export function setValidationRules(vm) {
|
||||
return {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.equipment.EquipmentName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.equipment.EquipmentCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
equipmentTypeId: [
|
||||
{
|
||||
required: true,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.equipment.EquipmentType')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
groupId: [
|
||||
{
|
||||
required: true,
|
||||
message: vm.$i18nForm(['placeholder.select', vm.$t('module.basicData.equipment.EquipmentGrouping')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
tvalue: [
|
||||
{
|
||||
required: true,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.equipment.tvalue')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
processingTime: [
|
||||
{
|
||||
required: true,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.equipment.processingTime')]),
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
transform: value => Number(value),
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.equipment.typeNumber')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
// maintenanceCycle: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.equipment.maintenanceCycle')]),
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ],
|
||||
// maintenanceTime: [
|
||||
// {
|
||||
// required: true,
|
||||
// message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.equipment.maintenanceTime')]),
|
||||
// trigger: 'blur'
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* 设备信息新增/编辑页面的设备属性表单配置
|
||||
* @Author: lb
|
||||
* @Date: 2022-04-18 10:46:10
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-18 10:46:10
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
import i18n from '@/lang'
|
||||
import { timeFormatter } from '@/filters'
|
||||
|
||||
export const setAttributeListTableBtn = () => [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
|
||||
export const setAttributeListTableProps = () => [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.equipment.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'attrName',
|
||||
label: i18n.t('module.basicData.equipment.AttributeName')
|
||||
},
|
||||
{
|
||||
prop: 'attrValue',
|
||||
label: i18n.t('module.basicData.equipment.AttributeValue')
|
||||
}
|
||||
// {
|
||||
// prop: 'remark',
|
||||
// label: i18n.t('module.basicData.visual.Remarks'),
|
||||
//
|
||||
// }
|
||||
]
|
||||
@@ -0,0 +1,271 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:50
|
||||
* @enName:
|
||||
-->
|
||||
<template>
|
||||
<div style="margin:20px">
|
||||
<div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
|
||||
<div style="margin:0 15px">
|
||||
<el-form ref="dataForm" :inline="true" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.equipment.WiredCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" style="width:300px" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.WiredCode')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.DetectionArea')" prop="detectArea">
|
||||
<el-select v-model="dataForm.detectArea" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.DetectionArea')])" clearable>
|
||||
<el-option
|
||||
v-for="item in detectAreaArr"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.IssueArea')" prop="distributionArea">
|
||||
<el-select v-model="dataForm.distributionArea" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.IssueArea')])" clearable>
|
||||
<el-option
|
||||
v-for="item in distributionAreaArr"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin:20px">
|
||||
<el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
|
||||
<span v-if="!isdetail">
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
<el-button v-if="listQuery.detectDistributionAreaId" type="primary" @click="addNew()">{{ $t('module.basicData.equipmentDetectInfo.AddEquipment') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<div style="height:380px;overflow:auto">
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
>
|
||||
<method-btn
|
||||
v-if="!isdetail"
|
||||
slot="handleBtn"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
</div>
|
||||
</div>
|
||||
<equipmentDetectArea-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :detect-distribution-area-id="listQuery.detectDistributionAreaId" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { equipmentDetectAreaDetail, equipmentDetectAreaUpdate, equipmentDetectAreaAdd, equipmentDetectAreaCode } from '@/api/basicData/Equipment/equipmentDetectArea'
|
||||
import { equipmentDetectAreaAttrList, equipmentDetectAreaAttrDelete } from '@/api/basicData/Equipment/equipmentDetectAreaAttr'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import equipmentDetectAreaAttrAdd from './equipmentDetectAreaAttr-add'
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'function',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.EquipmentFunction'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: { BaseTable, MethodBtn, equipmentDetectAreaAttrAdd },
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
categoryArr: [],
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
dataForm: {
|
||||
code: '',
|
||||
distributionArea: '',
|
||||
detectArea: ''
|
||||
},
|
||||
detectAreaArr: [{
|
||||
value: 'Backend',
|
||||
label: 'Backend'
|
||||
}, {
|
||||
value: 'Frontend',
|
||||
label: 'Frontend'
|
||||
}, {
|
||||
value: 'Midend',
|
||||
label: 'Midend'
|
||||
}],
|
||||
distributionAreaArr: [{
|
||||
value: '00A',
|
||||
label: '00A'
|
||||
}, {
|
||||
value: '00C',
|
||||
label: '00C'
|
||||
}, {
|
||||
value: 'PID24',
|
||||
label: 'PID24'
|
||||
}],
|
||||
dataRule: {
|
||||
code: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.WiredCode')]), trigger: 'blur' }
|
||||
],
|
||||
distributionArea: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.IssueArea')]), trigger: 'change' }
|
||||
],
|
||||
detectArea: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.DetectionArea')]), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 990,
|
||||
detectDistributionAreaId: ''
|
||||
},
|
||||
isdetail: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.listQuery.detectDistributionAreaId = this.$route.query.id
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.isdetail = false
|
||||
this.isdetail = Boolean(this.$route.query.isdetail)
|
||||
this.list.splice(0, this.list.length)
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.listQuery.detectDistributionAreaId) {
|
||||
equipmentDetectAreaDetail(this.listQuery.detectDistributionAreaId).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
equipmentDetectAreaAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
equipmentDetectAreaCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
equipmentDetectAreaAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
equipmentDetectAreaAttrDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'code': this.dataForm.code,
|
||||
'detectArea': this.dataForm.detectArea,
|
||||
'distributionArea': this.dataForm.distributionArea,
|
||||
'id': this.listQuery.detectDistributionAreaId
|
||||
}
|
||||
if (this.listQuery.detectDistributionAreaId) {
|
||||
equipmentDetectAreaUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
})
|
||||
} else {
|
||||
equipmentDetectAreaAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
this.listQuery.detectDistributionAreaId = res.data.id
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
goEdit() {
|
||||
this.isdetail = false
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-05-28 10:12:01
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentName')" prop="equipmentId">
|
||||
<el-select v-model="dataForm.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentName')])" clearable>
|
||||
<el-option
|
||||
v-for="item in equipmentArr"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { equipmentDetectAreaAttrDetail, equipmentDetectAreaAttrUpdate, equipmentDetectAreaAttrAdd } from '@/api/basicData/Equipment/equipmentDetectAreaAttr'
|
||||
import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
detectDistributionAreaId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
equipmentId: ''
|
||||
},
|
||||
equipmentArr: [],
|
||||
dataRule: {
|
||||
equipmentId: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
equipmentInfoList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
name: ''
|
||||
}).then(response => {
|
||||
this.equipmentArr = response.data.records
|
||||
})
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
equipmentDetectAreaAttrDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm.equipmentId = res.data.equipmentId
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'equipmentId': this.dataForm.equipmentId,
|
||||
'detectDistributionAreaId': this.detectDistributionAreaId,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
equipmentDetectAreaAttrUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
equipmentDetectAreaAttrAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,233 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:52
|
||||
* @enName:
|
||||
-->
|
||||
<template>
|
||||
<el-container style="margin:30px">
|
||||
<el-aside style="width:250px">
|
||||
<el-tree :data="menuList" :props="defaultProps" @node-click="getOrganization" />
|
||||
</el-aside>
|
||||
<el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="listQuery"
|
||||
:inline="true"
|
||||
size="medium"
|
||||
label-position="left"
|
||||
>
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentName')+'：'">
|
||||
<span style="color:#1890FF">{{ listQuery.detectEquipmentAreaName }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="keyName +'：'" prop="name">
|
||||
<el-input v-model="listQuery.name" :placeholder="placeholderName" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
|
||||
<el-button v-if="listQuery.detectEquipmentAreaId" type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
</el-main>
|
||||
<equipmentDetectParam-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :detect-equipment-area-id="listQuery.detectEquipmentAreaId" @refreshDataList="getList" />
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { equipmentDetectParamList, equipmentDetectParamDelete } from '@/api/basicData/Equipment/equipmentDetectParam'
|
||||
import { equipmentDetectTreeList } from '@/api/basicData/Equipment/equipmentDetectArea'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import equipmentDetectParamAttrAdd from './equipmentDetectParamAttr-add'
|
||||
import basicData from '@/filters/basicData'
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.TestParameterName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'value',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.ReferenceValue'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'distribution',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.IssueOrNot'),
|
||||
filter: basicData('onDuty'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'testFrequency',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.TestFrequency'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'testSystem',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.TestSystem'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Description'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: { BaseTable, MethodBtn, equipmentDetectParamAttrAdd },
|
||||
data() {
|
||||
return {
|
||||
keyName: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholderName: this.$t('module.basicData.equipmentDetectInfo.TestParameterName'),
|
||||
addOrUpdateVisible: false,
|
||||
menuList: [],
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
listQuery: {
|
||||
detectEquipmentAreaId: '',
|
||||
detectEquipmentAreaName: '',
|
||||
name: '',
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
const TreeListQuery = {
|
||||
current: 1,
|
||||
size: 500
|
||||
}
|
||||
this.menuList.splice(0, this.menuList.length)
|
||||
this.menuList = [
|
||||
{
|
||||
'name': '全部',
|
||||
'children': []
|
||||
}
|
||||
]
|
||||
const res = await equipmentDetectTreeList(TreeListQuery)
|
||||
if (res.code === 0) {
|
||||
this.menuList[0].children = res.data
|
||||
if (this.menuList[0].children) {
|
||||
this.menuList[0].children.forEach(item => {
|
||||
item.name = item.detectArea
|
||||
if (item.detectSystemVoList) {
|
||||
item.children = item.detectSystemVoList
|
||||
item.detectSystemVoList.forEach(item1 => {
|
||||
if (item1.equipmentVoList) { item1.children = item1.equipmentVoList }
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
equipmentDetectParamList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
},
|
||||
getOrganization(data) {
|
||||
if (data.detectEquipmentAreaId) {
|
||||
this.listQuery.detectEquipmentAreaId = data.detectEquipmentAreaId
|
||||
this.listQuery.detectEquipmentAreaName = data.name
|
||||
this.getList()
|
||||
} else {
|
||||
this.listQuery.detectEquipmentAreaId = ''
|
||||
this.listQuery.detectEquipmentAreaName = ''
|
||||
}
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
equipmentDetectParamDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
.el-container >>> .el-aside{
|
||||
border:2px solid #E4E4E4;
|
||||
border-radius:10px;
|
||||
background-color: white;
|
||||
min-height:550px;
|
||||
padding-top:20px
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-04-14 15:06:41
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
><el-row :gutter="10">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
label-width="110px"
|
||||
label-position="left"
|
||||
>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.TestParameterName')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$t('module.basicData.equipmentDetectInfo.TestParameterName')" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.ReferenceValue')" prop="value">
|
||||
<el-input v-model="dataForm.value" :placeholder="$t('module.basicData.equipmentDetectInfo.ReferenceValue')" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.TestFrequency')" prop="testFrequency">
|
||||
<el-input v-model="dataForm.testFrequency" :placeholder="$t('module.basicData.equipmentDetectInfo.TestFrequency')" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.TestSystem')" prop="testSystem">
|
||||
<el-input v-model="dataForm.testSystem" :placeholder="$t('module.basicData.equipmentDetectInfo.TestSystem')" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.IssueOrNot')" prop="distribution">
|
||||
<el-switch v-model="dataForm.distribution" active-value="1" inactive-value="0" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.basicData.visual.Description')" prop="description">
|
||||
<el-input v-model="dataForm.description" :placeholder="$t('module.basicData.visual.Description')" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :placeholder="$t('module.basicData.visual.Remarks')" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { equipmentDetectParamDetail, equipmentDetectParamUpdate, equipmentDetectParamAdd } from '@/api/basicData/Equipment/equipmentDetectParam'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
detectEquipmentAreaId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: undefined,
|
||||
value: undefined,
|
||||
testFrequency: undefined,
|
||||
testSystem: undefined,
|
||||
distribution: false,
|
||||
description: undefined,
|
||||
remark: undefined
|
||||
},
|
||||
rules: {
|
||||
name: [],
|
||||
value: [],
|
||||
testFrequency: [],
|
||||
testSystem: [],
|
||||
description: [],
|
||||
remark: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
equipmentDetectParamDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = this.dataForm
|
||||
data.detectEquipmentAreaId = this.detectEquipmentAreaId
|
||||
if (this.dataForm.id) {
|
||||
equipmentDetectParamUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
equipmentDetectParamAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-05-21 10:44:13
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.code')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.code')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemAbbr')" prop="abbr">
|
||||
<el-input v-model="dataForm.abbr" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipmentDetectInfo.equipmentDetectSystemAbbr')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipment.FunctionDescription')" prop="description">
|
||||
<el-input v-model="dataForm.description" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.FunctionDescription')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { equipmentDetectSystemDetail, equipmentDetectSystemUpdate, equipmentDetectSystemAdd, equipmentDetectSystemCode } from '@/api/basicData/Equipment/equipmentDetectSystem'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
abbr: '',
|
||||
description: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName')]),
|
||||
trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipmentDetectInfo.code')]),
|
||||
trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
equipmentDetectSystemDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
} else {
|
||||
equipmentDetectSystemCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'name': this.dataForm.name,
|
||||
'code': this.dataForm.code,
|
||||
'abbr': this.dataForm.abbr,
|
||||
'description': this.dataForm.description,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
equipmentDetectSystemUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
equipmentDetectSystemAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
117
src/views/basicData/Equipment/components/equipmentGroup-add.vue
Normal file
117
src/views/basicData/Equipment/components/equipmentGroup-add.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-19 11:59:29
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter" width="40%" :visible.sync="visible" :close-on-click-modal="false">
|
||||
<el-form ref="dataForm" class="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()">
|
||||
<!-- label-width="80px" -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.groupName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.groupName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipment.groupCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.groupCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { update, add, detail, getCode } from '@/api/basicData/Equipment/equipmentGroup'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.groupName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.fillCode()
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = refineData(res.data, ['id', 'name', 'code', 'remark'])
|
||||
// console.log('after refine: ', this.dataForm) // it works!
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fillCode() {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dataForm >>> .el-form-item__label {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
923
src/views/basicData/Equipment/components/equipmentInfoAdd.vue
Normal file
923
src/views/basicData/Equipment/components/equipmentInfoAdd.vue
Normal file
@@ -0,0 +1,923 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:55
|
||||
* @Description: 设备信息-新增编辑详情(抽屉)
|
||||
-->
|
||||
<template>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
|
||||
<small-title slot="title">
|
||||
{{ isdetail ? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title>
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="validationRules"
|
||||
size="medium"
|
||||
label-width="150px"
|
||||
label-position="top"
|
||||
>
|
||||
<!-- 第一行 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 设备名称 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
autofocus
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentName')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 设备编码 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentCode')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 英文名称 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EnglishNameL')" prop="enName">
|
||||
<el-input
|
||||
v-model="dataForm.enName"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EnglishNameL')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 缩写 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.Abbreviation')" prop="abbr">
|
||||
<el-input
|
||||
v-model="dataForm.abbr"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.Abbreviation')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 设备类型 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentType')" prop="equipmentTypeId">
|
||||
<el-select
|
||||
v-model="dataForm.equipmentTypeId"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentType')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in equipmentTypeOptions"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 设备分组 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentGrouping')" prop="groupId">
|
||||
<el-select
|
||||
v-model="dataForm.groupId"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentGrouping')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in equipmentGroupOptions"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第三行 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 生产日期 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.productionTime')" prop="productionTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.productionTime"
|
||||
:disabled="isdetail"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss"
|
||||
:style="{ width: '100%' }"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.productionTime')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 进厂日期 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.enterTime')" prop="enterTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.enterTime"
|
||||
:disabled="isdetail"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-ddTHH:mm:ss"
|
||||
:style="{ width: '100%' }"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.enterTime')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第四行 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 调试日期 -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.debugTime')" prop="debugTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.debugTime"
|
||||
:disabled="isdetail"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
:style="{ width: '100%' }"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.debugTime')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- 设备TT值 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.tvalue')" prop="tvalue">
|
||||
<el-input
|
||||
v-model="dataForm.tvalue"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.tvalue')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 调试时间 -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.DebugPeriod')" prop="debugPeriod">
|
||||
<el-input
|
||||
v-model="dataForm.debugPeriod"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.DebugPeriod')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- 单件产品加工时间 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.processingTime')" prop="processingTime">
|
||||
<el-input
|
||||
v-model="dataForm.processingTime"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.processingTime')])"
|
||||
clearable
|
||||
>
|
||||
<template slot="append">
|
||||
{{ $t('module.basicData.equipment.Sec') }}
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 供应商 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.supplier')" prop="supplierId">
|
||||
<el-select
|
||||
v-model="dataForm.supplierId"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.supplier')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option v-for="(item, index) in supplierList" :key="index" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第五行 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 知识产权 -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.intellectualProperty')" prop="intellectualProperty">
|
||||
<el-input
|
||||
v-model="dataForm.intellectualProperty"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.intellectualProperty')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- 功能描述 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.FunctionDescription')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.FunctionDescription')])"
|
||||
:disabled="isdetail"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 范围号 -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.rangeNumber')" prop="rangeNumber">
|
||||
<el-input-number
|
||||
v-model="dataForm.rangeNumber"
|
||||
:disabled="isdetail"
|
||||
:step="1"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.rangeNumber')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- 规格描述 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.Specifications')" prop="spec">
|
||||
<el-input
|
||||
v-model="dataForm.spec"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.Specifications')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第六行 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- PLC版本 -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.plcVersion')" prop="plcVersion">
|
||||
<el-input
|
||||
v-model="dataForm.plcVersion"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.plcVersion')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- EAP服务版本 -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.eapVersion')" prop="eapVersion">
|
||||
<el-input
|
||||
v-model="dataForm.eapVersion"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.eapVersion')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
|
||||
<!-- 第七行 -->
|
||||
<el-row :gutter="20">
|
||||
<!-- 保养周期(年) -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.maintenanceCycle')" prop="maintenanceCycle">
|
||||
<el-input
|
||||
v-model="dataForm.maintenanceCycle"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.maintenanceCycle')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- 保养持续时间(小时) -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.maintenanceTime')" prop="maintenanceTime">
|
||||
<el-input
|
||||
v-model="dataForm.maintenanceTime"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.maintenanceTime')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
|
||||
<!-- 第八行 -->
|
||||
<el-row>
|
||||
<!-- E10状态 -->
|
||||
<!-- <el-col :span="4">
|
||||
<el-form-item :label="$t('module.basicData.equipment.E10Status')" prop="estatus">
|
||||
<el-switch
|
||||
v-model="dataForm.estatus"
|
||||
:disabled="isdetail"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- 是否计算稼动率 -->
|
||||
<!-- <el-col :span="4">
|
||||
<el-form-item :label="$t('module.basicData.equipment.activiation')" prop="activiation">
|
||||
<el-switch
|
||||
v-model="dataForm.activiation"
|
||||
:disabled="isdetail"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- 是否通讯 -->
|
||||
<!-- <el-col :span="4">
|
||||
<el-form-item :label="$t('module.basicData.equipment.communication')" prop="communication">
|
||||
<el-switch
|
||||
v-model="dataForm.communication"
|
||||
:disabled="isdetail"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<!-- 控制状态(本地/远程) -->
|
||||
<!-- <el-col :span="4">
|
||||
<el-form-item :label="$t('module.basicData.equipment.controlStatus')" prop="controlStatus">
|
||||
<el-switch
|
||||
v-model="dataForm.controlStatus"
|
||||
:disabled="isdetail"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
active-text="远程"
|
||||
inactive-text="本地"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
|
||||
<!-- 第九行 -->
|
||||
<el-row
|
||||
v-if="dataForm.id"
|
||||
:gutter="20"
|
||||
style="margin: 0; margin-bottom: 8px; border: 1px solid #F5F5F5; border-radius: 4px; padding: 8px; background-color: #F5F5F5;"
|
||||
>
|
||||
<!-- 上传下载图片 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item v-if="!isdetail" :label="$t('module.basicData.equipment.equipmentImg')" prop="eImg">
|
||||
<el-upload
|
||||
ref="eImg"
|
||||
name="files"
|
||||
:data="extraUploadParams"
|
||||
:file-list="imgList"
|
||||
:action="uploadApi"
|
||||
:before-upload="validateImage"
|
||||
accept="image/*"
|
||||
multiple
|
||||
:on-success="saveUpload"
|
||||
:on-remove="deleteFile"
|
||||
>
|
||||
<el-button icon="el-icon-upload">
|
||||
<!-- {{ 'btn.upload' | i18nFilter }} -->
|
||||
{{ $t('module.basicData.equipment.uploadImg') }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else :label="$t('module.basicData.equipment.equipmentImg')" prop="upInfo">
|
||||
<div v-for="file in imgList" :key="file.id" style="display:flex;">
|
||||
<span style="flex: 1 auto;">
|
||||
{{ file.name | handleLimit }}
|
||||
</span>
|
||||
<el-button size="small" icon="el-icon-upload" @click="downloadFile(file.attachmentId)">
|
||||
{{ 'btn.download' | i18nFilter }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 上传下载设备信息 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item
|
||||
v-if="dataForm.id && !isdetail"
|
||||
:label="$t('module.basicData.equipment.equipmentInfo')"
|
||||
prop="eInfo"
|
||||
>
|
||||
<el-upload
|
||||
ref="eInfo"
|
||||
:on-success="saveUpload"
|
||||
name="files"
|
||||
:data="extraUploadParams"
|
||||
:file-list="fileList"
|
||||
:action="uploadApi"
|
||||
multiple
|
||||
:before-upload="validateFile"
|
||||
:on-remove="deleteFile"
|
||||
>
|
||||
<el-button icon="el-icon-upload">
|
||||
<!-- {{ 'btn.upload' | i18nFilter }} -->
|
||||
{{ $t('module.basicData.equipment.uploadAssets') }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="isdetail" :label="$t('module.basicData.equipment.equipmentInfo')" prop="upInfo">
|
||||
<div v-for="file in fileList" :key="file.id" style="display:flex;">
|
||||
<span style="flex: 1 auto;">
|
||||
{{ file.name | handleLimit }}
|
||||
</span>
|
||||
<el-button size="small" icon="el-icon-upload" @click="downloadFile(file.attachmentId)">
|
||||
{{ 'btn.download' | i18nFilter }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<small-title style="margin-top: 16px; padding-left: 8px">
|
||||
{{ $t('module.basicData.equipment.eqAttrDetail') }}
|
||||
</small-title>
|
||||
|
||||
<!-- 设备属性表格 -->
|
||||
<div class="attr-list" style="overflow:auto;height:380px">
|
||||
<base-table
|
||||
:top-btn-config="dataForm.id && !isdetail ? topBtnConfig : []"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="equipmentAttributeList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn v-if="!isdetail" slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="close">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button v-if="isdetail" type="success" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
|
||||
<el-button v-else type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
|
||||
<equipment-info-attr-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:equipment-id="dataForm.id"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
detail,
|
||||
update,
|
||||
add,
|
||||
getCode,
|
||||
saveFile,
|
||||
getFile,
|
||||
delFile,
|
||||
getEquipmentTypeList,
|
||||
getEquipmentGroupList,
|
||||
getEquipmentAttributeList,
|
||||
deleteEquipmentAttribute,
|
||||
getSupplierList
|
||||
} from '@/api/basicData/Equipment/equipmentInfo'
|
||||
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import equipmentInfoAttrAdd from './equipmentInfoAttr-add'
|
||||
import { uploadPath } from '@/api/basic'
|
||||
import { getUrl } from '@/api/file'
|
||||
|
||||
import { setAttributeListTableBtn, setAttributeListTableProps } from './equipment-info/tableConfig'
|
||||
import { setEquipmentInfoDataForm, setValidationRules } from './equipment-info/componentConfig'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
import { handleLimit } from '@/filters'
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
components: { BaseTable, MethodBtn, equipmentInfoAttrAdd, SmallTitle },
|
||||
filters: {
|
||||
handleLimit: val => handleLimit(val, 25)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableBtn: setAttributeListTableBtn(),
|
||||
tableProps: setAttributeListTableProps(),
|
||||
dataForm: setEquipmentInfoDataForm(),
|
||||
isdetail: false,
|
||||
listLoading: false,
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
visible: false,
|
||||
trueWidth: 200,
|
||||
equipmentAttributeList: [], // 设备属性列表，底部的表格
|
||||
supplierList: [],
|
||||
downloadList: [],
|
||||
fileList: [],
|
||||
imgList: [],
|
||||
extraUploadParams: {},
|
||||
uploadApi: uploadPath,
|
||||
equipmentTypeOptions: [],
|
||||
equipmentGroupOptions: [],
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 999
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
validationRules() {
|
||||
return setValidationRules(this)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getAttachments() {
|
||||
// 获取附件，包含图片和其他文件
|
||||
// const equipmentId = this.$route.query.id || null
|
||||
const equipmentId = this.dataForm.id
|
||||
// if (this.isdetail) {
|
||||
if (equipmentId) {
|
||||
this.fileList.splice(0)
|
||||
this.imgList.splice(0)
|
||||
|
||||
getFile({ equipmentId }).then(res => {
|
||||
if (res.data) {
|
||||
this.downloadList = res.data
|
||||
this.downloadList.forEach(item => {
|
||||
// 转换为本地列表所要是用的元数据
|
||||
const fileMeta = {
|
||||
id: item.id,
|
||||
name: item.fileUrl.split('/').pop(),
|
||||
url: item.fileUrl,
|
||||
equipmentId: item.equipmentId,
|
||||
typeCode: item.typeCode,
|
||||
// 以下是附件id，用于下载功能
|
||||
attachmentId: item.fileId
|
||||
}
|
||||
// 将元数据分流保存
|
||||
if (item.typeCode === 'equipmentInfoImage') {
|
||||
this.imgList.push(fileMeta)
|
||||
} else {
|
||||
this.fileList.push(fileMeta)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.downloadList.splice(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
init(id, isdetail) {
|
||||
this.isdetail = !!isdetail
|
||||
this.equipmentAttributeList.splice(0)
|
||||
this.dataForm = setEquipmentInfoDataForm()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.dataForm.id = id || null
|
||||
// 初始化时获取一次附件
|
||||
this.getAttachments()
|
||||
// 获取设备分组列表
|
||||
this.fetchList('groups')
|
||||
// 获取供应商列表
|
||||
this.fetchList('suppliers')
|
||||
|
||||
if (this.dataForm.id) {
|
||||
this.listLoading = true
|
||||
// 获取设备类型列表 (需要同步执行)
|
||||
this.fetchList('types').then(() => {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = refineData(res.data, [
|
||||
'id',
|
||||
'name',
|
||||
'code',
|
||||
'enName',
|
||||
'abbr',
|
||||
'equipmentTypeId',
|
||||
'groupId',
|
||||
'supplierId',
|
||||
'spec', // 规格描述
|
||||
'productionTime', // 生产日期
|
||||
'enterTime', // 进厂日期
|
||||
'tvalue',
|
||||
'processingTime',
|
||||
'manufacturer',
|
||||
'functions',
|
||||
'description', // 功能描述
|
||||
'remark',
|
||||
'maintenanceCycle', // default to 0
|
||||
'maintenanceTime' // default to 0
|
||||
])
|
||||
})
|
||||
})
|
||||
|
||||
// 获取设备属性列表
|
||||
this.fetchList('attributes')
|
||||
} else {
|
||||
// 获取设备编码
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
// 获取设备类型列表
|
||||
this.fetchList('types')
|
||||
}
|
||||
})
|
||||
|
||||
this.visible = true
|
||||
},
|
||||
|
||||
fetchList(type) {
|
||||
// type 三种类型，分别获取 3 种不同类型的数据
|
||||
// 为了避免重复代码过多
|
||||
const apiMap = {
|
||||
// 类型：接口函数
|
||||
types: getEquipmentTypeList,
|
||||
attributes: getEquipmentAttributeList,
|
||||
groups: getEquipmentGroupList,
|
||||
suppliers: getSupplierList
|
||||
}
|
||||
const vmDataNameMap = {
|
||||
types: 'equipmentTypeOptions',
|
||||
attributes: 'equipmentAttributeList', // 需要传递设备id
|
||||
groups: 'equipmentGroupOptions',
|
||||
suppliers: 'supplierList'
|
||||
}
|
||||
const queryParams = { ...this.listQuery }
|
||||
if (type === 'attributes') queryParams.equipmentId = this.dataForm.id
|
||||
if (type === 'suppliers') queryParams.enabled = 1
|
||||
|
||||
return apiMap[type](queryParams).then(response => {
|
||||
if (response.data.records) {
|
||||
this[vmDataNameMap[type]] = response.data.records
|
||||
} else {
|
||||
this[vmDataNameMap[type]].splice(0)
|
||||
}
|
||||
if (this.listLoading) this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
// 获取设备属性列表
|
||||
this.fetchList('attributes')
|
||||
},
|
||||
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.attrName}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
deleteEquipmentAttribute(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
// if (!this.dataForm.id) {
|
||||
// // 新增
|
||||
// this.dataForm.id = res.data.id
|
||||
// }
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
|
||||
// goback() {
|
||||
// this.$router.go(-1)
|
||||
// },
|
||||
|
||||
close() {
|
||||
if (this.dataForm.id) this.$emit('refreshDataList')
|
||||
else this.$emit('jumpToLatest')
|
||||
this.visible = false
|
||||
},
|
||||
|
||||
goEdit() {
|
||||
this.isdetail = false
|
||||
},
|
||||
|
||||
// 验证是否是图片格式
|
||||
validateImage(file) {
|
||||
this.extraUploadParams.typeCode = 'equipmentInfoImage'
|
||||
|
||||
const isRightSize = file.size / 1024 / 1024 < 10
|
||||
if (!isRightSize) {
|
||||
this.$message.error(this.$t('upload.picSizeAlarm'))
|
||||
}
|
||||
|
||||
const isAccept = new RegExp('image/*').test(file.type)
|
||||
if (!isAccept) {
|
||||
this.$message.error(this.$t('upload.picAlarm'))
|
||||
}
|
||||
return isRightSize && isAccept
|
||||
},
|
||||
|
||||
// 验证文件格式
|
||||
validateFile(file) {
|
||||
this.extraUploadParams.typeCode = 'equipmentInfoFile'
|
||||
|
||||
const isRightSize = file.size / 1024 / 1024 < 10
|
||||
if (!isRightSize) {
|
||||
this.$message.error(this.$t('upload.picSizeAlarm'))
|
||||
}
|
||||
return isRightSize
|
||||
},
|
||||
|
||||
deleteFile(file, filelist) {
|
||||
// 从服务器上删除文件
|
||||
delFile(file.id).then(res => {
|
||||
// 刷新本地对应的文件列表
|
||||
if (file.typeCode === 'equipmentInfoImage') {
|
||||
this.imgList.splice(this.imgList.findIndex(ele => ele.id === res.data.id), 1)
|
||||
} else {
|
||||
this.fileList.splice(this.fileList.findIndex(ele => ele.id === res.data.id), 1)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
saveUpload(response, file, filelist) {
|
||||
const data = {
|
||||
equipmentId: this.dataForm.id,
|
||||
fileId: response.data[0].id,
|
||||
fileName: response.data[0].fileName,
|
||||
fileUrl: response.data[0].fileUrl,
|
||||
typeCode: this.extraUploadParams.typeCode
|
||||
}
|
||||
filelist.pop()
|
||||
saveFile(data).then(res => {
|
||||
// 保存元数据
|
||||
const fileMeta = {
|
||||
url: response.data[0].fileUrl,
|
||||
name: response.data[0].fileUrl.split('/').pop(),
|
||||
typeCode: response.data[0].typeCode,
|
||||
id: res.data.id, // 必须在这里保存的id才算数
|
||||
// attachmentId: response.data[0].fileId // 这里加不加attachmentId无所谓
|
||||
equipmentId: this.dataForm.id
|
||||
}
|
||||
// 将数据合理地分流
|
||||
if (data.typeCode === 'equipmentInfoImage') {
|
||||
this.imgList.push(fileMeta)
|
||||
} else {
|
||||
this.fileList.push(fileMeta)
|
||||
}
|
||||
// 刷新一下，效果更好
|
||||
this.$forceUpdate()
|
||||
})
|
||||
},
|
||||
|
||||
downloadFile(attachmentId) {
|
||||
// 根据接口附件id是downloadList里项的fileId
|
||||
getUrl({
|
||||
attachmentId,
|
||||
type: 1
|
||||
}).then(response => {
|
||||
let fileName = ''
|
||||
const contentDisposition = response.headers['content-disposition']
|
||||
if (contentDisposition) {
|
||||
fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
|
||||
}
|
||||
const blob = new Blob([response.data])
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onload = e => {
|
||||
const a = document.createElement('a')
|
||||
a.download = fileName
|
||||
a.href = e.target.result
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-dialog >>> .el-dialog__body {
|
||||
padding: 30px 24px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
.drawer >>> .el-form,
|
||||
.drawer >>> .attr-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-24 16:31:46
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:append-to-body="true"
|
||||
width="30%"
|
||||
class="dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
>
|
||||
<!-- <small-title slot="title">
|
||||
{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title> -->
|
||||
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
class="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRules"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<!-- label-width="100px" -->
|
||||
<!-- 属性名 -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.AttributeName')" prop="attrName">
|
||||
<el-input
|
||||
v-model="dataForm.attrName"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.AttributeName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 属性值 -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.AttributeValue')" prop="attrValue">
|
||||
<el-input
|
||||
v-model="dataForm.attrValue"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.AttributeValue')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
|
||||
{{ 'btn.confirm' | i18nFilter }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add } from '@/api/basicData/Equipment/equipmentInfoAttr'
|
||||
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
equipmentId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
btnLoading: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
attrName: '',
|
||||
attrValue: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRules: {
|
||||
attrName: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.AttributeName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
attrValue: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.AttributeValue')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.btnLoading = false
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.btnLoading = true
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
// 需要额外参数：equipmentId
|
||||
ajaxAction({ ...this.dataForm, equipmentId: this.equipmentId }).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog >>> .el-dialog__body {
|
||||
padding: 30px 24px;
|
||||
}
|
||||
|
||||
.dialog >>> .el-form-item__label {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
542
src/views/basicData/Equipment/components/equipmentLink-add.vue
Normal file
542
src/views/basicData/Equipment/components/equipmentLink-add.vue
Normal file
@@ -0,0 +1,542 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:58
|
||||
* @enName:
|
||||
-->
|
||||
<template>
|
||||
<div style="margin:20px">
|
||||
<div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">
|
||||
{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</div>
|
||||
<div style="margin:0 15px">
|
||||
<el-row :gutter="15">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
label-width="120px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.WiredEquipment')" prop="name">
|
||||
<el-input v-model="dataForm.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.WiredEquipment')])" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.WiredCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.WiredCode')])" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.EnglishName')" prop="enName">
|
||||
<el-input v-model="dataForm.enName" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.EnglishName')])" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.Abbreviation')" prop="abbr">
|
||||
<el-input v-model="dataForm.abbr" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Abbreviation')])" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.Manufacturer')" prop="manufacturer">
|
||||
<el-input
|
||||
v-model="dataForm.manufacturer"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Manufacturer')])"
|
||||
clearable
|
||||
:style="{width: '100%'}"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.Specs')" prop="spec">
|
||||
<el-input v-model="dataForm.spec" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Specs')])" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.productionTime')" prop="productionTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.productionTime"
|
||||
:disabled="isdetail"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
:style="{width: '100%'}"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.productionTime')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.enterTime')" prop="enterTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.enterTime"
|
||||
:disabled="isdetail"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
:style="{width: '100%'}"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.enterTime')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.debugTime')" prop="debugTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.debugTime"
|
||||
:disabled="isdetail"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
:style="{width: '100%'}"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.debugTime')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.DebugPeriod')" prop="debugPeriod">
|
||||
<el-input v-model="dataForm.debugPeriod" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.DebugPeriod')])" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.connectUpperDevice')" prop="connectUpperDevice">
|
||||
<el-input
|
||||
v-model="dataForm.connectUpperDevice"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.connectUpperDevice')])"
|
||||
clearable
|
||||
:style="{width: '100%'}"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.equipment.connectLowerDevice')" prop="connectLowerDevice">
|
||||
<el-input
|
||||
v-model="dataForm.connectLowerDevice"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.connectLowerDevice')])"
|
||||
clearable
|
||||
:style="{width: '100%'}"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.CurrentState')" prop="currentStatus">
|
||||
<el-select
|
||||
v-model="dataForm.currentStatus"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.CurrentState')])"
|
||||
clearable
|
||||
:style="{width: '100%'}"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in currentStatusOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable :style="{width: '100%'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item v-if="listQuery.connectingDeviceId && !isdetail" :label="$t('module.basicData.equipment.equipmentImg')" prop="eImg">
|
||||
<el-upload
|
||||
ref="eImg"
|
||||
name="files"
|
||||
:data="typeCode"
|
||||
:file-list="eImgfileList"
|
||||
:action="eImgAction"
|
||||
:before-upload="eImgBeforeUpload"
|
||||
accept="image/*"
|
||||
:on-success="saveUpload"
|
||||
>
|
||||
<el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isdetail" :label="$t('module.basicData.equipment.equipmentImg')" prop="upInfo">
|
||||
<div v-for="item in imgList" :key="item.id">
|
||||
{{ item.fileName }} <el-button size="small" type="primary" icon="el-icon-upload" @click="downloadFile(item.fileId)">{{ 'btn.download' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item v-if="listQuery.connectingDeviceId && !isdetail" :label="$t('module.basicData.equipment.equipmentInfo')" prop="upInfo">
|
||||
<el-upload
|
||||
ref="upInfo"
|
||||
name="files"
|
||||
:data="typeCode"
|
||||
:file-list="upInfofileList"
|
||||
:action="upInfoAction"
|
||||
multiple
|
||||
:before-upload="upInfoBeforeUpload"
|
||||
:on-success="saveUpload"
|
||||
>
|
||||
<el-button size="small" type="primary" icon="el-icon-upload">{{ 'btn.upload' | i18nFilter }}</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="isdetail" :label="$t('module.basicData.equipment.equipmentInfo')" prop="upInfo">
|
||||
<div v-for="item in fileList" :key="item.id">
|
||||
{{ item.fileName }} <el-button size="small" type="primary" icon="el-icon-upload" @click="downloadFile(item.fileId)">{{ 'btn.download' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div style="margin:20px">
|
||||
<el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
|
||||
<span v-if="!isdetail">
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
<el-button v-if="listQuery.connectingDeviceId" type="primary" @click="addNew()">{{ 'btn.addattr' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
<div style="height:380px;overflow:auto">
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
>
|
||||
<method-btn
|
||||
v-if="!isdetail"
|
||||
slot="handleBtn"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
</div>
|
||||
</div>
|
||||
<equipment-link-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :connecting-device-id="listQuery.connectingDeviceId" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import {
|
||||
equipmentLinkDetail,
|
||||
equipmentLinkUpdate,
|
||||
equipmentLinkAdd,
|
||||
equipmentLinkCode,
|
||||
equipmentLinkFileAdd,
|
||||
getEquipmentLinkFile
|
||||
} from '@/api/basicData/Equipment/equipmentLink'
|
||||
import { equipmentLinkAttrList, equipmentLinkAttrDelete } from '@/api/basicData/Equipment/equipmentLinkAttr'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import equipmentLinkAttrAdd from './equipmentLinkAttr-add'
|
||||
import { uploadPath } from '@/api/basic'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import { getUrl } from '@/api/file'
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.visual.AttributeName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.visual.AttributeCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: { BaseTable, MethodBtn, equipmentLinkAttrAdd },
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
enName: '',
|
||||
abbr: '',
|
||||
manufacturer: '',
|
||||
spec: '',
|
||||
productionTime: '',
|
||||
enterTime: '',
|
||||
debugTime: '',
|
||||
debugPeriod: '',
|
||||
connectUpperDevice: '',
|
||||
connectLowerDevice: '',
|
||||
currentStatus: '',
|
||||
remark: '',
|
||||
eImg: null,
|
||||
upInfo: null
|
||||
},
|
||||
rules: {
|
||||
name: [{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.WiredEquipment')]),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
code: [{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.WiredCode')]),
|
||||
trigger: 'blur'
|
||||
}]
|
||||
},
|
||||
typeCode: {},
|
||||
eImgAction: uploadPath,
|
||||
eImgfileList: [],
|
||||
upInfoAction: uploadPath,
|
||||
upInfofileList: [],
|
||||
currentStatusOptions: [{
|
||||
'label': '正常',
|
||||
'value': 0
|
||||
}, {
|
||||
'label': '暂停',
|
||||
'value': 1
|
||||
}, {
|
||||
'label': '维修',
|
||||
'value': 2
|
||||
}],
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 990,
|
||||
connectingDeviceId: ''
|
||||
},
|
||||
isdetail: false,
|
||||
downloadList: [],
|
||||
fileList: [],
|
||||
imgList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.listQuery.connectingDeviceId = this.$route.query.id
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.isdetail = false
|
||||
this.isdetail = Boolean(this.$route.query.isdetail)
|
||||
if (this.isdetail) {
|
||||
const data =
|
||||
{
|
||||
'connectingDeviceId': this.listQuery.connectingDeviceId
|
||||
}
|
||||
getEquipmentLinkFile(data).then(res => {
|
||||
this.downloadList = res.data
|
||||
this.downloadList.forEach(item => {
|
||||
if (item.typeCode === 'equipmentLinkImage') {
|
||||
this.imgList.push(item)
|
||||
} else {
|
||||
this.fileList.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
this.list.splice(0, this.list.length)
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.listQuery.connectingDeviceId) {
|
||||
equipmentLinkDetail(this.listQuery.connectingDeviceId).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
equipmentLinkAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
equipmentLinkCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
equipmentLinkAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
equipmentLinkAttrDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'abbr': this.dataForm.abbr,
|
||||
'code': this.dataForm.code,
|
||||
'connectLowerDevice': this.dataForm.connectLowerDevice,
|
||||
'connectUpperDevice': this.dataForm.connectUpperDevice,
|
||||
'currentStatus': this.dataForm.currentStatus,
|
||||
'debugTime': this.dataForm.debugTime,
|
||||
'enName': this.dataForm.enName,
|
||||
'enterTime': this.dataForm.enterTime,
|
||||
'manufacturer': this.dataForm.manufacturer,
|
||||
'name': this.dataForm.name,
|
||||
'productionTime': this.dataForm.productionTime,
|
||||
'remark': this.dataForm.remark,
|
||||
'spec': this.dataForm.spec,
|
||||
'debugPeriod': this.dataForm.debugPeriod,
|
||||
'id': this.listQuery.connectingDeviceId
|
||||
}
|
||||
if (this.listQuery.connectingDeviceId) {
|
||||
equipmentLinkUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
})
|
||||
} else {
|
||||
equipmentLinkAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
this.listQuery.connectingDeviceId = res.data.id
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
goEdit() {
|
||||
this.isdetail = false
|
||||
},
|
||||
eImgBeforeUpload(file) {
|
||||
this.typeCode.typeCode = 'equipmentLinkImage'
|
||||
const isRightSize = file.size / 1024 / 1024 < 10
|
||||
if (!isRightSize) {
|
||||
this.$message.error(this.$t('upload.picSizeAlarm'))
|
||||
}
|
||||
const isAccept = new RegExp('image/*').test(file.type)
|
||||
if (!isAccept) {
|
||||
this.$message.error(this.$t('upload.picAlarm'))
|
||||
}
|
||||
return isRightSize && isAccept
|
||||
},
|
||||
upInfoBeforeUpload(file) {
|
||||
this.typeCode.typeCode = 'equipmentLinkFile'
|
||||
const isRightSize = file.size / 1024 / 1024 < 10
|
||||
if (!isRightSize) {
|
||||
this.$message.error(this.$t('upload.picSizeAlarm'))
|
||||
}
|
||||
return isRightSize
|
||||
},
|
||||
submitUpload() {
|
||||
this.$refs['upInfo'].submit()
|
||||
},
|
||||
saveUpload(res) {
|
||||
const data =
|
||||
{
|
||||
'connectingDeviceId': this.listQuery.connectingDeviceId,
|
||||
'fileId': res.data[0].id,
|
||||
'fileName': res.data[0].fileName,
|
||||
'fileUrl': res.data[0].fileUrl,
|
||||
'typeCode': this.typeCode.typeCode
|
||||
}
|
||||
equipmentLinkFileAdd(data).then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
downloadFile(id) {
|
||||
getUrl({
|
||||
attachmentId: id,
|
||||
type: 1
|
||||
}).then(response => {
|
||||
let fileName = ''
|
||||
const contentDisposition = response.headers['content-disposition']
|
||||
if (contentDisposition) {
|
||||
fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
|
||||
}
|
||||
const blob = new Blob([response.data])
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onload = (e) => {
|
||||
const a = document.createElement('a')
|
||||
a.download = fileName
|
||||
a.href = e.target.result
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-25 16:31:54
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer
|
||||
:append-to-body="true"
|
||||
:show-close="false"
|
||||
:visible.sync="visible"
|
||||
size="40%"
|
||||
>
|
||||
<div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">
|
||||
{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</div>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.visual.AttributeName')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeName')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.AttributeCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeCode')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { equipmentLinkAttrDetail, equipmentLinkAttrUpdate, equipmentLinkAttrAdd, equipmentLinkAttrCode } from '@/api/basicData/Equipment/equipmentLinkAttr'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
connectingDeviceId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
btnLoading: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeCode')]), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.btnLoading = false
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
equipmentLinkAttrDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm.name = res.data.name
|
||||
this.dataForm.code = res.data.code
|
||||
this.dataForm.remark = res.data.remark
|
||||
})
|
||||
} else {
|
||||
equipmentLinkAttrCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.btnLoading = true
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'name': this.dataForm.name,
|
||||
'code': this.dataForm.code,
|
||||
'remark': this.dataForm.remark,
|
||||
'connectingDeviceId': this.connectingDeviceId,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
equipmentLinkAttrUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
equipmentLinkAttrAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
371
src/views/basicData/Equipment/components/equipmentType-add.vue
Normal file
371
src/views/basicData/Equipment/components/equipmentType-add.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-28 21:16:51
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="isdetail ? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
width="40%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
class="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRules"
|
||||
label-position="top"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<!-- label-width="110px" -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 设备类型名称 -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentTypeName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentTypeName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 设备类型编码 -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentTypeCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentTypeCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" />
|
||||
<el-col :span="12" />
|
||||
</el-row>
|
||||
|
||||
<!-- 父类 -->
|
||||
<!-- <el-form-item :label="$t('module.basicData.equipment.parentName')" prop="parentA">
|
||||
<el-cascader
|
||||
v-model="dataForm.parentA"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.parentName')])"
|
||||
:props="{ checkStrictly: true }"
|
||||
:options="parentArr"
|
||||
filterable
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
:options="parentList"
|
||||
@change="setParent"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
|
||||
<!-- 上传资料 -->
|
||||
<el-form-item v-if="dataForm.id && !isdetail" :label="$t('module.basicData.equipment.upload')" prop="upInfo">
|
||||
<el-upload
|
||||
ref="upInfo"
|
||||
name="files"
|
||||
:show-file-list="false"
|
||||
:data="uploadExtraParams"
|
||||
:file-list="uploadFileList"
|
||||
:action="uploadDestination"
|
||||
multiple
|
||||
:before-upload="upInfoBeforeUpload"
|
||||
:on-success="saveUpload"
|
||||
>
|
||||
<!-- 上传多个文件 -->
|
||||
<el-button size="small" type="primary" icon="el-icon-upload">
|
||||
{{ $t('module.basicData.equipment.chooseFiles') }}
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<!-- 设备信息 -->
|
||||
<el-form-item
|
||||
v-if="dataForm.id || isdetail"
|
||||
:label="$t('module.basicData.equipment.equipmentInfo')"
|
||||
prop="upInfo"
|
||||
>
|
||||
<div v-for="item in fileList" :key="item.id" style="padding: 4px; display: flex; align-items: center;">
|
||||
<span style="padding: 4px 8px; border-radius: 2px; line-height: 18px; font-size: 14px; background: #efefef;">
|
||||
{{ item.fileName }}
|
||||
</span>
|
||||
<span class="hover" style="margin-left: 24px;" @click="downloadFile(item.fileId)">
|
||||
<i class="el-icon-upload" />
|
||||
{{ 'btn.download' | i18nFilter }}
|
||||
</span>
|
||||
<span v-if="!isdetail" class="danger hover" style="margin-left: 8px;" @click="handleDelFile(item.id)">
|
||||
{{ 'btn.delete' | i18nFilter }}
|
||||
</span>
|
||||
<!-- <el-button size="small" type="primary" icon="el-icon-upload" @click="downloadFile(item.fileId)">
|
||||
{{ 'btn.download' | i18nFilter }}
|
||||
</el-button> -->
|
||||
<!-- <el-button v-if="!isdetail" size="small" type="danger" @click="handleDelFile(item.id)">
|
||||
{{ 'btn.delete' | i18nFilter }}
|
||||
</el-button> -->
|
||||
</div>
|
||||
<div v-if="fileList.length === 0" style="color: #999">
|
||||
暂无资料
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 按钮组 -->
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button v-if="!isdetail" type="warning" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button v-if="!isdetail" type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button v-if="!isdetail" type="warning" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button v-if="!isdetail" type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
detail,
|
||||
update,
|
||||
add,
|
||||
getCode,
|
||||
equipmentTypeFileAdd,
|
||||
delFile,
|
||||
getFileList as getSavedFileList
|
||||
} from '@/api/basicData/Equipment/equipmentType'
|
||||
import { uploadPath } from '@/api/basic' // form表单形式文件上传的接口地址
|
||||
import { getUrl } from '@/api/file' // 获取文件流|下载文件的接口
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
isdetail: false,
|
||||
// parentList: [],
|
||||
dataForm: {
|
||||
id: null,
|
||||
name: '',
|
||||
code: '',
|
||||
remark: ''
|
||||
// parentA: '',
|
||||
// parentName: '',
|
||||
// parentId: '',
|
||||
},
|
||||
uploadExtraParams: {
|
||||
typeCode: null // 上传接口需要的额外参数:文件类型
|
||||
},
|
||||
uploadDestination: uploadPath,
|
||||
uploadFileList: [],
|
||||
fileList: [],
|
||||
dataRules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.EquipmentTypeName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.EquipmentTypeCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 给表单自动添加编码
|
||||
fillCode() {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
},
|
||||
// 清空表单并重新获取一个类型编码
|
||||
resetForm() {
|
||||
this.$refs.dataForm.resetFields()
|
||||
this.fillCode()
|
||||
},
|
||||
// 初始化窗口
|
||||
init(id, isdetail) {
|
||||
// 清空上传资料部分的缓存
|
||||
this.uploadFileList.splice(0)
|
||||
this.fileList.splice(0)
|
||||
|
||||
this.isdetail = !!isdetail
|
||||
|
||||
if (!this.dataForm.id && !this.isdetail) this.fillCode()
|
||||
|
||||
if (this.isdetail || id) {
|
||||
// 详情页面就取回已经上传的文件列表
|
||||
getSavedFileList({ equipmentTypeId: id }).then(res => {
|
||||
this.fileList = res.data
|
||||
this.fileList.forEach(item => {
|
||||
item.fileType = item.fileUrl.split('.')[1]
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 获取父类以供选择 -- 此功能暂时不用了
|
||||
// listAll().then(res => {
|
||||
// res.data.forEach(item => {
|
||||
// this.setArr(item)
|
||||
// })
|
||||
// this.parentList = res.data
|
||||
// })
|
||||
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
// this.dataForm.parentA = res.data.parentId + ',' + res.data.parentName
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// setArr(obj) {
|
||||
// obj.value = obj.id + ',' + obj.name
|
||||
// obj.label = obj.name
|
||||
// if (obj.children) {
|
||||
// obj.children.forEach(item => {
|
||||
// this.setArr(item)
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// setParent(key) {
|
||||
// console.log("parentA ===> ", this.dataForm.parentA)
|
||||
// const str = key[key.length - 1]
|
||||
// if (str) {
|
||||
// this.dataForm.parentId = str.substring(0, str.indexOf(','))
|
||||
// this.dataForm.parentName = str.substring(str.indexOf(',') + 1)
|
||||
// }
|
||||
// },
|
||||
upInfoBeforeUpload(file) {
|
||||
this.uploadExtraParams.typeCode = 'equipmentTypeFile'
|
||||
const isRightSize = file.size / 1024 / 1024 < 10
|
||||
if (!isRightSize) {
|
||||
this.$message.error(this.$t('upload.picSizeAlarm'))
|
||||
}
|
||||
return isRightSize
|
||||
},
|
||||
submitUpload() {
|
||||
this.$refs['upInfo'].submit()
|
||||
},
|
||||
saveUpload(res) {
|
||||
const data = {
|
||||
equipmentTypeId: this.dataForm.id,
|
||||
fileId: res.data[0].id,
|
||||
fileName: res.data[0].fileName,
|
||||
fileUrl: res.data[0].fileUrl,
|
||||
typeCode: this.uploadExtraParams.typeCode
|
||||
}
|
||||
equipmentTypeFileAdd(data).then(res => {
|
||||
console.log(res)
|
||||
this.init(this.dataForm.id)
|
||||
})
|
||||
},
|
||||
downloadFile(id) {
|
||||
getUrl({
|
||||
attachmentId: id,
|
||||
type: 1
|
||||
}).then(response => {
|
||||
let fileName = ''
|
||||
const contentDisposition = response.headers['content-disposition']
|
||||
if (contentDisposition) {
|
||||
fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
|
||||
}
|
||||
const blob = new Blob([response.data])
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onload = e => {
|
||||
const a = document.createElement('a')
|
||||
a.download = fileName
|
||||
a.href = e.target.result
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelFile(id) {
|
||||
delFile({ id }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.init(this.dataForm.id)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dataForm >>> .el-form-item__label {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: rgb(255, 70, 70);
|
||||
}
|
||||
|
||||
.hover.danger:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.hover:hover {
|
||||
color: #0b58ff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:31:01
|
||||
* @enName:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer
|
||||
:visible.sync="visible"
|
||||
:show-close="false"
|
||||
:wrapper-closable="false"
|
||||
size="60%"
|
||||
>
|
||||
<div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
|
||||
<div style="margin:0 15px">
|
||||
<el-form ref="dataForm" :model="dataForm" label-width="100px">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentTypeName')" prop="name">
|
||||
<el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentTypeName')])" readonly />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipment.EquipmentTypeCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EquipmentTypeCode')])" readonly />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="drawer-footer">
|
||||
<el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button v-if="listQuery.equipmentTypeId && !isDetail" type="primary" @click="addNew()">{{ 'btn.adddetail' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
>
|
||||
<method-btn
|
||||
v-if="!isDetail"
|
||||
slot="handleBtn"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
</div>
|
||||
<equipmentAlarm-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :equipment-type-id="listQuery.equipmentTypeId" @refreshDataList="getList" />
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { equipmentAlarmAttrList, equipmentAlarmAttrDelete } from '@/api/basicData/Equipment/equipmentAlarmAttr'
|
||||
import {
|
||||
equipmentTypeDetail
|
||||
} from '@/api/basicData/Equipment/equipmentType'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import equipmentAlarmAttrAdd from './equipmentTypeAlarmAttr-add'
|
||||
import { timeFormatter } from '@/filters'
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmType',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmType'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmGrade',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmLevel'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'alarmContent',
|
||||
label: i18n.t('module.basicData.alarmManagement.AlarmContent'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: { BaseTable, MethodBtn, equipmentAlarmAttrAdd },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
addOrUpdateVisible: false,
|
||||
categoryArr: [],
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: ''
|
||||
},
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 990,
|
||||
equipmentTypeId: ''
|
||||
},
|
||||
isDetail: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id, isDetail) {
|
||||
this.isDetail = false
|
||||
this.isDetail = isDetail
|
||||
this.dataForm.id = id || ''
|
||||
this.listQuery.equipmentTypeId = ''
|
||||
this.list.splice(0, this.list.length)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
equipmentTypeDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
this.listQuery.equipmentTypeId = this.dataForm.id
|
||||
equipmentAlarmAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
equipmentAlarmAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
equipmentAlarmAttrDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
goback() {
|
||||
this.$emit('refreshDataList')
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-25 16:32:09
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer
|
||||
:append-to-body="true"
|
||||
:show-close="false"
|
||||
:visible.sync="visible"
|
||||
size="40%"
|
||||
>
|
||||
<div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmCode')" prop="code">
|
||||
<el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmCode')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmType')" prop="alarmType">
|
||||
<el-input v-model="dataForm.alarmType" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmType')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmLevel')" prop="alarmGrade">
|
||||
<el-input v-model="dataForm.alarmGrade" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmLevel')])" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.alarmManagement.AlarmContent')" prop="alarmContent">
|
||||
<el-input v-model="dataForm.alarmContent" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.alarmManagement.AlarmContent')])" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { equipmentAlarmAttrDetail, equipmentAlarmAttrUpdate, equipmentAlarmAttrAdd } from '@/api/basicData/Equipment/equipmentAlarmAttr'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
equipmentTypeId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
btnLoading: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
alarmType: '',
|
||||
code: '',
|
||||
alarmGrade: '',
|
||||
alarmContent: ''
|
||||
},
|
||||
dataRule: {
|
||||
code: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.AlarmCode')]), trigger: 'blur' }
|
||||
],
|
||||
alarmContent: [
|
||||
{ required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.alarmManagement.alarmContent')]), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.btnLoading = false
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
equipmentAlarmAttrDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.btnLoading = true
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
'alarmType': this.dataForm.alarmType,
|
||||
'code': this.dataForm.code,
|
||||
'alarmGrade': this.dataForm.alarmGrade,
|
||||
'alarmContent': this.dataForm.alarmContent,
|
||||
'equipmentTypeId': this.equipmentTypeId,
|
||||
'id': this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
equipmentAlarmAttrUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
equipmentAlarmAttrAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-footer {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 50px;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-19 15:20:00
|
||||
* @enName:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
width="40%"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
class="data-form"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<!-- label-width="80px" -->
|
||||
<!-- <el-row :gutter="20">
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row> -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.maintenancePeriod')" prop="maintenancePeriod">
|
||||
<el-input
|
||||
v-model="dataForm.maintenancePeriod"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.maintenancePeriod')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.equipment.PeriodCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.PeriodCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/Equipment/maintenanceCycle'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
maintenancePeriod: '',
|
||||
code: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
maintenancePeriod: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.maintenancePeriod')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.PeriodCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = refineData(res.data, ['id', 'maintenancePeriod', 'code', 'remark'])
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.data-form >>> .el-form-item__label {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
145
src/views/basicData/Equipment/components/maintenanceType-add.vue
Normal file
145
src/views/basicData/Equipment/components/maintenanceType-add.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-19 15:20:00
|
||||
* @enName:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
width="40%"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()">
|
||||
<!-- label-width="110px" -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.equipment.RepairTypeName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.RepairTypeName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.equipment.RepairTypeCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.RepairTypeCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.equipment.EnglishName')" prop="enName">
|
||||
<el-input
|
||||
v-model="dataForm.enName"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.EnglishName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="20">
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row> -->
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/Equipment/maintenanceType'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
enName: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.RepairTypeName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.RepairTypeCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = refineData(res.data, ['id', 'name', 'code', 'enName', 'remark'])
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
225
src/views/basicData/Equipment/components/spareParts-add.vue
Normal file
225
src/views/basicData/Equipment/components/spareParts-add.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-25 16:25:17
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
width="50%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()">
|
||||
<!-- label-width="140px" -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 备件名称 -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.SparepartName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.SparepartName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 备件编码 -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.SparepartCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.SparepartCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 备件型号 -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.SparepartModel')" prop="model">
|
||||
<el-input
|
||||
v-model="dataForm.model"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.SparepartModel')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 规格 -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.Spec')" prop="specifications">
|
||||
<el-input
|
||||
v-model="dataForm.specifications"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.Spec')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 使用寿命(小时) -->
|
||||
<el-form-item :label="$t('module.basicData.equipment.life')" prop="life">
|
||||
<el-input
|
||||
v-model.number="dataForm.life"
|
||||
type="number"
|
||||
min="0"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.equipment.life')])"
|
||||
clearable
|
||||
>
|
||||
<template slot="append">
|
||||
{{ $t('module.basicData.equipment.hours') }}
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 单位 id -->
|
||||
<el-form-item :label="$t('module.basicData.visual.unit')" prop="dictDataId">
|
||||
<el-select
|
||||
v-model="dataForm.dictDataId"
|
||||
filterable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.unit')])"
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="item in unitList" :key="item.dataCode" :label="item.dataName" :value="item.dataCode" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/Equipment/spareParts'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: null,
|
||||
name: '',
|
||||
code: '',
|
||||
model: '',
|
||||
life: null,
|
||||
dictDataId: '', // 单位id
|
||||
description: '',
|
||||
specifications: ''
|
||||
},
|
||||
unitList: [],
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.SparepartName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.SparepartCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
model: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.SparepartModel')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
dictDataId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.equipment.unit')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
// 填充单位
|
||||
this.getUnitList()
|
||||
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = refineData(res.data, [
|
||||
'id',
|
||||
'name',
|
||||
'code',
|
||||
'life',
|
||||
'model',
|
||||
'specifications',
|
||||
'dictDataId',
|
||||
'description'
|
||||
])
|
||||
console.log('dataform :', this.dataForm)
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 从本地缓存获取单位数据字典
|
||||
getUnitList() {
|
||||
const unitDataList = this.$store.getters.dictList.find(item => item.dictTypeId === '1')?.dataList
|
||||
this.unitList = unitDataList
|
||||
},
|
||||
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
src/views/basicData/Equipment/components/viewDetailBtn.vue
Normal file
28
src/views/basicData/Equipment/components/viewDetailBtn.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-3-8 10:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-19 10:00:00
|
||||
* @Description: 查看详情的更新版本，更新日期2022.4.19
|
||||
-->
|
||||
<template>
|
||||
<span>
|
||||
<el-button type="text" @click="emitClick">{{ injectData.buttonContent }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitClick() {
|
||||
this.$emit('emitData', { action: this.injectData.actionName || 'view-detail-action', data: { id: this.injectData.id }})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
231
src/views/basicData/Equipment/detectSystemSettings.vue
Normal file
231
src/views/basicData/Equipment/detectSystemSettings.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:09
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { equipmentDetectAreaSystemList, equipmentDetectAreaSystemDelete } from '@/api/basicData/Equipment/equipmentDetectAreaSystem'
|
||||
import { equipmentDetectAreaList } from '@/api/basicData/Equipment/equipmentDetectArea'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: 'btn.detail'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'detectArea',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.DetectionArea'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'DetectSystemSettings',
|
||||
components: { TopTitle, HeadForm, Pagination, BaseTable, MethodBtn },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: this.$t('module.basicData.equipmentDetectInfo.DetectionArea'),
|
||||
selectOptions: [],
|
||||
param: 'detectAreaId'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.areaList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
equipmentDetectAreaSystemDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
} else {
|
||||
this.addNew(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
areaList() {
|
||||
const data = {
|
||||
current: 1,
|
||||
size: 500
|
||||
}
|
||||
equipmentDetectAreaList(data).then(response => {
|
||||
if (response.data.records) {
|
||||
this.headFormConfig[0].selectOptions = response.data.records.map(item => {
|
||||
return { id: item.id, name: item.distributionArea }
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.detectAreaId = this.headFormValue.detectAreaId
|
||||
equipmentDetectAreaSystemList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, isdetail) {
|
||||
this.$router.push({
|
||||
name: 'detectSystemSettingsAdd',
|
||||
query: {
|
||||
id: id,
|
||||
isdetail: isdetail
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
233
src/views/basicData/Equipment/equipmentDetectArea.vue
Normal file
233
src/views/basicData/Equipment/equipmentDetectArea.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:12
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { equipmentDetectAreaList, equipmentDetectAreaDelete } from '@/api/basicData/Equipment/equipmentDetectArea'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: 'btn.detail'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.WiredCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'detectArea',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.DetectionArea'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'distributionArea',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.IssueArea'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Material',
|
||||
components: { TopTitle, Pagination, BaseTable, MethodBtn, HeadForm },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
detectArea: '',
|
||||
detectAreaArr: [{
|
||||
value: 'Backend',
|
||||
label: 'Backend'
|
||||
}, {
|
||||
value: 'Frontend',
|
||||
label: 'Frontend'
|
||||
}, {
|
||||
value: 'Midend',
|
||||
label: 'Midend'
|
||||
}],
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.equipmentDetectInfo.DetectionArea'),
|
||||
param: 'detectArea'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.detectArea}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
equipmentDetectAreaDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
} else {
|
||||
this.addNew(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.detectArea = this.headFormValue.detectArea
|
||||
equipmentDetectAreaList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, isdetail) {
|
||||
this.$router.push({
|
||||
name: 'equipmentDetectAreaAdd',
|
||||
query: {
|
||||
id: id,
|
||||
isdetail: isdetail
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
220
src/views/basicData/Equipment/equipmentDetectParam.vue
Normal file
220
src/views/basicData/Equipment/equipmentDetectParam.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:18
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :inline="true" @keyup.enter.native="getDataList()">
|
||||
<el-form-item :label="keyName">
|
||||
<el-select v-model="detectDistributionAreaId" :placeholder="placeholderName" clearable>
|
||||
<el-option
|
||||
v-for="item in distributionAreaArr"
|
||||
:key="item.id"
|
||||
:label="item.distributionArea"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { equipmentDetectAreaAttrList, equipmentDetectAreaAttrDelete } from '@/api/basicData/Equipment/equipmentDetectAreaAttr'
|
||||
import { equipmentDetectAreaList } from '@/api/basicData/Equipment/equipmentDetectArea'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
},
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: 'btn.detail'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'distributionArea',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.IssueArea'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'detectArea',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.DetectionArea'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'function',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.EquipmentFunction'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Material',
|
||||
components: { Pagination, BaseTable, MethodBtn },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyName: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholderName: this.$t('module.basicData.equipmentDetectInfo.IssueArea'),
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
},
|
||||
detectDistributionAreaId: '',
|
||||
distributionAreaArr: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.code}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
equipmentDetectAreaAttrDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data)
|
||||
} else {
|
||||
this.addNew(raw.data, true)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
const params = {
|
||||
current: 1,
|
||||
size: 550
|
||||
}
|
||||
equipmentDetectAreaList(params).then(response => {
|
||||
if (response.data.records) {
|
||||
this.distributionAreaArr = response.data.records
|
||||
} else {
|
||||
this.distributionAreaArr.splice(0, this.distributionAreaArr.length)
|
||||
}
|
||||
})
|
||||
this.listLoading = true
|
||||
this.listQuery.detectDistributionAreaId = this.detectDistributionAreaId
|
||||
equipmentDetectAreaAttrList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(data, isdetail) {
|
||||
this.$router.push({
|
||||
name: 'equipmentDetectParamAdd',
|
||||
query: {
|
||||
data: data,
|
||||
isdetail: isdetail
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
225
src/views/basicData/Equipment/equipmentDetectSystem.vue
Normal file
225
src/views/basicData/Equipment/equipmentDetectSystem.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:21
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<equipmentDetectSystem-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { equipmentDetectSystemList, equipmentDetectSystemDelete } from '@/api/basicData/Equipment/equipmentDetectSystem'
|
||||
import equipmentDetectSystemAdd from './components/equipmentDetectSystem-add.vue'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import i18n from '@/lang'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.code'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'abbr',
|
||||
label: i18n.t('module.basicData.equipmentDetectInfo.equipmentDetectSystemAbbr'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.equipment.FunctionDescription'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentDetectSystem',
|
||||
components: { TopTitle, Pagination, BaseTable, MethodBtn, HeadForm, equipmentDetectSystemAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: '',
|
||||
code: ''
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.equipmentDetectInfo.equipmentDetectSystemName'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
equipmentDetectSystemDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
this.listQuery.code = this.headFormValue.name
|
||||
equipmentDetectSystemList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
346
src/views/basicData/Equipment/equipmentInfo.vue
Normal file
346
src/views/basicData/Equipment/equipmentInfo.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:26
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="equipmentList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
@emitFun="handleTableEvents"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="calculateWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
|
||||
<equipment-info-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="getList"
|
||||
@jumpToLatest="getList({ current: lastPage })"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
|
||||
import { list, del, exportEquipments } from '@/api/basicData/Equipment/equipmentInfo'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
// import dataDict from '@/filters/DataDict'
|
||||
import EquipmentInfoAdd from './components/equipmentInfoAdd.vue'
|
||||
import ViewDetailBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
// {
|
||||
// type: 'detail',
|
||||
// btnName: 'btn.detail'
|
||||
// },
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
// {
|
||||
// type: 'detail',
|
||||
// btnName: 'btn.detail'
|
||||
// }
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.equipment.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentCode')
|
||||
},
|
||||
{
|
||||
prop: 'equipmentTypeName',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentType')
|
||||
},
|
||||
{
|
||||
prop: 'equipmentGroupName',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentGrouping')
|
||||
},
|
||||
{
|
||||
prop: 'enName',
|
||||
label: i18n.t('module.basicData.visual.EnglishName')
|
||||
},
|
||||
// {
|
||||
// prop: 'maintenanceCycle',
|
||||
// label: i18n.t('module.basicData.equipment.maintenanceCycle'),
|
||||
//
|
||||
// },
|
||||
// {
|
||||
// prop: 'maintenanceTime',
|
||||
// label: i18n.t('module.basicData.equipment.maintenanceTime'),
|
||||
//
|
||||
// },
|
||||
// {
|
||||
// prop: 'description',
|
||||
// label: i18n.t('module.basicData.equipment.FunctionDescription'),
|
||||
//
|
||||
// },
|
||||
{
|
||||
prop: 'abbr',
|
||||
label: i18n.t('module.basicData.visual.Abbreviation')
|
||||
},
|
||||
{
|
||||
prop: 'detail',
|
||||
label: i18n.t('module.basicData.equipment.infoDetail'),
|
||||
subcomponent: ViewDetailBtn,
|
||||
buttonContent: i18n.t('module.basicData.equipment.viewDetail')
|
||||
}
|
||||
// {
|
||||
// prop: 'detail',
|
||||
// label: '详情',
|
||||
// ,
|
||||
// subcomponent: ViewDetailBtn,
|
||||
// buttonContent: '查看详情'
|
||||
// }
|
||||
// {
|
||||
// prop: 'estatus',
|
||||
// label: i18n.t('module.basicData.visual.CurrentState'),
|
||||
// filter: dataDict('enableState'),
|
||||
//
|
||||
// }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentInfo',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, EquipmentInfoAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
addOrUpdateVisible: false,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
equipmentList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentName'),
|
||||
placeholder: this.$t('module.basicData.equipment.EquipmentName'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentCode'),
|
||||
placeholder: this.$t('module.basicData.equipment.EquipmentCode'),
|
||||
param: 'code'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.export',
|
||||
name: 'export',
|
||||
color: 'success'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
},
|
||||
lastPage() {
|
||||
/** 新增时要跳转到最后（最新）的一页 */
|
||||
return Math.ceil((this.total + 1) / this.listQuery.size)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
exportFile() {
|
||||
// 导出设备列表
|
||||
exportEquipments({
|
||||
...this.listQuery,
|
||||
fileName: `equipmentList-${this.listQuery.current}-${this.listQuery.size}`
|
||||
}).then(response => {
|
||||
let fileName = ''
|
||||
const contentDisposition = response.headers['content-disposition']
|
||||
if (contentDisposition) {
|
||||
fileName = contentDisposition.slice(contentDisposition.indexOf('filename=') + 9)
|
||||
}
|
||||
const blob = new Blob([response.data])
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onload = e => {
|
||||
const a = document.createElement('a')
|
||||
a.download = fileName
|
||||
a.href = e.target.result
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
})
|
||||
|
||||
// 旧的消息
|
||||
// this.$message({
|
||||
// message: '尚未提供接口!',
|
||||
// type: 'warning',
|
||||
// duration: 2000
|
||||
// })
|
||||
},
|
||||
handleTableEvents({ action, data: row }) {
|
||||
if (action === 'view-detail-action') {
|
||||
// 查看详情
|
||||
this.handleClick({ type: 'detail', data: { id: row.id }})
|
||||
}
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNewDrawer(raw.data.id)
|
||||
} else {
|
||||
this.addNewDrawer(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList(
|
||||
jump = {
|
||||
/** should contain a 'current' property */
|
||||
}
|
||||
) {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
this.listQuery.code = this.headFormValue.code
|
||||
list({ ...this.listQuery, ...jump }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.equipmentList = response.data.records
|
||||
} else {
|
||||
this.equipmentList.splice(0)
|
||||
}
|
||||
this.listQuery.current = jump.current || this.listQuery.current
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
} else if (this.headFormValue.btnName === 'export') {
|
||||
this.exportFile()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNewDrawer()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
// addNew(id, isdetail) {
|
||||
// this.$router.push({
|
||||
// name: 'equipmentInfoAdd',
|
||||
// query: {
|
||||
// id: id,
|
||||
// isdetail: isdetail
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
|
||||
addNewDrawer(id, isdetail) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, isdetail)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
202
src/views/basicData/Equipment/equipmentLink.vue
Normal file
202
src/views/basicData/Equipment/equipmentLink.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:29
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :placeholder-name="placeholderName" :key-name="keyName" @getDataList="getList" @add="addNew" />
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { equipmentLinkList, equipmentLinkDelete } from '@/api/basicData/Equipment/equipmentLink'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
},
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: 'btn.detail'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.WiredCode')
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.WiredEquipment')
|
||||
},
|
||||
{
|
||||
prop: 'enName',
|
||||
label: i18n.t('module.basicData.visual.EnglishName')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentLink',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyName: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholderName:
|
||||
this.$t('module.basicData.equipment.WiredEquipment') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.equipment.WiredCode'),
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
equipmentLinkDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
} else {
|
||||
this.addNew(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList(key) {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = key
|
||||
this.listQuery.code = key
|
||||
equipmentLinkList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, isdetail) {
|
||||
this.$router.push({
|
||||
name: 'equipmentLinkAdd',
|
||||
query: {
|
||||
id: id,
|
||||
isdetail: isdetail
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
235
src/views/basicData/Equipment/equipmentType.vue
Normal file
235
src/views/basicData/Equipment/equipmentType.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:31
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="equipmentTypeList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<equipmentType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/Equipment/equipmentType'
|
||||
import equipmentTypeAdd from './components/equipmentType-add.vue'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: 'btn.detail'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
// {
|
||||
// type: 'detail',
|
||||
// btnName: 'btn.detail'
|
||||
// }
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentTypeName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentTypeCode2')
|
||||
},
|
||||
// {
|
||||
// prop: 'parentName',
|
||||
// label: i18n.t('module.basicData.equipment.parentName'),
|
||||
//
|
||||
// },
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentType',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, equipmentTypeAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
equipmentTypeList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder:
|
||||
this.$t('module.basicData.equipment.EquipmentTypeName') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.equipment.EquipmentTypeCode'),
|
||||
param: 'name',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
} else {
|
||||
this.addNew(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
this.listQuery.code = this.headFormValue.name
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.equipmentTypeList = response.data.records
|
||||
} else {
|
||||
this.equipmentTypeList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, isdetail) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, isdetail)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
176
src/views/basicData/Equipment/equipmentTypeAlarm.vue
Normal file
176
src/views/basicData/Equipment/equipmentTypeAlarm.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:34
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form
|
||||
:placeholder-name="placeholderName"
|
||||
:key-name="keyName"
|
||||
:show-add="showAdd"
|
||||
@getDataList="getList"
|
||||
@add="addNew"
|
||||
/>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<equipmentAlarm-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { equipmentTypeList } from '@/api/basicData/Equipment/equipmentType'
|
||||
import equipmentAlarmAdd from './components/equipmentTypeAlarm-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: i18n.t('module.basicData.equipment.SetAlarm')
|
||||
},
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: 'btn.detail'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentTypeName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentTypeCode'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentAlarm',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, equipmentAlarmAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyName: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholderName: this.$t('module.basicData.equipment.EquipmentTypeName') + this.$t('module.basicData.visual.Or') + this.$t('module.basicData.equipment.EquipmentTypeCode'),
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
showAdd: false,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'detail') {
|
||||
this.addNew(raw.data.id, true)
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList(key) {
|
||||
this.listLoading = true
|
||||
this.listQuery.category = key
|
||||
this.listQuery.code = key
|
||||
equipmentTypeList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, detail) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, detail)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
192
src/views/basicData/Equipment/maintenanceCycle.vue
Normal file
192
src/views/basicData/Equipment/maintenanceCycle.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:38
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="maintenanceCycleList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<maintenanceCycle-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/Equipment/maintenanceCycle'
|
||||
import maintenanceCycleAdd from './components/maintenanceCycle-add.vue'
|
||||
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.PeriodCode')
|
||||
},
|
||||
{
|
||||
prop: 'maintenancePeriod',
|
||||
label: i18n.t('module.basicData.equipment.maintenancePeriod')
|
||||
}
|
||||
// {
|
||||
// prop: 'remark',
|
||||
// label: i18n.t('module.basicData.visual.Remarks'),
|
||||
//
|
||||
// }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'MaintenanceCycle',
|
||||
components: { Pagination, BaseTable, MethodBtn, maintenanceCycleAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
maintenanceCycleList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.maintenancePeriod}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
list({ ...this.listQuery }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.maintenanceCycleList = response.data.records
|
||||
} else {
|
||||
this.maintenanceCycleList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
222
src/views/basicData/Equipment/maintenanceType.vue
Normal file
222
src/views/basicData/Equipment/maintenanceType.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:30:40
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="maintenanceTypeList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<maintenanceType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/Equipment/maintenanceType'
|
||||
import maintenanceTypeAdd from './components/maintenanceType-add.vue'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.RepairTypeName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.RepairTypeCode')
|
||||
},
|
||||
{
|
||||
prop: 'enName',
|
||||
label: i18n.t('module.basicData.equipment.EnglishName')
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'MaintenanceType',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, maintenanceTypeAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
maintenanceTypeList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder:
|
||||
this.$t('module.basicData.equipment.RepairTypeName') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.equipment.RepairTypeCode'),
|
||||
param: 'name',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
list({ ...this.listQuery, name: this.headFormValue.name, code: this.headFormValue.name }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.maintenanceTypeList = response.data.records
|
||||
} else {
|
||||
this.maintenanceTypeList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
239
src/views/basicData/Equipment/spareParts.vue
Normal file
239
src/views/basicData/Equipment/spareParts.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: juzi
|
||||
* @LastEditTime: 2022-04-28
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="sparePartsList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<spareParts-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/Equipment/spareParts'
|
||||
import sparePartsAdd from './components/spareParts-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import newBasicData from '@/filters/newBasicData'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
function lifeFilter(v) {
|
||||
return v ? v + ' ' + i18n.t('module.basicData.equipment.hours') : '-'
|
||||
}
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.equipment.SparepartCode')
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.SparepartName')
|
||||
},
|
||||
{
|
||||
prop: 'model',
|
||||
label: i18n.t('module.basicData.equipment.SparepartModel')
|
||||
},
|
||||
{
|
||||
prop: 'dictDataId',
|
||||
label: i18n.t('module.basicData.visual.unit'),
|
||||
filter: newBasicData('1')
|
||||
},
|
||||
// {
|
||||
// prop: 'unit',
|
||||
// label: i18n.t('module.basicData.visual.unit'),
|
||||
//
|
||||
// },
|
||||
{
|
||||
prop: 'life',
|
||||
label: i18n.t('module.basicData.equipment.life'),
|
||||
filter: lifeFilter
|
||||
},
|
||||
{
|
||||
prop: 'specifications',
|
||||
label: i18n.t('module.basicData.equipment.Spec')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'SpareParts',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, sparePartsAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topBtnConfig,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
sparePartsList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder:
|
||||
this.$t('module.basicData.equipment.SparepartName') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.equipment.SparepartCode'),
|
||||
param: 'keyName',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
list({ ...this.listQuery, key: this.headFormValue.keyName }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.sparePartsList = response.data.records
|
||||
} else {
|
||||
this.sparePartsList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
219
src/views/basicData/EquipmentScrapGrade.vue
Normal file
219
src/views/basicData/EquipmentScrapGrade.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:29:03
|
||||
* @Description:拆分了搜索区和功能按钮区，增加了toptitle
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<top-title />
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
/>
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<Equipment-scrap-grade-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>import i18n from '@/lang'
|
||||
import { EquipmentScrapGradeList, EquipmentScrapGradeDelete } from '@/api/basicData/EquipmentScrapGrade'
|
||||
import EquipmentScrapGradeAdd from './components/EquipmentScrapGrade-add.vue'
|
||||
import TopTitle from '@/components/TopTitle'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.equipment.EquipmentName'),
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'dataName',
|
||||
label: i18n.t('module.basicData.EquipmentScrapGrade.ScrapGrade'),
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'EquipmentScrapGrade',
|
||||
components: { TopTitle, Pagination, BaseTable, MethodBtn, HeadForm, EquipmentScrapGradeAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
name: ''
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.EquipmentScrapGrade.keyword'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
EquipmentScrapGradeDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
EquipmentScrapGradeList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
233
src/views/basicData/FactoryManagement/Factory.vue
Normal file
233
src/views/basicData/FactoryManagement/Factory.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<!--/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditTime: 2022-04-15
|
||||
* @LastEditors: juzi
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<Factory-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { factoryList, factoryDelete } from '@/api/basicData/FactoryManagement/factory'
|
||||
|
||||
import FactoryAdd from './components/Factory-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import i18n from '@/lang'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.factory.FactoryName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.factory.FactoryCode')
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: i18n.t('module.basicData.factory.Address')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Factory',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, FactoryAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
key: ''
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.factory.placeholderName'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
factoryDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.key = this.headFormValue.name
|
||||
factoryList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
170
src/views/basicData/FactoryManagement/components/Factory-add.vue
Normal file
170
src/views/basicData/FactoryManagement/components/Factory-add.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-04-12 16:24:32
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
width="40%"
|
||||
class="dialog"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
>
|
||||
<!-- <small-title slot="title">
|
||||
{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title> -->
|
||||
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="100px"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<el-form-item :label="$t('module.basicData.factory.FactoryName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.factory.FactoryName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.factory.FactoryCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.factory.FactoryCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.factory.Address')" prop="address">
|
||||
<el-input
|
||||
v-model="dataForm.address"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.factory.Address')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { factoryDetail, factoryUpdate, factoryAdd, factoryCode } from '@/api/basicData/FactoryManagement/factory'
|
||||
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
export default {
|
||||
// components: { SmallTitle },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
address: '',
|
||||
description: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.factory.FactoryName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.factory.FactoryCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
factoryDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm.name = res.data.name
|
||||
this.dataForm.code = res.data.code
|
||||
this.dataForm.address = res.data.address
|
||||
this.dataForm.description = res.data.description
|
||||
})
|
||||
} else {
|
||||
factoryCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
name: this.dataForm.name,
|
||||
code: this.dataForm.code,
|
||||
address: this.dataForm.address,
|
||||
description: this.dataForm.description,
|
||||
id: this.dataForm.id
|
||||
}
|
||||
if (this.dataForm.id) {
|
||||
factoryUpdate(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
factoryAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog >>> .el-dialog__body {
|
||||
padding: 30px 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,278 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-11 11:25:31
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
class="dialog"
|
||||
width="50%"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
>
|
||||
<!-- <small-title slot="title">
|
||||
{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title> -->
|
||||
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<!-- label-width="100px" -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 产线名称 -->
|
||||
<el-form-item :label="$t('module.basicData.productLine.ProductionLineName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productLine.ProductionLineName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 产线编号 -->
|
||||
<el-form-item :label="$t('module.basicData.productLine.ProductionLineCode2')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productLine.ProductionLineCode2')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 工厂名称 -->
|
||||
<el-form-item :label="$t('module.basicData.productLine.factory')" prop="factoryId">
|
||||
<el-select
|
||||
v-model="dataForm.factoryId"
|
||||
filterable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productLine.factory')])"
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="item in factoryArr" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 产线tt值 -->
|
||||
<el-form-item :label="$t('module.basicData.productLine.ttValue')" prop="tvalue">
|
||||
<el-input
|
||||
v-model.number="dataForm.tvalue"
|
||||
type="number"
|
||||
min="0"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productLine.ttValuePlaceholder')])"
|
||||
clearable
|
||||
@change="$forceUpdate()"
|
||||
>
|
||||
<template slot="append">
|
||||
{{ $t('module.basicData.productLine.ttUnit') }}
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 描述信息 -->
|
||||
<el-form-item :label="$t('module.basicData.productLine.descriptionInfo')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.productLine.descriptionInfo')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <el-row :gutter="20">
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
</el-row> -->
|
||||
|
||||
<!-- 产线状态 -->
|
||||
<!-- <el-form-item v-if="dataForm.id" :label="$t('module.basicData.visual.CurrentState')" prop="enabled">
|
||||
<el-switch
|
||||
v-model="dataForm.enabled"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="warning" @click="resetDataForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { lineDetail, lineUpdate, lineAdd, lineCode } from '@/api/basicData/FactoryManagement/line'
|
||||
import { factoryList } from '@/api/basicData/FactoryManagement/factory'
|
||||
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
// 该对象会因为在data里被引用了而也变为响应式
|
||||
const defaultDataForm = {
|
||||
id: null,
|
||||
name: '',
|
||||
code: '',
|
||||
factoryId: '',
|
||||
tvalue: 0,
|
||||
description: '',
|
||||
enabled: 1,
|
||||
remark: ''
|
||||
}
|
||||
|
||||
export default {
|
||||
// components: { SmallTitle },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
factoryArr: [],
|
||||
dataForm: defaultDataForm,
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productLine.ProductionLineName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productLine.ProductionLineCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
factoryId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productLine.factory')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
tvalue: [
|
||||
{
|
||||
type: 'number',
|
||||
transform: val => Number(val),
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.productLine.ttValue')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDataForm(excludeId = false) {
|
||||
if (!excludeId) this.dataForm.id = null
|
||||
this.dataForm.name = ''
|
||||
this.dataForm.code = ''
|
||||
this.dataForm.factoryId = ''
|
||||
this.dataForm.tvalue = 0
|
||||
this.dataForm.description = ''
|
||||
this.dataForm.enabled = 1
|
||||
this.dataForm.remark = ''
|
||||
},
|
||||
|
||||
init(id) {
|
||||
this.initDataForm()
|
||||
|
||||
factoryList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
name: ''
|
||||
}).then(response => {
|
||||
this.factoryArr = response.data.records
|
||||
})
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
lineDetail(this.dataForm.id).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
} else {
|
||||
lineCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
resetDataForm() {
|
||||
// 重置表单需要排除id
|
||||
// this.initDataForm(true)
|
||||
// or
|
||||
this.$refs.dataForm.resetFields()
|
||||
lineCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
},
|
||||
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
name: this.dataForm.name,
|
||||
code: this.dataForm.code,
|
||||
factoryId: this.dataForm.factoryId,
|
||||
description: this.dataForm.description,
|
||||
remark: this.dataForm.remark,
|
||||
enabled: this.dataForm.enabled,
|
||||
id: this.dataForm.id,
|
||||
tvalue: this.dataForm.tvalue
|
||||
}
|
||||
|
||||
const ajaxAction = this.dataForm.id ? lineUpdate : lineAdd
|
||||
ajaxAction(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dialog >>> .el-dialog__body {
|
||||
padding: 30px 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,589 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-28 18:46:43
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
|
||||
<small-title slot="title" :size="'lg'" :no-padding="true">
|
||||
{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="100px"
|
||||
label-position="top"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 工段名称 -->
|
||||
<el-form-item :label="$t('module.basicData.workSection.name')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.workSection.name')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 工段编号 -->
|
||||
<el-form-item :label="$t('module.basicData.workSection.code')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.workSection.code')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 产线 (id) -->
|
||||
<el-form-item :label="$t('module.basicData.workSection.ProductLine')" prop="productionLineId">
|
||||
<el-select
|
||||
v-model="dataForm.productionLineId"
|
||||
filterable
|
||||
:placeholder="$i18nForm(['placeholder.select', $t('module.basicData.workSection.ProductLine')])"
|
||||
:style="{ width: '100%' }"
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="item in factoryArr" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 描述 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Description')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Description')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col>
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
type="textarea"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<template v-if="isedit">
|
||||
<small-title :size="'md'">{{ $t('module.basicData.workSection.eqList') }}</small-title>
|
||||
|
||||
<transition mode="out-in" name="fade">
|
||||
<div v-if="!showAdd" key="equipment__list">
|
||||
<!-- basetable -->
|
||||
<base-table
|
||||
key="inner-base-table"
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="equipmentList"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
|
||||
<!-- pagination -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
key="equipment__add"
|
||||
class="equipment__add"
|
||||
style="border-radius: 8px;box-shadow: inset 0 0 8px 2px rgba(0,0,0,0.1);background-color: #f5f5f5; padding: 24px;margin-top: 26px;"
|
||||
>
|
||||
<small-title :size="'sm'">{{ $t('module.basicData.workSection.eqAdd') }}</small-title>
|
||||
<br>
|
||||
<el-form
|
||||
ref="equipmentForm"
|
||||
:model="equipmentForm"
|
||||
:rules="equipmentFormRules"
|
||||
label-width="100px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<!-- 设备id列表 -->
|
||||
<el-col v-if="false" :span="12">
|
||||
<el-form-item :label="$t('module.basicData.workSection.eqList')" prop="equipmentId">
|
||||
<el-select v-model="equipmentForm.equipmentId" :placeholder="$t('module.basicData.workSection.eqSelect')" disabled clearable multiple filterable>
|
||||
<el-option
|
||||
v-for="equipment in equipmentOptionsList"
|
||||
:key="equipment.id"
|
||||
:value="equipment.id"
|
||||
:label="equipment.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 单个设备id -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.workSection.eqList')" prop="singleEquipmentId">
|
||||
<el-select v-model="equipmentForm.singleEquipmentId" :placeholder="$t('module.basicData.workSection.eqSelect')" clearable>
|
||||
<el-option
|
||||
v-for="equipment in equipmentOptionsList"
|
||||
:key="equipment.id"
|
||||
:value="equipment.id"
|
||||
:label="equipment.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 工段id -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.workSection.name')" prop="name">
|
||||
<el-input v-model="dataForm.name" disabled :placeholder="$t('module.basicData.workSection.wsInput')" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 备注 -->
|
||||
<!-- <el-col :span="8">
|
||||
<el-form-item :label="'备注'" prop="remark">
|
||||
<el-input v-model="equipmentForm.remark" :placeholder="'备注'" clearable />
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button size="small" @click="showAdd = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button size="small" type="success" @click="confirmAddEquipment">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
<!-- <button class="btn btn-cancel" @click="showAdd = false">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-apply" @click="confirmAddEquipment">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</button> -->
|
||||
</el-row>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div
|
||||
v-if="showAdd"
|
||||
style="position: absolute; z-index: 10000; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background: lightblue; box-shadow: 0 2px 16px 2px rgba(0,0,0,.2); border-radius: 8px; padding: 6px;"
|
||||
>
|
||||
Show add
|
||||
<el-button class="close" @click="showAdd = false">close</el-button>
|
||||
</div> -->
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="close">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import {
|
||||
sectionDetail,
|
||||
sectionUpdate,
|
||||
sectionAdd,
|
||||
sectionCode,
|
||||
deleteEquipment,
|
||||
getEquipmentListBy,
|
||||
getAllEquipmentList,
|
||||
addNewEquipment
|
||||
} from '@/api/basicData/FactoryManagement/section'
|
||||
import { lineList } from '@/api/basicData/FactoryManagement/line'
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.workSection.createTime'),
|
||||
// label: '添加时间',
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
label: i18n.t('module.basicData.workSection.eqName')
|
||||
}
|
||||
// {
|
||||
// prop: 'remark',
|
||||
// label: '备注'
|
||||
// }
|
||||
]
|
||||
export default {
|
||||
components: { SmallTitle, BaseTable, MethodBtn, Pagination },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
isedit: false,
|
||||
factoryArr: [],
|
||||
equipmentList: [],
|
||||
equipmentOptionsList: [],
|
||||
topBtnConfig,
|
||||
tableProps,
|
||||
tableBtn,
|
||||
showAdd: false,
|
||||
dataForm: {
|
||||
id: null,
|
||||
name: '',
|
||||
code: '',
|
||||
equipmentList: [],
|
||||
productionLineId: '',
|
||||
description: '',
|
||||
remark: ''
|
||||
},
|
||||
equipmentForm: {
|
||||
id: null,
|
||||
equipmentId: [],
|
||||
singleEquipmentId: null, // 暂时先用这个
|
||||
remark: '',
|
||||
workshopSectionId: null
|
||||
},
|
||||
equipmentFormRules: {},
|
||||
total: 0,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 5
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.workSection.name')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.workSection.code')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
productionLineId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.workSection.ProductLine')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showAdd: function(val) {
|
||||
if (val) {
|
||||
this.equipmentOptionsList.splice(0)
|
||||
this.initEquipmentForm()
|
||||
}
|
||||
if (val && !this.equipmentOptionsList.length) {
|
||||
// 只要需要展示新增子表单，就请求一下全部设备列表，为了节省带宽可以利用缓存
|
||||
this.fetchList('equipment-options')
|
||||
this.equipmentForm.workshopSectionId = this.dataForm.id
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initEquipmentForm(id) {
|
||||
this.equipmentForm = {
|
||||
id: null,
|
||||
equipmentId: [],
|
||||
singleEquipmentId: null, // 暂时先用这个
|
||||
remark: '',
|
||||
workshopSectionId: id
|
||||
}
|
||||
},
|
||||
|
||||
initDataForm() {
|
||||
this.dataForm = {
|
||||
id: null,
|
||||
name: '',
|
||||
code: '',
|
||||
productionLineId: '',
|
||||
description: '',
|
||||
remark: ''
|
||||
}
|
||||
},
|
||||
|
||||
init(id) {
|
||||
this.initDataForm()
|
||||
this.initEquipmentForm(id)
|
||||
this.isedit = false
|
||||
|
||||
sectionCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
lineList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
name: ''
|
||||
}).then(response => {
|
||||
this.factoryArr = response.data.records
|
||||
})
|
||||
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (id) {
|
||||
this.isedit = true
|
||||
sectionDetail(id).then(res => {
|
||||
if (res.data) {
|
||||
this.dataForm = refineData(res.data, ['id', 'name', 'code', 'productionLineId', 'description', 'remark'])
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
close() {
|
||||
this.visible = false
|
||||
},
|
||||
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
// this.addNew()
|
||||
this.showAdd = true
|
||||
}
|
||||
},
|
||||
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.equipmentName}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
deleteEquipment(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
|
||||
addNew(data) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(data)
|
||||
})
|
||||
},
|
||||
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
name: this.dataForm.name,
|
||||
code: this.dataForm.code,
|
||||
productionLineId: this.dataForm.productionLineId,
|
||||
description: this.dataForm.description,
|
||||
remark: this.dataForm.remark,
|
||||
id: this.dataForm.id
|
||||
}
|
||||
// 决定更新还是新增
|
||||
const ajaxAction = this.dataForm.id ? sectionUpdate : sectionAdd
|
||||
ajaxAction(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
// console.log('get list: ', this.dataForm)
|
||||
this.fetchList('equipment-list')
|
||||
},
|
||||
|
||||
fetchList(type) {
|
||||
switch (type) {
|
||||
case 'equipment-options':
|
||||
return getAllEquipmentList().then(res => {
|
||||
if (res.data.length > 0) {
|
||||
this.equipmentOptionsList = res.data
|
||||
} else {
|
||||
this.equipmentOptionsList.splice(0)
|
||||
}
|
||||
})
|
||||
case 'equipment-list': {
|
||||
return getEquipmentListBy({ ...this.listQuery, id: this.dataForm.id }).then(res => {
|
||||
if (res.data.records) {
|
||||
this.equipmentList = res.data.records
|
||||
} else {
|
||||
this.equipmentList.splice(0)
|
||||
}
|
||||
this.total = res.data.total
|
||||
this.$forceUpdate()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
confirmAddEquipment() {
|
||||
// 发送请求
|
||||
// console.log('equipment: ', this.equipmentForm)
|
||||
addNewEquipment(this.equipmentForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
// 成功后，关闭小窗，刷新列表
|
||||
this.showAdd = false
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
padding: 0;
|
||||
margin: 32px 0 8px 32px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
|
||||
.btn {
|
||||
outline: none;
|
||||
background: unset;
|
||||
border: none;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.btn-apply {
|
||||
background-color: #13ce66;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-apply:hover {
|
||||
background-color: #12974e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
/* background-color: #e8f4ff; */
|
||||
/* color: #606266; */
|
||||
background-color: #fff;
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background-color: rgb(224, 224, 224);
|
||||
color: #949494;
|
||||
}
|
||||
</style>
|
||||
236
src/views/basicData/FactoryManagement/product-line.vue
Normal file
236
src/views/basicData/FactoryManagement/product-line.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<!--/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditTime: 2022-04-15
|
||||
* @LastEditors: juzi
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<product-line-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { lineList, lineDelete } from '@/api/basicData/FactoryManagement/line'
|
||||
|
||||
import productLineAdd from './components/product-line-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import dataDict from '@/filters/DataDict'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.productLine.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.productLine.ProductionLineName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.productLine.ProductionLineCode')
|
||||
},
|
||||
{
|
||||
prop: 'factoryName',
|
||||
label: i18n.t('module.basicData.productLine.factory')
|
||||
},
|
||||
{
|
||||
prop: 'enabled',
|
||||
label: i18n.t('module.basicData.productLine.currentState'),
|
||||
filter: dataDict('enabled')
|
||||
},
|
||||
{
|
||||
prop: 'tvalue',
|
||||
label: i18n.t('module.basicData.productLine.ttValue'),
|
||||
filter: val => (val ? `${val} ${i18n.t('module.basicData.productLine.ttUnit')}` : '-')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.productLine.description')
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'ProductLine',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, productLineAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.productLine.placeholderName'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
lineDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.key = this.headFormValue.name
|
||||
lineList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
225
src/views/basicData/FactoryManagement/work-section.vue
Normal file
225
src/views/basicData/FactoryManagement/work-section.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<!--/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditTime: 2022-04-15
|
||||
* @LastEditors: juzi
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<work-section-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { sectionList, sectionDelete } from '@/api/basicData/FactoryManagement/section'
|
||||
import workSectionAdd from './components/work-section-add.vue'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.workSection.name')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.workSection.WorkSectionCoding')
|
||||
},
|
||||
{
|
||||
prop: 'productionLine',
|
||||
label: i18n.t('module.basicData.workSection.ProductLineName')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Description')
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'WorkSection',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, workSectionAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.workSection.name'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
sectionDelete(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
sectionList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
356
src/views/basicData/GroupModule/components/group-add.vue
Normal file
356
src/views/basicData/GroupModule/components/group-add.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-28 20:30:43
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:title="isdetail ? 'btn.detail' : !tableData.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
class="dialog"
|
||||
width="40%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- label-width="80px" -->
|
||||
<el-form ref="groupForm" :model="tableData" :rules="rules" label-position="top" style=" ">
|
||||
<el-row :gutter="20">
|
||||
<!-- 班组名称 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.group.TeamName')" prop="name">
|
||||
<el-input
|
||||
v-model="tableData.name"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.group.TeamName')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 组长 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.group.GroupLeader')" prop="teamLeaderId">
|
||||
<el-select
|
||||
v-model="tableData.teamLeaderId"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.group.GroupLeader')])"
|
||||
filterable
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option v-for="item in candidateList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 部门 - 下拉 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.group.Department')" prop="departmentId">
|
||||
<el-select
|
||||
v-model="tableData.departmentId"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.select', $t('module.basicData.group.Department')])"
|
||||
filterable
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="handleClose">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="handelConfirm()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import {
|
||||
detail,
|
||||
update,
|
||||
add,
|
||||
getCode,
|
||||
getDepartmentList,
|
||||
getStaffList,
|
||||
getCrewList,
|
||||
deleteCrew
|
||||
} from '@/api/basicData/GroupModule/group'
|
||||
// import BaseTable from '@/components/BaseTable'
|
||||
// import groupMemberAdd from './group-member-add.vue'
|
||||
// import groupMember from './group-member.vue'
|
||||
// import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
// import Pagination from '@/components/Pagination'
|
||||
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'workerName',
|
||||
label: i18n.t('module.basicData.group.WorkerName')
|
||||
},
|
||||
{
|
||||
prop: 'majorText',
|
||||
label: i18n.t('module.basicData.group.WorkerMajor')
|
||||
},
|
||||
{
|
||||
prop: 'telephone',
|
||||
label: i18n.t('module.basicData.group.WorkerTelephone')
|
||||
},
|
||||
{
|
||||
prop: 'workshopText',
|
||||
label: i18n.t('module.basicData.group.WorkerWorkshop') // 经协商，由所属工序改为所属车间
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
// components: { BaseTable, MethodBtn, Pagination, SmallTitle, groupMemberAdd },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
topBtnConfig,
|
||||
trueWidth: 150,
|
||||
isdetail: false,
|
||||
tableProps,
|
||||
listLoading: false,
|
||||
crewList: [],
|
||||
candidateList: [],
|
||||
tableData: {
|
||||
id: 0,
|
||||
name: '',
|
||||
teamLeaderId: '',
|
||||
workStatus: 1, // 默认1
|
||||
code: '',
|
||||
departmentId: ''
|
||||
},
|
||||
departmentList: [], // 部门列表
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.group.TeamName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
teamLeaderId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.group.GroupLeader')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 999,
|
||||
status: 1 // 默认可用的员工
|
||||
},
|
||||
crewQuery: {
|
||||
// 组员的请求参数
|
||||
teamId: null,
|
||||
current: 1,
|
||||
size: 5
|
||||
},
|
||||
extraCrewQueryParams: {
|
||||
key: '' // 姓名或专业
|
||||
},
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doSearch() {
|
||||
this.getList()
|
||||
},
|
||||
init(id, isdetail) {
|
||||
// 初始化关键数据
|
||||
this.isdetail = isdetail || false
|
||||
this.tableData.id = id || ''
|
||||
this.crewQuery.teamId = ''
|
||||
this.crewList.splice(0)
|
||||
this.visible = true
|
||||
|
||||
getStaffList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.candidateList = response.data.records
|
||||
} else {
|
||||
this.candidateList.splice(0)
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs['groupForm'].resetFields()
|
||||
if (this.tableData.id) {
|
||||
this.crewQuery.teamId = this.tableData.id
|
||||
|
||||
// 在编辑页面也加载一下部门列表
|
||||
getDepartmentList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
enabled: 1 // 默认只查询可用的部门
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.departmentList = res.data
|
||||
} else {
|
||||
this.departmentList.splice(0)
|
||||
}
|
||||
})
|
||||
|
||||
detail(this.tableData.id).then(res => {
|
||||
this.tableData = res.data
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.tableData.code = res.data
|
||||
})
|
||||
getDepartmentList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
enabled: 1 // 默认只查询可用的部门
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.departmentList = res.data
|
||||
} else {
|
||||
this.departmentList.splice(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取班组成员列表
|
||||
getList() {
|
||||
getCrewList({
|
||||
...this.crewQuery,
|
||||
name: this.extraCrewQueryParams.name,
|
||||
major: this.extraCrewQueryParams.major
|
||||
}).then(response => {
|
||||
if (response.data.records) {
|
||||
this.crewList = response.data.records
|
||||
this.crewList.forEach(item => {
|
||||
// 如果组员有专业信息的话，就将其转换为字符串
|
||||
if (item.major) {
|
||||
item.majorText = item.major.toString()
|
||||
}
|
||||
if (item.workshop) {
|
||||
item.workshopList = []
|
||||
/** id: value 形式 */
|
||||
for (const key in item.workshop) {
|
||||
item.workshopList.push({ id: key, name: item.workshop[key] })
|
||||
}
|
||||
item.workshopText = item.workshopList.map(o => o.name).join(',')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.crewList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
console.log(raw.data)
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.workerName}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
const data = {
|
||||
teamId: this.crewQuery.teamId,
|
||||
workerId: raw.data.workerId,
|
||||
id: raw.data.id,
|
||||
description: ''
|
||||
}
|
||||
deleteCrew(data).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data)
|
||||
}
|
||||
},
|
||||
// 表单提交
|
||||
handelConfirm() {
|
||||
this.$refs['groupForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = this.tableData
|
||||
const ajaxAction = this.tableData.id ? update : add
|
||||
ajaxAction(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
},
|
||||
goEdit() {
|
||||
this.isdetail = false
|
||||
},
|
||||
// 新增
|
||||
addNew(crewInfo) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(crewInfo, false)
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog >>> .el-dialog__body {
|
||||
padding: 30px 24px;
|
||||
}
|
||||
</style>
|
||||
505
src/views/basicData/GroupModule/components/group-edit.vue
Normal file
505
src/views/basicData/GroupModule/components/group-edit.vue
Normal file
@@ -0,0 +1,505 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-28 20:30:43
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ isdetail ? 'btn.detail' : !tableData.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title>
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form
|
||||
ref="groupForm"
|
||||
:model="tableData"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<!-- 班组名称 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.group.TeamName')" prop="name">
|
||||
<el-input
|
||||
v-model="tableData.name"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.group.TeamName')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 组长 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.group.GroupLeader')" prop="teamLeaderId">
|
||||
<el-select
|
||||
v-model="tableData.teamLeaderId"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.group.GroupLeader')])"
|
||||
filterable
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option v-for="item in candidateList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 部门 - 下拉 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="$t('module.basicData.group.Department')" prop="departmentId">
|
||||
<el-select
|
||||
v-model="tableData.departmentId"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.select', $t('module.basicData.group.Department')])"
|
||||
filterable
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 状态 - 默认可用 -->
|
||||
<!-- <el-col :span="6">
|
||||
<el-form-item label-width="100px" :label="$t('module.basicData.group.TeamStatus')" prop="workStatus">
|
||||
<el-switch
|
||||
v-model="tableData.workStatus"
|
||||
:disabled="isdetail"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<small-title v-if="crewQuery.teamId" :size="'md'" style="margin-left: 8px;">
|
||||
{{ $t('module.basicData.group.SearchMember') }}
|
||||
</small-title>
|
||||
|
||||
<el-row style="margin-top: 14px;">
|
||||
<!-- 查询组员 -->
|
||||
<el-form
|
||||
v-if="crewQuery.teamId"
|
||||
ref="crewForm"
|
||||
:model="extraCrewQueryParams"
|
||||
size="medium"
|
||||
label-width="80px"
|
||||
label-position="top"
|
||||
>
|
||||
<el-col>
|
||||
<el-form-item label-width="100px" :label="$t('module.basicData.group.FilterCondition')">
|
||||
<!-- <el-form-item v-if="crewQuery.teamId" label-width="100px" :label="$t('module.basicData.group.Keyword')"> -->
|
||||
<el-input
|
||||
v-model="extraCrewQueryParams.name"
|
||||
clearable
|
||||
style="width:200px"
|
||||
:placeholder="$t('module.basicData.group.WorkerNameForSearch')"
|
||||
/>
|
||||
<el-input
|
||||
v-model="extraCrewQueryParams.major"
|
||||
clearable
|
||||
style="width:200px"
|
||||
:placeholder="$t('module.basicData.group.WorkerMajor')"
|
||||
/>
|
||||
<el-button type="success" @click="doSearch">{{ 'btn.search' | i18nFilter }}</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<!-- 组员列表 -->
|
||||
<base-table
|
||||
v-if="crewQuery.teamId"
|
||||
:top-btn-config="!isdetail ? topBtnConfig : []"
|
||||
:page="crewQuery.current"
|
||||
:limit="crewQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="crewList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
v-if="!isdetail"
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-if="crewQuery.teamId"
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="crewQuery.current"
|
||||
:limit.sync="crewQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="handleClose">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
|
||||
<el-button v-else type="primary" @click="handelConfirm()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 添加组员窗口 -->
|
||||
<group-member-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:team-id="crewQuery.teamId"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
<!-- <group-member v-if="addOrUpdateVisible" ref="addOrUpdate" :team-id="crewQuery.teamId" @refreshDataList="getList" /> -->
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import {
|
||||
detail,
|
||||
update,
|
||||
add,
|
||||
getCode,
|
||||
getDepartmentList,
|
||||
getStaffList,
|
||||
getCrewList,
|
||||
deleteCrew
|
||||
} from '@/api/basicData/GroupModule/group'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import groupMemberAdd from './group-member-add.vue'
|
||||
// import groupMember from './group-member.vue'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'workerName',
|
||||
label: i18n.t('module.basicData.group.WorkerName')
|
||||
},
|
||||
{
|
||||
prop: 'majorText',
|
||||
label: i18n.t('module.basicData.group.WorkerMajor')
|
||||
},
|
||||
{
|
||||
prop: 'telephone',
|
||||
label: i18n.t('module.basicData.group.WorkerTelephone')
|
||||
},
|
||||
{
|
||||
prop: 'workshopText',
|
||||
label: i18n.t('module.basicData.group.WorkerWorkshop') // 经协商，由所属工序改为所属车间
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: { BaseTable, MethodBtn, Pagination, SmallTitle, groupMemberAdd },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
addOrUpdateVisible: false,
|
||||
tableBtn,
|
||||
topBtnConfig,
|
||||
trueWidth: 150,
|
||||
isdetail: false,
|
||||
tableProps,
|
||||
listLoading: false,
|
||||
crewList: [],
|
||||
candidateList: [],
|
||||
tableData: {
|
||||
id: 0,
|
||||
name: '',
|
||||
teamLeaderId: '',
|
||||
workStatus: 1, // 默认1
|
||||
code: '',
|
||||
departmentId: ''
|
||||
},
|
||||
departmentList: [], // 部门列表
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.group.TeamName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
teamLeaderId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.group.GroupLeader')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 999,
|
||||
status: 1 // 默认可用的员工
|
||||
},
|
||||
crewQuery: {
|
||||
// 组员的请求参数
|
||||
teamId: null,
|
||||
current: 1,
|
||||
size: 5
|
||||
},
|
||||
extraCrewQueryParams: {
|
||||
name: '',
|
||||
major: '' // 姓名或专业
|
||||
},
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doSearch() {
|
||||
this.getList()
|
||||
},
|
||||
init(id, isdetail) {
|
||||
// 初始化关键数据
|
||||
this.isdetail = isdetail || false
|
||||
this.tableData.id = id || ''
|
||||
this.crewQuery.teamId = ''
|
||||
this.crewList.splice(0)
|
||||
this.visible = true
|
||||
|
||||
getStaffList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.candidateList = response.data.records
|
||||
} else {
|
||||
this.candidateList.splice(0)
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs['groupForm'].resetFields()
|
||||
if (this.tableData.id) {
|
||||
this.crewQuery.teamId = this.tableData.id
|
||||
|
||||
// 在编辑页面也加载一下部门列表
|
||||
getDepartmentList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
enabled: 1 // 默认只查询可用的部门
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.departmentList = res.data
|
||||
} else {
|
||||
this.departmentList.splice(0)
|
||||
}
|
||||
})
|
||||
|
||||
detail(this.tableData.id).then(res => {
|
||||
this.tableData = res.data
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.tableData.code = res.data
|
||||
})
|
||||
getDepartmentList({
|
||||
current: 1,
|
||||
size: 999,
|
||||
enabled: 1 // 默认只查询可用的部门
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.departmentList = res.data
|
||||
} else {
|
||||
this.departmentList.splice(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取班组成员列表
|
||||
getList() {
|
||||
getCrewList({
|
||||
...this.crewQuery,
|
||||
name: this.extraCrewQueryParams.name,
|
||||
major: this.extraCrewQueryParams.major
|
||||
}).then(response => {
|
||||
if (response.data.records) {
|
||||
this.crewList = response.data.records
|
||||
this.crewList.forEach(item => {
|
||||
// 如果组员有专业信息的话，就将其转换为字符串
|
||||
if (item.major) {
|
||||
item.majorText = item.major.toString()
|
||||
}
|
||||
if (item.workshop) {
|
||||
item.workshopList = []
|
||||
/** id: value 形式 */
|
||||
for (const key in item.workshop) {
|
||||
item.workshopList.push({ id: key, name: item.workshop[key] })
|
||||
}
|
||||
item.workshopText = item.workshopList.map(o => o.name).join(',')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.crewList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
console.log(raw.data)
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.workerName}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
const data = {
|
||||
teamId: this.crewQuery.teamId,
|
||||
workerId: raw.data.workerId,
|
||||
id: raw.data.id,
|
||||
description: ''
|
||||
}
|
||||
deleteCrew(data).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data)
|
||||
}
|
||||
},
|
||||
// 表单提交
|
||||
handelConfirm() {
|
||||
this.$refs['groupForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = this.tableData
|
||||
const ajaxAction = this.tableData.id ? update : add
|
||||
ajaxAction(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// if (this.tableData.id) {
|
||||
// update(data).then(res => {
|
||||
// this.$message({
|
||||
// message: this.$t('module.basicData.visual.success'),
|
||||
// type: 'success',
|
||||
// duration: 1500,
|
||||
// onClose: () => {
|
||||
// this.visible = false
|
||||
// this.$emit('refreshDataList')
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// } else {
|
||||
// add(data).then(res => {
|
||||
// this.$message({
|
||||
// message: this.$t('module.basicData.visual.success'),
|
||||
// type: 'success',
|
||||
// duration: 1500
|
||||
// })
|
||||
// this.tableData.id = res.data.id
|
||||
// this.crewQuery.teamId = res.data.id
|
||||
// })
|
||||
// }
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
},
|
||||
goEdit() {
|
||||
this.isdetail = false
|
||||
},
|
||||
// 新增
|
||||
addNew(crewInfo) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(crewInfo, false)
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form,
|
||||
.drawer >>> .attr-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
</style>
|
||||
226
src/views/basicData/GroupModule/components/group-member-add.vue
Normal file
226
src/views/basicData/GroupModule/components/group-member-add.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-04-15 10:53:04
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-28 21:16:13
|
||||
* @Description: 添加组员弹窗
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="tableData.id ? 'btn.edit' : 'btn.add' | i18nFilter"
|
||||
:before-close="handleClose"
|
||||
:visible.sync="visible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="crewForm" :model="tableData" :rules="rules" size="medium" label-width="100px">
|
||||
<el-row>
|
||||
<!-- 员工 -->
|
||||
<el-form-item :label="$t('module.basicData.group.Worker')" prop="workerId">
|
||||
<el-select
|
||||
v-model="tableData.workerId"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.group.Worker')])"
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="(crew, index) in staffList" :key="index" :label="crew.name" :value="crew.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 专业 -->
|
||||
<!-- <el-form-item :label="'专业'" prop="major">
|
||||
<el-select v-model="tableData.major">
|
||||
<el-option v-for="item in majorList" :key="item.id" :label="item.name" :value="item.name" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item :label="$t('module.basicData.group.WorkerMajor')" prop="major">
|
||||
<el-tag
|
||||
v-for="(tag, index) in majorList"
|
||||
:key="index"
|
||||
type="success"
|
||||
size="small"
|
||||
:style="{ marginRight: '8px' }"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 所属工段 -->
|
||||
<el-form-item :label="$t('module.basicData.group.WorkerWorkshop')" prop="workshopId">
|
||||
<el-select
|
||||
ref="multiSelect"
|
||||
v-model="tableData.workshopId"
|
||||
:placeholder="$i18nForm(['placeholder.select', $t('module.basicData.group.WorkerWorkshop')])"
|
||||
filterable
|
||||
multiple
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="item in workshopList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
|
||||
<el-input
|
||||
v-model="tableData.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 确定按钮 -->
|
||||
<div style="text-align: right;">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="warning" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="handelConfirm">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import i18n from '@/lang'
|
||||
import { getStaffDetail, getStaffList } from '@/api/basicData/GroupModule/group'
|
||||
import { add, update, getWorkshopList } from '@/api/basicData/GroupModule/groupAttr'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
teamId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isdetail: false,
|
||||
visible: false,
|
||||
tableData: {
|
||||
id: null,
|
||||
workerId: null,
|
||||
workshopId: [], // 所属工段的id列表，可多选
|
||||
// teamId: null,
|
||||
description: ''
|
||||
},
|
||||
staffList: [],
|
||||
majorList: [],
|
||||
workshopList: [],
|
||||
rules: {
|
||||
workerId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.group.Worker')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
teamLeaderId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.group.GroupLeader')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
},
|
||||
crewQuery: {
|
||||
// 组员的请求参数
|
||||
enabled: 1,
|
||||
current: 1,
|
||||
size: 999
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'tableData.workerId': function(val, old) {
|
||||
if (val && val !== old) {
|
||||
// 请求专业列表
|
||||
getStaffDetail(val).then(response => {
|
||||
if (response.data) {
|
||||
this.majorList = response.data.major
|
||||
} else {
|
||||
this.majorList && this.majorList.splice(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.$refs['crewForm'].resetFields()
|
||||
this.majorList && this.majorList.splice(0)
|
||||
},
|
||||
init(crewInfo, isdetail) {
|
||||
// 初始化关键数据
|
||||
this.isdetail = isdetail || false
|
||||
|
||||
// eslint-disable-next-line
|
||||
this.tableData.id = crewInfo?.id || ''
|
||||
|
||||
this.staffList.splice(0)
|
||||
this.visible = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.resetForm()
|
||||
// 获取组员列表
|
||||
getStaffList({
|
||||
...this.crewQuery,
|
||||
enabled: 1
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.records) {
|
||||
this.staffList = response.data.records
|
||||
} else {
|
||||
this.staffList.splice(0)
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
// 获取工段列表
|
||||
return getWorkshopList({ current: 1, size: 999, enabled: 1 })
|
||||
})
|
||||
.then(response => {
|
||||
if (response.data.records) {
|
||||
this.workshopList = response.data.records.map(o => ({ id: o.id, name: o.name }))
|
||||
} else {
|
||||
this.workshopList.splice(0)
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
if (this.tableData.id) {
|
||||
// 编辑组员
|
||||
// getCrewDetail(this.tableData.id).then(res => {
|
||||
// this.tableData = res.data
|
||||
// })
|
||||
// 经协商，不采用从后端获取的方式了，直接从父组件传递过来
|
||||
this.tableData.workerId = crewInfo.workerId // workerId 是必然存在的
|
||||
// eslint-disable-next-line
|
||||
this.tableData.workshopId = crewInfo.workshopList?.map(o => o.id) || [] // workshopList 不一定存在
|
||||
this.tableData.description = crewInfo.description || ''
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
handelConfirm() {
|
||||
this.$refs['crewForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.tableData.id ? update : add
|
||||
ajaxAction({ ...this.tableData, teamId: this.teamId }).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
this.resetForm()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
this.resetForm()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
216
src/views/basicData/GroupModule/components/group-member.vue
Normal file
216
src/views/basicData/GroupModule/components/group-member.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:24:19
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="'btn.add' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
:before-close="goback"
|
||||
:append-to-body="true"
|
||||
width="80%"
|
||||
>
|
||||
<el-form :model="listQuery" :inline="true" size="medium" label-width="50px">
|
||||
<el-form-item :label="$t('module.basicData.staff.Name')" prop="key">
|
||||
<el-input
|
||||
v-model="listQuery.key"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Name')])"
|
||||
style="width:200px"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list } from '@/api/basicData/GroupModule/staff'
|
||||
import { groupAttrAdd } from '@/api/basicData/GroupModule/groupAttr'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import basicData from '@/filters/basicData'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.addgroup'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.staff.Name')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.staff.EmployeeID')
|
||||
},
|
||||
{
|
||||
prop: 'sex',
|
||||
label: i18n.t('module.basicData.staff.Gender'),
|
||||
filter: basicData('sex')
|
||||
},
|
||||
{
|
||||
prop: 'entryTime',
|
||||
label: i18n.t('module.basicData.staff.EntryTime')
|
||||
},
|
||||
{
|
||||
prop: 'telephone',
|
||||
label: i18n.t('module.basicData.staff.Telephone')
|
||||
},
|
||||
{
|
||||
prop: 'wechatCode',
|
||||
label: i18n.t('module.basicData.staff.Wechat')
|
||||
},
|
||||
{
|
||||
prop: 'majorArr',
|
||||
label: i18n.t('module.basicData.staff.Profession')
|
||||
},
|
||||
{
|
||||
prop: 'workshop',
|
||||
label: i18n.t('module.basicData.staff.Workshop')
|
||||
},
|
||||
{
|
||||
prop: 'onDuty',
|
||||
label: i18n.t('module.basicData.staff.onDuty'),
|
||||
filter: basicData('onDuty')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: { Pagination, BaseTable, MethodBtn },
|
||||
props: {
|
||||
teamId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
tableProps,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
list: [],
|
||||
total: 0,
|
||||
teamLeaderId: '',
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
teamId: '',
|
||||
key: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.visible = true
|
||||
this.teamLeaderId = id
|
||||
this.listQuery.teamId = this.teamId
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.crewList = response.data.records
|
||||
this.crewList.forEach(item => {
|
||||
if (item.major) {
|
||||
item.majorArr = item.major.toString()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.crewList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'add') {
|
||||
const data = {
|
||||
workerId: raw.data.id,
|
||||
name: raw.data.name,
|
||||
teamId: this.teamId,
|
||||
current: this.listQuery.current,
|
||||
size: this.listQuery.size
|
||||
}
|
||||
groupAttrAdd(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
goback() {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
132
src/views/basicData/GroupModule/components/major-add.vue
Normal file
132
src/views/basicData/GroupModule/components/major-add.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-26 16:38:42
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter" :visible.sync="visible" width="50%" :close-on-click-modal="false">
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmit()">
|
||||
<!-- label-width="160px" -->
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.major.ProfessionalName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.major.ProfessionalName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.major.ProfessionalCoding')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.major.ProfessionalCoding')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.major.Abbreviation')" prop="abbreviation">
|
||||
<el-input
|
||||
v-model="dataForm.abbreviation"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.major.Abbreviation')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/GroupModule/major'
|
||||
import { refineData } from '@/utils/helpers'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
description: '',
|
||||
abbreviation: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.major.ProfessionalName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.major.ProfessionalCoding')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm = refineData(res.data, ['id', 'name', 'code', 'description', 'abbreviation'])
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
161
src/views/basicData/GroupModule/components/shift-add.vue
Normal file
161
src/views/basicData/GroupModule/components/shift-add.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-03-16 09:07:50
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-13 15:41:51
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\basicData\GroupModule\components\shift-add.vue
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="isdetail ? 'btn.detail' : !formData.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:visible.sync="visible"
|
||||
width="40%"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="dataForm" class="dataForm" :model="formData" :rules="rules">
|
||||
<!-- label-width="80px" -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.shift.name')" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.shift.name')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.shift.code')" prop="code">
|
||||
<el-input
|
||||
v-model="formData.code"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.shift.code')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.shift.remark')" prop="remark">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.shift.remark')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" size="medium" @click="handelConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" size="medium" @click="handelConfirm()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/GroupModule/shift'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
trueWidth: 100,
|
||||
isdetail: false,
|
||||
listLoading: false,
|
||||
list: [],
|
||||
formData: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
remark: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.shift.name')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.shift.code')]),
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id, isdetail) {
|
||||
this.isdetail = isdetail
|
||||
this.formData.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.formData.id) {
|
||||
detail(this.formData.id).then(res => {
|
||||
this.formData = res.data
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.formData.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
handelConfirm() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = this.formData
|
||||
if (this.formData.id) {
|
||||
update(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
add(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dataForm >>> .el-form-item__label {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
174
src/views/basicData/GroupModule/components/staff-add-config.js
Normal file
174
src/views/basicData/GroupModule/components/staff-add-config.js
Normal file
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* @Author: lb
|
||||
* @Date: 2022-04-12 09:37:56
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-12 09:37:56
|
||||
* @Description: staff add 页面的一些初始配置
|
||||
*/
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
import { list } from '@/api/basicData/GroupModule/department'
|
||||
import i18n from '@/lang'
|
||||
|
||||
// 员工表单字段
|
||||
export const staffForm = () => ({
|
||||
id: null,
|
||||
identity: '', // 身份证号
|
||||
code: '', // 员工号
|
||||
description: '', // 备注
|
||||
departmentId: null, // 部门id
|
||||
outTime: null, // 离职时间
|
||||
education: '', // 文化程度 - 数据字典
|
||||
email: '',
|
||||
entryTime: null, // 入职时间
|
||||
fileUrl: '', // 保存头像的地址或头像文件的id
|
||||
status: 1, // 离在职状态
|
||||
// enabled: 1, // deprecated
|
||||
belong: '', // 籍贯
|
||||
position: '', // 职位 - 填写
|
||||
majorId: [], // 专业id，多选
|
||||
name: '',
|
||||
onDuty: 1, // 是否在岗
|
||||
roleId: null, // 角色id，此页面已弃用该属性
|
||||
sex: null,
|
||||
reward: null, // 劳务报酬(新增) 小时/元 maybe 浮点
|
||||
preReward: null, // 劳务报酬浮点化之前的字符串
|
||||
telephone: null,
|
||||
wechatCode: '', // 微信号
|
||||
workshop: '' // 所属车间 - 填写
|
||||
})
|
||||
|
||||
// 员工表单字段验证规则
|
||||
export const staffFormValidationRules = vm => ({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.staff.Name')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
// 身份证
|
||||
identity: [
|
||||
{
|
||||
pattern: /^\d{17}\d|[xX]/,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.staff.rightIDFormat')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
telephone: [
|
||||
{
|
||||
pattern: /(^1\d{10}$)|(^[0-9]\d{7}$)/,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.staff.rightPhoneFormat')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.staff.rightEmailFormat')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.staff.Code')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
reward: [
|
||||
// 报酬
|
||||
{
|
||||
type: 'number',
|
||||
transform: value => Number(value),
|
||||
message: vm.$i18nForm(['placeholder.input', vm.$t('module.basicData.staff.rightRewardFormat')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 图片上传相关
|
||||
export const uploadConfig = {}
|
||||
|
||||
// 选项们
|
||||
export const sexOptions =
|
||||
// 性别选项
|
||||
[
|
||||
{
|
||||
label: i18n.t('module.basicData.staff.male'),
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: i18n.t('module.basicData.staff.female'),
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
|
||||
export const statusOptions =
|
||||
// 离在职状态选项
|
||||
[
|
||||
{
|
||||
label: i18n.t('module.basicData.staff.OnJob'),
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: i18n.t('module.basicData.staff.Dimission'),
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
|
||||
export const onDutyOptions =
|
||||
// 是否在岗选项
|
||||
[
|
||||
{
|
||||
label: i18n.t('module.basicData.staff.y'),
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: i18n.t('module.basicData.staff.n'),
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
|
||||
// 专业选项
|
||||
export let professionOptions = []
|
||||
// 文化程度选项
|
||||
export let educationLevelOptions = []
|
||||
|
||||
// 部门选项
|
||||
export let departmentOptions = []
|
||||
|
||||
// 教育程度列表
|
||||
export function educationLevelList(params) {
|
||||
const eduRecords = this.$store.getters.dictList.find(item => item.dictTypeId === '1543795966250946562')?.dataList
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve({
|
||||
data: {
|
||||
records: eduRecords.map(record => ({
|
||||
id: record.dataCode,
|
||||
label: record.dataName
|
||||
}))
|
||||
}
|
||||
})
|
||||
})
|
||||
// return new Promise((resolve, reject) => {
|
||||
// resolve({
|
||||
// data: {
|
||||
// records: [
|
||||
// { id: 0, label: '小学' },
|
||||
// { id: 1, label: '中学' },
|
||||
// { id: 2, label: '本科' },
|
||||
// { id: 3, label: '硕士' },
|
||||
// { id: 4, label: '博士' },
|
||||
// { id: 5, label: '其他' }
|
||||
// ]
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
}
|
||||
|
||||
export function departmentList(params) {
|
||||
return list(params)
|
||||
}
|
||||
697
src/views/basicData/GroupModule/components/staff-add.vue
Normal file
697
src/views/basicData/GroupModule/components/staff-add.vue
Normal file
@@ -0,0 +1,697 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-28 19:17:13
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ isDisabled ? 'btn.detail' : !staffData.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title>
|
||||
|
||||
<div class="content">
|
||||
<div ref="visualPart" v-auto-shadow class="visual-part">
|
||||
<el-row :gutter="15">
|
||||
<el-form ref="staffForm" :model="staffData" :rules="rules" size="medium">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<!-- 照片 -->
|
||||
<el-form-item
|
||||
:label="$t('module.basicData.staff.avatar')"
|
||||
style="padding-left:8px;display:flex;align-items:center;"
|
||||
>
|
||||
<!-- 员工照片：文件上传 -->
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
name="files"
|
||||
:disabled="isDisabled"
|
||||
:data="extraUploadParams"
|
||||
:action="uploadApi"
|
||||
:before-upload="validateImage"
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
:on-success="handleUploadSuccess"
|
||||
>
|
||||
<div v-if="imageUrl" :style="{ display: 'flex', alignItems: 'center' }">
|
||||
<img
|
||||
:src="imageUrl"
|
||||
style="margin-left: 8px;"
|
||||
class="avatar"
|
||||
alt="image"
|
||||
@click.prevent.stop="handlePreview"
|
||||
>
|
||||
<el-button type="text" :style="{ marginLeft: '8px' }">
|
||||
{{ $t('module.basicData.staff.changePhoto') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-col :span="12">
|
||||
<!-- 左列 -->
|
||||
<el-row>
|
||||
<!-- 员工姓名 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.EmployeeName')" prop="name">
|
||||
<el-input
|
||||
v-model="staffData.name"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.EmployeeName')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 身份证号 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.identity')" prop="identity">
|
||||
<el-input
|
||||
v-model="staffData.identity"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.identity')])"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 籍贯 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.placeOfBirth')" prop="belong">
|
||||
<el-input
|
||||
v-model="staffData.belong"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.placeOfBirth')])"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 性别 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.Gender')" prop="sex">
|
||||
<el-select
|
||||
v-model="staffData.sex"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.select', $t('module.basicData.staff.Gender')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in sexOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 微信号码 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.WechatNo')" prop="wechatCode">
|
||||
<el-input
|
||||
v-model="staffData.wechatCode"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.WechatNo')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 电话 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.tel')" prop="telephone">
|
||||
<el-input
|
||||
v-model="staffData.telephone"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.tel')])"
|
||||
clearable
|
||||
prefix-icon="el-icon-phone"
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 邮箱号 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.EmailNo')" prop="email">
|
||||
<el-input
|
||||
v-model="staffData.email"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.EmailNo')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 文化程度|教育程度 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.education')" prop="education">
|
||||
<el-select
|
||||
v-model="staffData.education"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.select', $t('module.basicData.staff.education')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in educationLevelOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 专业 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.Profession')" prop="majorId">
|
||||
<el-select
|
||||
ref="majorField"
|
||||
v-model="staffData.majorId"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.select', $t('module.basicData.staff.Profession')])"
|
||||
multiple
|
||||
filterable
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in professionOptions"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 右列 -->
|
||||
<el-row>
|
||||
<!-- 员工号 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.EmployeeID')" prop="code">
|
||||
<el-input v-model="staffData.code" :disabled="isDisabled" clearable :style="{ width: '100%' }" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 所属车间 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.Workshop')" prop="workshop">
|
||||
<el-input
|
||||
v-model="staffData.workshop"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Workshop')])"
|
||||
:style="{ width: '100%' }"
|
||||
clearable
|
||||
/>
|
||||
<!-- <el-select
|
||||
v-model="staffData.workshop"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Workshop')])"
|
||||
filterable
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in workshopOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 职位 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.position')" prop="position">
|
||||
<el-input
|
||||
v-model="staffData.position"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.position')])"
|
||||
:style="{ width: '100%' }"
|
||||
clearable
|
||||
/>
|
||||
<!-- <el-select
|
||||
ref="position"
|
||||
v-model="staffData.position"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.position')])"
|
||||
filterable
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in jobTitleOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 部门 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.Dept')" prop="departmentId">
|
||||
<el-select
|
||||
ref="department"
|
||||
v-model="staffData.departmentId"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.Dept')])"
|
||||
filterable
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in departmentOptions"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 入职时间 (默认当天) -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.EntryTime')" prop="entryTime">
|
||||
<el-date-picker
|
||||
id="@@picker"
|
||||
ref="picker"
|
||||
v-model="staffData.entryTime"
|
||||
:disabled="isDisabled"
|
||||
:style="{ width: '100%' }"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.EntryTime')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 状态 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.State')" prop="status">
|
||||
<el-radio-group
|
||||
v-model="staffData.status"
|
||||
:disabled="isDisabled"
|
||||
size="medium"
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 离职时间 -->
|
||||
<el-col v-show="isDimission" :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.outTime')" prop="outTime">
|
||||
<el-date-picker
|
||||
v-model="staffData.outTime"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.select', $t('module.basicData.staff.outTime')])"
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 是否在岗 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.onDuty')" prop="onDuty">
|
||||
<el-radio-group
|
||||
v-model="staffData.onDuty"
|
||||
:disabled="isDisabled"
|
||||
size="medium"
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<el-radio
|
||||
v-for="(item, index) in onDutyOptions"
|
||||
:key="index"
|
||||
:label="item.value"
|
||||
:disabled="disableOnDuty"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 劳务报酬 - 后续或许会添加单独的费用管理 -->
|
||||
<!-- <el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.staff.reward')" prop="reward">
|
||||
<el-input
|
||||
v-model="staffData.reward"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.staff.reward')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
>
|
||||
<template slot="append">
|
||||
{{ $t('module.basicData.staff.rewardUnit') }}
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="description">
|
||||
<el-input
|
||||
v-model="staffData.description"
|
||||
:disabled="isDisabled"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" size="medium" @click="staffDataSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<!-- </el-dialog> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/GroupModule/staff'
|
||||
import { list as majorList } from '@/api/basicData/GroupModule/major'
|
||||
|
||||
import {
|
||||
staffForm,
|
||||
staffFormValidationRules,
|
||||
// options
|
||||
sexOptions,
|
||||
statusOptions,
|
||||
onDutyOptions,
|
||||
// functions
|
||||
educationLevelList,
|
||||
departmentList
|
||||
} from './staff-add-config'
|
||||
import { uploadPath } from '@/api/basic'
|
||||
import { getUrl } from '@/api/file'
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
export default {
|
||||
name: 'StaffAdd',
|
||||
components: { SmallTitle },
|
||||
directives: {
|
||||
'auto-shadow': {
|
||||
bind: (el, binding, vnode) => {
|
||||
el.classList.add('at-bottom')
|
||||
el.addEventListener('scroll', function(e) {
|
||||
if (el.scrollTop === 0) {
|
||||
this.classList.remove('at-top')
|
||||
this.classList.add('at-bottom')
|
||||
} else if (el.scrollHeight - el.clientHeight - el.scrollTop <= 10) {
|
||||
this.classList.add('at-top')
|
||||
this.classList.remove('at-bottom')
|
||||
} else {
|
||||
this.classList.add('at-top')
|
||||
this.classList.add('at-bottom')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
roleList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
staffData: staffForm(),
|
||||
isDimission: false,
|
||||
disableOnDuty: false,
|
||||
sexOptions,
|
||||
statusOptions,
|
||||
onDutyOptions,
|
||||
professionOptions: [],
|
||||
educationLevelOptions: [],
|
||||
jobTitleOptions: [],
|
||||
departmentOptions: [],
|
||||
workshopOptions: [],
|
||||
visible: false,
|
||||
majorArr: [],
|
||||
uploadApi: uploadPath, // for upload
|
||||
imageUrl: '',
|
||||
extraUploadParams: {},
|
||||
domExists: false,
|
||||
isDisabled: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rules() {
|
||||
return staffFormValidationRules(this)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 'staffData.reward': function(val, old) {
|
||||
// if (val && !(typeof val === 'number')) {
|
||||
// console.log(val, typeof val)
|
||||
// this.staffData.reward = parseFloat(val)
|
||||
// console.log(this.staffData.reward, typeof this.staffData.reward)
|
||||
// }
|
||||
// },
|
||||
'staffData.status': function(val, old) {
|
||||
if (!val) {
|
||||
this.isDimission = true
|
||||
} else {
|
||||
this.isDimission = false
|
||||
this.staffData.outTime = null
|
||||
this.staffData.onDuty = 1
|
||||
}
|
||||
},
|
||||
'staffData.outTime': function(val) {
|
||||
if (val) {
|
||||
const outDate = new Date(val)
|
||||
if (outDate < Date.now()) {
|
||||
this.$set(this.staffData, 'onDuty', 0)
|
||||
this.disableOnDuty = true
|
||||
} else {
|
||||
this.disableOnDuty = false
|
||||
this.staffData.onDuty = 1
|
||||
}
|
||||
return
|
||||
}
|
||||
this.disableOnDuty = false
|
||||
this.staffData.onDuty = 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initLists() {
|
||||
// init profession list
|
||||
majorList({ current: 1, size: 999 }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.professionOptions = response.data.records.map((r, i) => ({
|
||||
id: r.id,
|
||||
name: r.name
|
||||
}))
|
||||
} else {
|
||||
this.professionOptions.splice(0)
|
||||
}
|
||||
})
|
||||
// init department list
|
||||
departmentList({ current: 1, size: 999, enabled: 1 }).then(response => {
|
||||
if (response.data) {
|
||||
this.departmentOptions = response.data.map((r, i) => ({
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
code: r.code
|
||||
}))
|
||||
} else {
|
||||
this.departmentOptions.splice(0)
|
||||
}
|
||||
})
|
||||
// init education list
|
||||
Array.from([{ method: educationLevelList.bind(this), container: 'educationLevelOptions' }]).forEach(item => {
|
||||
item.method({ current: 1, size: 999 }).then(response => {
|
||||
if (response.data.records) {
|
||||
this[item.container] = response.data.records.map((r, i) => ({
|
||||
_index: i,
|
||||
id: r.id,
|
||||
label: r.label,
|
||||
value: r.id || r.label
|
||||
}))
|
||||
} else {
|
||||
this[item.container].splice(0)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 初始化执行
|
||||
init(id, isDisabled = false) {
|
||||
this.domExists = true
|
||||
this.isDisabled = isDisabled
|
||||
this.initLists()
|
||||
this.disableOnDuty = false
|
||||
this.imageUrl = ''
|
||||
|
||||
this.staffData.id = id || null
|
||||
this.visible = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs['staffForm'].resetFields()
|
||||
if (this.staffData.id) {
|
||||
detail(this.staffData.id).then(res => {
|
||||
this.staffData = res.data
|
||||
|
||||
if (res.data.fileUrl) {
|
||||
// 如果有头像，则加载头像图片
|
||||
this.downloadFile(res.data.fileUrl)
|
||||
}
|
||||
// major 这块要单独特殊处理一下
|
||||
// 如果没有 majorId[] 的data给后端会报错
|
||||
// 但是如果新增时没有选择专业，编辑时后端不会返回 majorId 字段
|
||||
this.$set(this.staffData, 'majorId', res.data.majorId || [])
|
||||
})
|
||||
} else {
|
||||
// 初始化入职日期为当天
|
||||
this.staffData.entryTime = new Date()
|
||||
getCode().then(res => {
|
||||
this.staffData.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
staffDataSubmit() {
|
||||
this.$refs['staffForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.staffData.id ? update : add
|
||||
ajaxAction(this.staffData).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
this.$refs['staffForm'].resetFields()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 文件上传
|
||||
validateImage(file) {
|
||||
this.extraUploadParams.typeCode = 'avatar'
|
||||
|
||||
const isJPG = file.type === 'image/jpeg'
|
||||
const isLt2M = file.size / 1024 / 1024 < 2 // 小于2m
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error(this.$t('module.basicData.visual.upload.failedAndReason2')) // '上传头像图片只能是 JPG 格式!')
|
||||
}
|
||||
if (!isLt2M) {
|
||||
this.$message.error(this.$t('module.basicData.visual.upload.failedAndReason3')) // '上传头像图片大小不能超过 2MB!')
|
||||
}
|
||||
return isJPG && isLt2M
|
||||
},
|
||||
handlePreview() {},
|
||||
handleUploadSuccess(res, file) {
|
||||
// 上传文件
|
||||
// 发送请求更新用户信息的 fileUrl 字段
|
||||
this.staffData.fileUrl = res.data[0].id
|
||||
|
||||
// 本地把图片加载上
|
||||
this.imageUrl = URL.createObjectURL(file.raw)
|
||||
},
|
||||
downloadFile(attachmentId) {
|
||||
// 根据接口附件id是downloadList里项的fileId
|
||||
return getUrl({
|
||||
attachmentId,
|
||||
type: 1
|
||||
}).then(response => {
|
||||
const blob = new Blob([response.data])
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(blob)
|
||||
reader.onload = e => {
|
||||
this.imageUrl = e.target.result
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form,
|
||||
.drawer >>> .attr-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
|
||||
.at-top {
|
||||
box-shadow: inset 0 12px 16px -16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.at-bottom {
|
||||
box-shadow: inset 0 -12px 16px -16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
65
src/views/basicData/GroupModule/components/statusBtn.vue
Normal file
65
src/views/basicData/GroupModule/components/statusBtn.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-3-8 10:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-13 10:00:00
|
||||
* @Description: 启停状态的更新版本，更新日期2022.4.13
|
||||
-->
|
||||
<template>
|
||||
<el-switch v-model="state" type="text" size="small" :disabled="readonly" @change="changeHandler" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
state: false,
|
||||
payload: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
readonly() {
|
||||
return !!this.injectData.readonly
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.mapToState()
|
||||
},
|
||||
methods: {
|
||||
mapToState() {
|
||||
if (this.injectData.prop === 'currentStatus') {
|
||||
this.state = !!(this.injectData[this.injectData.prop].toString().trim() === 'true')
|
||||
return
|
||||
} else {
|
||||
this.state = !!+this.injectData[this.injectData.prop]
|
||||
return
|
||||
}
|
||||
},
|
||||
|
||||
changeHandler() {
|
||||
if (this.injectData.prop === 'enabled') {
|
||||
// 启停区域/缓存区
|
||||
this.payload.id = this.injectData.id
|
||||
this.payload.enabled = this.state ? 1 : 0
|
||||
} else {
|
||||
// 启停其他实体-该else分支后期可能会被删除
|
||||
this.payload.id = this.injectData.id
|
||||
this.payload.code = this.injectData.code
|
||||
this.payload.name = this.injectData.name
|
||||
this.payload.currentStatus = this.state
|
||||
}
|
||||
|
||||
this.$emit('emitData', {
|
||||
action: 'toggle-enabled-action',
|
||||
data: this.injectData.emitFullData ? { ...this.injectData, ...this.payload } : this.payload
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
32
src/views/basicData/GroupModule/components/viewDetailBtn.vue
Normal file
32
src/views/basicData/GroupModule/components/viewDetailBtn.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-3-8 10:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-13 10:00:00
|
||||
* @Description: 查看详情的更新版本，更新日期2022.4.13
|
||||
-->
|
||||
<template>
|
||||
<span>
|
||||
<el-button type="text" @click="emitClick">{{ injectData.buttonContent }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
actionName: {
|
||||
type: String,
|
||||
default: 'view-detail-action'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emitClick() {
|
||||
this.$emit('emitData', { action: this.actionName, data: { id: this.injectData.id }})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
267
src/views/basicData/GroupModule/group.vue
Normal file
267
src/views/basicData/GroupModule/group.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<!--/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditTime: 2022-04-15
|
||||
* @LastEditors: juzi
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="groupList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
@emitFun="handleTableEvents"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="calculateWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<group-edit v-if="updateVisible" ref="edit" @refreshDataList="getList" />
|
||||
<group-add v-if="addVisible" ref="add" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del, update } from '@/api/basicData/GroupModule/group'
|
||||
// import dataDict from '@/filters/DataDict'
|
||||
import GroupEdit from './components/group-edit.vue'
|
||||
import GroupAdd from './components/group-add.vue'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
|
||||
import StatusBtn from './components/statusBtn.vue'
|
||||
import ViewDetailBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.group.CreateTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.group.TeamName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.group.TeamCode')
|
||||
},
|
||||
{
|
||||
prop: 'teamNumber',
|
||||
label: i18n.t('module.basicData.group.NumberOfTeams')
|
||||
},
|
||||
{
|
||||
prop: 'teamLeader',
|
||||
label: i18n.t('module.basicData.group.GroupLeader')
|
||||
},
|
||||
{
|
||||
prop: 'workStatus',
|
||||
label: i18n.t('module.basicData.group.TeamStatus'),
|
||||
subcomponent: StatusBtn,
|
||||
emitFullData: true
|
||||
},
|
||||
{
|
||||
prop: 'teamMember',
|
||||
label: i18n.t('module.basicData.group.TeamMember'),
|
||||
subcomponent: ViewDetailBtn,
|
||||
buttonContent: i18n.t('module.basicData.group.ViewTeamMember')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Group',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, GroupEdit, GroupAdd },
|
||||
data() {
|
||||
return {
|
||||
updateVisible: false,
|
||||
addVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
groupList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder:
|
||||
this.$t('module.basicData.group.TeamName') +
|
||||
this.$t('module.basicData.visual.Or') +
|
||||
this.$t('module.basicData.group.GroupLeader'),
|
||||
param: 'key'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 在主页面直接更新班组状态
|
||||
toggleGroupStatus(data) {
|
||||
update({
|
||||
workStatus: data.currentStatus ? 1 : 0,
|
||||
id: data.id,
|
||||
code: data.code,
|
||||
name: data.name,
|
||||
teamLeaderId: data.teamLeaderId // required
|
||||
}).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
})
|
||||
},
|
||||
// 显示班组的组员
|
||||
displayGroupMembers(data) {
|
||||
this.addNew(data.id, true)
|
||||
},
|
||||
// 处理开关和查看组员详情的事件
|
||||
handleTableEvents({ action, data }) {
|
||||
if (action === 'toggle-enabled-action') {
|
||||
// 启停班组状态
|
||||
this.toggleGroupStatus(data)
|
||||
} else if (action === 'view-detail-action') {
|
||||
// 查看一个班组的组员
|
||||
this.displayGroupMembers(data)
|
||||
}
|
||||
},
|
||||
// 处理编辑和删除按钮
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.key = this.headFormValue.key
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.groupList = response.data.records
|
||||
} else {
|
||||
this.groupList.splice(0, this.groupList.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, isdetail) {
|
||||
if (id) {
|
||||
this.updateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.edit.init(id, isdetail)
|
||||
})
|
||||
} else {
|
||||
this.addVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.add.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
// add
|
||||
}
|
||||
}
|
||||
</script>
|
||||
230
src/views/basicData/GroupModule/major.vue
Normal file
230
src/views/basicData/GroupModule/major.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-04-26 16:38:42
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="majorList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<major-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/GroupModule/major'
|
||||
import majorAdd from './components/major-add.vue'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.factory.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.major.ProfessionalName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.major.ProfessionalCoding')
|
||||
},
|
||||
{
|
||||
prop: 'abbreviation',
|
||||
label: i18n.t('module.basicData.major.Abbreviation')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Major',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, majorAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
majorList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.major.ProfessionalName'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.majorList = response.data.records
|
||||
} else {
|
||||
this.majorList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
227
src/views/basicData/GroupModule/shift.vue
Normal file
227
src/views/basicData/GroupModule/shift.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditTime: 2022-07-28 20:35:09
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="dataList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<group-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/GroupModule/shift'
|
||||
import groupAdd from './components/shift-add.vue'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
// {
|
||||
// type: 'detail',
|
||||
// btnName: 'btn.detail'
|
||||
// },
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.shift.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.shift.nameForSearch')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.shift.codeField')
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.shift.remark')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Group',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, groupAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
name: '',
|
||||
code: ''
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.shift.nameForSearch'),
|
||||
param: 'key'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNew(raw.data.id)
|
||||
} else {
|
||||
this.addNew(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.key
|
||||
// this.listQuery.code = this.headFormValue.key
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.dataList = response.data.records
|
||||
} else {
|
||||
this.dataList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, isdetail) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, isdetail)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
361
src/views/basicData/GroupModule/staff.vue
Normal file
361
src/views/basicData/GroupModule/staff.vue
Normal file
@@ -0,0 +1,361 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditTime: 2022-07-28 19:02:55
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form
|
||||
:form-config="headFormConfig"
|
||||
@headBtnClick="btnClick"
|
||||
@importFile="handleImportResult"
|
||||
@importFileError="handleImportResult"
|
||||
/>
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="calculateWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
|
||||
<!-- footer part -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<staff-add v-if="addOrUpdateVisible" ref="addOrUpdate" :role-list="roleList" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del, getRoleList } from '@/api/basicData/GroupModule/staff'
|
||||
import staffAdd from './components/staff-add.vue'
|
||||
import moment from 'moment'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import basicData from '@/filters/basicData'
|
||||
import { nonEmptyFilter, timeFormatter } from '@/filters'
|
||||
|
||||
// import DictFilter from '@/components/BaseTable/subcomponents/DataDictFilter'
|
||||
// import { workerRoleList } from '@/api/dict'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: 'btn.detail'
|
||||
},
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.staff.CreateTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.staff.Name')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.staff.EmployeeID')
|
||||
},
|
||||
// {
|
||||
// prop: 'roleName',
|
||||
// label: i18n.t('module.basicData.staff.role'),
|
||||
//
|
||||
// // subcomponent: DictFilter,
|
||||
// // filter: workerRoleList
|
||||
// },
|
||||
{
|
||||
prop: 'sex',
|
||||
label: i18n.t('module.basicData.staff.Gender'),
|
||||
filter: basicData('sex')
|
||||
},
|
||||
{
|
||||
prop: 'entryTime',
|
||||
label: i18n.t('module.basicData.staff.EntryTime'),
|
||||
filter: val => moment(val).format('YYYY-MM-DD') || '-'
|
||||
},
|
||||
{
|
||||
prop: 'telephone',
|
||||
label: i18n.t('module.basicData.staff.Telephone'),
|
||||
filter: nonEmptyFilter
|
||||
},
|
||||
{
|
||||
label: i18n.t('module.basicData.staff.State'),
|
||||
prop: 'status',
|
||||
filter: basicData('registerState')
|
||||
},
|
||||
{
|
||||
prop: 'department',
|
||||
label: i18n.t('module.basicData.staff.Dept'),
|
||||
filter: nonEmptyFilter
|
||||
},
|
||||
{
|
||||
prop: 'email',
|
||||
label: i18n.t('module.basicData.staff.Email'),
|
||||
filter: nonEmptyFilter
|
||||
},
|
||||
{
|
||||
prop: 'wechatCode',
|
||||
label: i18n.t('module.basicData.staff.Wechat'),
|
||||
filter: nonEmptyFilter
|
||||
},
|
||||
{
|
||||
prop: 'majorArr',
|
||||
label: i18n.t('module.basicData.staff.Profession'),
|
||||
filter: nonEmptyFilter
|
||||
},
|
||||
{
|
||||
prop: 'workshop',
|
||||
label: i18n.t('module.basicData.staff.Workshop'),
|
||||
filter: nonEmptyFilter
|
||||
},
|
||||
{
|
||||
prop: 'onDuty',
|
||||
label: i18n.t('module.basicData.staff.onDuty'),
|
||||
filter: basicData('onDuty')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: i18n.t('module.basicData.visual.Remarks'),
|
||||
filter: nonEmptyFilter
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Staff',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, staffAdd },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
list: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
roleList: [],
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
name: '', // 姓名（关键字）
|
||||
status: '' // 状态：在职、离职
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.staff.EmployeeName'),
|
||||
placeholder: this.$t('module.basicData.staff.EmployeeName'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: i18n.t('module.basicData.staff.State'),
|
||||
selectOptions: [
|
||||
{ id: 1, name: i18n.t('module.basicData.staff.OnJob') },
|
||||
{ id: 0, name: i18n.t('module.basicData.staff.Dimission') }
|
||||
],
|
||||
param: 'status'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
type: 'uploadButton',
|
||||
btnName: 'btn.import',
|
||||
action: '/api/basic/worker/importInfo',
|
||||
name: 'import',
|
||||
nameField: 'excel', // 设置上传的参数名,接口文档里是excel
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: i18n.t('module.basicData.staff.downloadTemplate'),
|
||||
name: 'download'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getRole()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'detail') {
|
||||
this.addNew(raw.data.id, true)
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
this.listQuery.status = this.headFormValue.status
|
||||
list(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.list = response.data.records
|
||||
this.list.forEach(item => {
|
||||
if (item.major) {
|
||||
item.majorArr = item.major.toString()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.list.splice(0, this.list.length)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
async getRole() {
|
||||
const res = await getRoleList()
|
||||
this.roleList = res.data.records
|
||||
this.getList()
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
} else if (this.headFormValue.btnName === 'download') {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.staff.startDownload'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
// 下载模板
|
||||
import('@/assets/excels/staff_template.xlsx').then(({ default: src }) => {
|
||||
const a = document.createElement('a')
|
||||
a.href = src
|
||||
document.body.appendChild(a)
|
||||
a.download = '员工信息模板文件' // 设置文件名
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
|
||||
handleImportResult({ response, file, fileList }) {
|
||||
if (response.data) {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.upload.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.upload.failedAndReason1'),
|
||||
type: 'error',
|
||||
duration: 2500
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 新增 / 修改
|
||||
addNew(id, isDisabled) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, isDisabled)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
481
src/views/basicData/Materials/components/material-add-drawer.vue
Normal file
481
src/views/basicData/Materials/components/material-add-drawer.vue
Normal file
@@ -0,0 +1,481 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-28 21:15:44
|
||||
* @enName:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ isdetail ? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title>
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="100px"
|
||||
label-position="top"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 物料名称 -->
|
||||
<el-form-item :label="$t('module.basicData.material.MaterialName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.MaterialName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 物料编码 -->
|
||||
<el-form-item :label="$t('module.basicData.material.MaterialCoding')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.MaterialCoding')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 英文名称 -->
|
||||
<el-form-item :label="$t('module.basicData.material.EnglishName')" prop="enName">
|
||||
<el-input
|
||||
v-model="dataForm.enName"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.EnglishName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 缩写 -->
|
||||
<el-form-item :label="$t('module.basicData.material.Abbreviation')" prop="abbr">
|
||||
<el-input
|
||||
v-model="dataForm.abbr"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.Abbreviation')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<!-- 物料类型 -->
|
||||
<el-form-item :label="$t('module.basicData.material.MaterialType')" prop="materialTypeId">
|
||||
<el-select
|
||||
v-model="dataForm.materialTypeId"
|
||||
:style="{ width: '100%' }"
|
||||
:disabled="isdetail"
|
||||
filterable
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.MaterialType')])"
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="item in categoryArr" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- 规格描述 -->
|
||||
<el-form-item :label="$t('module.basicData.material.unit')" prop="unit">
|
||||
<el-select
|
||||
v-model="dataForm.unit"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.unit')])"
|
||||
clearable
|
||||
>
|
||||
<el-option v-for="u in units" :key="u.dataCode" :label="u.dataName" :value="u.dataCode" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- 规格描述 -->
|
||||
<el-form-item :label="$t('module.basicData.material.description')" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.description')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<!-- 备注 -->
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
type="textarea"
|
||||
:disabled="isdetail"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<small-title v-if="dataForm.id" style="padding-left: 8px;">
|
||||
{{ $t('module.basicData.material.inspectionDetail') }}
|
||||
</small-title>
|
||||
|
||||
<div class="attr-list">
|
||||
<!-- 物料属性表格 -->
|
||||
<base-table
|
||||
v-if="dataForm.id"
|
||||
:top-btn-config="!isdetail && listQuery.materialId ? topBtnConfig : []"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="attributeList"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn v-if="!isdetail" slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="close">{{ 'btn.back' | i18nFilter }}</el-button>
|
||||
<el-button v-if="!isdetail" type="warning" @click="resetForm">{{ 'btn.reset' | i18nFilter }}</el-button>
|
||||
<el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
|
||||
<el-button v-if="!isdetail" type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 物料属性添加 -->
|
||||
<material-attr-add
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="addOrUpdate"
|
||||
:material-id="listQuery.materialId"
|
||||
@refreshDataList="getList"
|
||||
/>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import {
|
||||
detail,
|
||||
update,
|
||||
add,
|
||||
getCode,
|
||||
getAttributeList,
|
||||
deleteAttribute,
|
||||
getTypeList
|
||||
} from '@/api/basicData/Materials/material'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import materialAttrAdd from './materialAttr-add'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.material.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'attrName',
|
||||
label: i18n.t('module.basicData.material.AttributeName')
|
||||
},
|
||||
{
|
||||
prop: 'attrValue',
|
||||
label: i18n.t('module.basicData.material.AttributeValue')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
components: { BaseTable, MethodBtn, SmallTitle, materialAttrAdd },
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
visible: false,
|
||||
categoryArr: [],
|
||||
tableBtn,
|
||||
topBtnConfig,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
attributeList: [],
|
||||
dataForm: {
|
||||
name: '',
|
||||
code: '',
|
||||
enName: '',
|
||||
abbr: '',
|
||||
materialTypeId: '',
|
||||
description: '',
|
||||
remark: '',
|
||||
unit: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.MaterialName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.MaterialCoding')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 990,
|
||||
materialId: null
|
||||
},
|
||||
isdetail: false,
|
||||
units: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const unitTypeId = '1'
|
||||
this.units = this.$store.getters.dictList.find(item => item.dictTypeId === unitTypeId)?.dataList || []
|
||||
},
|
||||
|
||||
methods: {
|
||||
resetForm() {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
// 按逻辑这里应该重新请求一个物料编码
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
},
|
||||
|
||||
initDataForm() {
|
||||
this.dataForm = {
|
||||
name: '',
|
||||
code: '',
|
||||
enName: '',
|
||||
abbr: '',
|
||||
materialTypeId: null,
|
||||
description: '',
|
||||
remark: '',
|
||||
unit: ''
|
||||
}
|
||||
|
||||
this.listQuery = {
|
||||
current: 1,
|
||||
size: 990,
|
||||
materialId: null
|
||||
}
|
||||
},
|
||||
|
||||
init(id, isdetail) {
|
||||
this.initDataForm()
|
||||
if (id) this.listQuery.materialId = id
|
||||
this.isdetail = !!isdetail
|
||||
this.attributeList.splice(0)
|
||||
|
||||
getTypeList(this.listQuery).then(response => {
|
||||
this.categoryArr = response.data.records
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
// this.$refs['dataForm'].resetFields()
|
||||
if (this.listQuery.materialId) {
|
||||
detail(this.listQuery.materialId).then(res => {
|
||||
this.dataForm = res.data
|
||||
})
|
||||
getAttributeList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.attributeList = response.data.records
|
||||
} else {
|
||||
this.attributeList.splice(0)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
this.visible = true
|
||||
})
|
||||
},
|
||||
|
||||
getList() {
|
||||
getAttributeList(this.listQuery).then(response => {
|
||||
if (response.data.records) {
|
||||
this.attributeList = response.data.records
|
||||
} else {
|
||||
this.attributeList.splice(0)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.attrName}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
deleteAttribute(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const data = {
|
||||
name: this.dataForm.name,
|
||||
code: this.dataForm.code,
|
||||
enName: this.dataForm.enName,
|
||||
description: this.dataForm.description,
|
||||
remark: this.dataForm.remark,
|
||||
abbr: this.dataForm.abbr,
|
||||
materialTypeId: this.dataForm.materialTypeId,
|
||||
id: this.listQuery.materialId,
|
||||
unit: this.dataForm.unit
|
||||
}
|
||||
|
||||
const ajaxAction = this.listQuery.materialId ? update : add
|
||||
ajaxAction(data).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.close()
|
||||
}
|
||||
})
|
||||
})
|
||||
// if (this.listQuery.materialId) {
|
||||
// update(data).then(res => {
|
||||
// this.$message({
|
||||
// message: this.$t('module.basicData.visual.success'),
|
||||
// type: 'success',
|
||||
// duration: 1500
|
||||
// })
|
||||
// })
|
||||
// } else {
|
||||
// add(data).then(res => {
|
||||
// this.$message({
|
||||
// message: this.$t('module.basicData.visual.success'),
|
||||
// type: 'success',
|
||||
// duration: 1500
|
||||
// })
|
||||
// this.listQuery.materialId = res.data.id
|
||||
// })
|
||||
// }
|
||||
}
|
||||
})
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$emit('refreshDataList')
|
||||
this.visible = false
|
||||
},
|
||||
goEdit() {
|
||||
this.isdetail = false
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
.drawer >>> .el-form,
|
||||
.drawer >>> .attr-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
</style>
|
||||
134
src/views/basicData/Materials/components/materialAttr-add.vue
Normal file
134
src/views/basicData/Materials/components/materialAttr-add.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-25 16:31:03
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:visible.sync="visible"
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
:append-to-body="true"
|
||||
width="35%"
|
||||
class="dialog"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- <small-title slot="title">
|
||||
{{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
|
||||
</small-title> -->
|
||||
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
label-width="100px"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<el-form-item :label="$t('module.basicData.material.AttributeName')" prop="attrName">
|
||||
<el-input
|
||||
v-model="dataForm.attrName"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.AttributeName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.material.AttributeValue')" prop="attrValue">
|
||||
<el-input
|
||||
v-model="dataForm.attrValue"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.material.AttributeValue')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">
|
||||
{{ 'btn.confirm' | i18nFilter }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add } from '@/api/basicData/Materials/materialAttr'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
materialId: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
btnLoading: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
attrName: '',
|
||||
attrValue: ''
|
||||
},
|
||||
dataRule: {
|
||||
attrName: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.AttributeName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
attrValue: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.AttributeValue')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.btnLoading = false
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm.attrName = res.data.attrName
|
||||
this.dataForm.attrValue = res.data.attrValue
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.btnLoading = true
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction({ ...this.dataForm, materialId: this.materialId }).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog >>> .el-dialog__body {
|
||||
padding: 30px 24px;
|
||||
}
|
||||
</style>
|
||||
133
src/views/basicData/Materials/components/materialsType-add.vue
Normal file
133
src/views/basicData/Materials/components/materialsType-add.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-03-25 16:26:33
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
|
||||
width="40%"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
class="data-form"
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
>
|
||||
<!-- label-width="80px" -->
|
||||
<el-form-item :label="$t('module.basicData.materialsType.TypeName')" prop="name">
|
||||
<el-input
|
||||
v-model="dataForm.name"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.materialsType.TypeName')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.materialsType.TypeCode')" prop="code">
|
||||
<el-input
|
||||
v-model="dataForm.code"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.materialsType.TypeCode')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
:placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row style="text-align: right">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</el-row>
|
||||
<!-- <span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</span> -->
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { detail, update, add, getCode } from '@/api/basicData/Materials/materialsType'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
code: '',
|
||||
remark: ''
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.materialsType.TypeName')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.materialsType.TypeCode')]),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) {
|
||||
this.dataForm.id = id || ''
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
detail(this.dataForm.id).then(res => {
|
||||
this.dataForm.name = res.data.name
|
||||
this.dataForm.code = res.data.code
|
||||
this.dataForm.remark = res.data.remark
|
||||
})
|
||||
} else {
|
||||
getCode().then(res => {
|
||||
this.dataForm.code = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.data-form >>> .el-form-item__label {
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
276
src/views/basicData/Materials/material.vue
Normal file
276
src/views/basicData/Materials/material.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<!--
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditTime: 2022-07-25 10:31:38
|
||||
* @LastEditors: gtz
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="materialList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
@emitFun="handleViewDetail"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="calculateWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
|
||||
<material-add-drawer v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import { list, del } from '@/api/basicData/Materials/material'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
import MaterialAddDrawer from './components/material-add-drawer.vue'
|
||||
|
||||
import ViewDetailBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
import newBasicData from '@/filters/newBasicData'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
// {
|
||||
// type: 'detail',
|
||||
// btnName: 'btn.detail'
|
||||
// },
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
// {
|
||||
// type: 'detail',
|
||||
// btnName: 'btn.detail'
|
||||
// }
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.material.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.material.MaterialName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.material.MaterialCoding')
|
||||
},
|
||||
{
|
||||
prop: 'enName',
|
||||
label: i18n.t('module.basicData.material.EnglishName')
|
||||
},
|
||||
{
|
||||
prop: 'abbr',
|
||||
label: i18n.t('module.basicData.material.Abbreviation')
|
||||
},
|
||||
{
|
||||
prop: 'materialType',
|
||||
label: i18n.t('module.basicData.material.MaterialType')
|
||||
},
|
||||
{
|
||||
prop: 'unit',
|
||||
label: i18n.t('module.basicData.material.unit'),
|
||||
filter: newBasicData('1')
|
||||
},
|
||||
// {
|
||||
// prop: 'description',
|
||||
// label: i18n.t('module.basicData.visual.Description'),
|
||||
//
|
||||
// },
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
},
|
||||
{
|
||||
prop: 'detail',
|
||||
label: i18n.t('module.basicData.material.detail'),
|
||||
subcomponent: ViewDetailBtn,
|
||||
buttonContent: i18n.t('module.basicData.material.viewDetail')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'Material',
|
||||
components: { Pagination, BaseTable, MethodBtn, HeadForm, MaterialAddDrawer },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 240,
|
||||
tableProps,
|
||||
materialList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.material.MaterialName'),
|
||||
placeholder: this.$t('module.basicData.material.MaterialName'),
|
||||
param: 'name',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.material.MaterialCoding'),
|
||||
placeholder: this.$t('module.basicData.material.MaterialCoding'),
|
||||
param: 'code',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleViewDetail({ data }) {
|
||||
// 查看详情, action 默认为查看详情
|
||||
this.addNewDrawer(data.id, true)
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
this.addNewDrawer(raw.data.id)
|
||||
} else {
|
||||
this.addNewDrawer(raw.data.id, true)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
this.listQuery.code = this.headFormValue.code
|
||||
list({ ...this.listQuery }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.materialList = response.data.records
|
||||
} else {
|
||||
this.materialList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNewDrawer()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id, isdetail) {
|
||||
this.$router.push({
|
||||
name: 'MaterialAdd',
|
||||
query: {
|
||||
id: id,
|
||||
isdetail: isdetail
|
||||
}
|
||||
})
|
||||
},
|
||||
addNewDrawer(id, isdetail) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id, isdetail)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
227
src/views/basicData/Materials/materialsType.vue
Normal file
227
src/views/basicData/Materials/materialsType.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<!--/*
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 15:41:11
|
||||
* @LastEditTime: 2022-04-15
|
||||
* @LastEditors: juzi
|
||||
* @Description: 拆分了搜索区和功能按钮区，增加了toptitle
|
||||
*/
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="typeList"
|
||||
:is-loading="listLoading"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn
|
||||
slot="handleBtn"
|
||||
:width="calculateWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
<materialsType-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import { list, del } from '@/api/basicData/Materials/materialsType'
|
||||
import materialsTypeAdd from './components/materialsType-add.vue'
|
||||
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { timeFormatter } from '@/filters'
|
||||
/**
|
||||
* 表格表头配置项 TypeScript接口注释
|
||||
* tableConfig<ConfigItem> = []
|
||||
*
|
||||
* Interface ConfigItem = {
|
||||
* prop: string,
|
||||
* label: string,
|
||||
* width: string,
|
||||
* align: string,
|
||||
* subcomponent: function,
|
||||
* filter: function
|
||||
* }
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'btn.add'
|
||||
}
|
||||
]
|
||||
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: i18n.t('module.basicData.material.createTime'),
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.basicData.materialsType.TypeName')
|
||||
},
|
||||
{
|
||||
prop: 'code',
|
||||
label: i18n.t('module.basicData.materialsType.TypeCode')
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: i18n.t('module.basicData.visual.Remarks')
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'MaterialsType',
|
||||
components: { Pagination, BaseTable, MethodBtn, materialsTypeAdd, HeadForm },
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
published: 'success',
|
||||
draft: 'info',
|
||||
deleted: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addOrUpdateVisible: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
trueWidth: 200,
|
||||
tableProps,
|
||||
typeList: [],
|
||||
total: 0,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.basicData.visual.keyword'),
|
||||
placeholder: this.$t('module.basicData.materialsType.TypeName'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
handleClick(raw) {
|
||||
console.log(raw)
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else {
|
||||
this.addNew(raw.data.id)
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
list({ ...this.listQuery, name: this.headFormValue.name }).then(response => {
|
||||
if (response.data.records) {
|
||||
this.typeList = response.data.records
|
||||
} else {
|
||||
this.typeList.splice(0)
|
||||
}
|
||||
this.total = response.data.total
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew()
|
||||
}
|
||||
},
|
||||
// 新增 / 修改
|
||||
addNew(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.cancel-btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
</style>
|
||||
330
src/views/basicData/ProductDelivery/carList.vue
Normal file
330
src/views/basicData/ProductDelivery/carList.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<!--
|
||||
@Author: lb
|
||||
@Date: 2022-05-27 11:00:00
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2022-07-25 10:31:47
|
||||
@Description: 发车清单
|
||||
-->
|
||||
<template>
|
||||
<div class="app-container padding-fixed">
|
||||
<!-- 发车清单 - 路由页面 -->
|
||||
<head-form :form-config="headFormConfig" />
|
||||
|
||||
<div style="max-height: 65vh; overflow-y: scroll;">
|
||||
<base-table
|
||||
:top-btn-config="topBtnConfig"
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:table-config="tableProps"
|
||||
:table-data="carlist"
|
||||
:is-loading="listLoading"
|
||||
@emitFun="handleTableEvents"
|
||||
@clickTopBtn="clickTopBtn"
|
||||
>
|
||||
<method-btn slot="handleBtn" :width="calculateWidth" :method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
</div>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
|
||||
<carlist-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
|
||||
<payload-detail v-if="renderPayloadDetailDrawer" ref="payloadDetail" />
|
||||
|
||||
<el-row class="return-btn__row">
|
||||
<div class="return-btn__wrapper">
|
||||
<div class="return-btn">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="return-icon"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
|
||||
<button class="return-btn__inner" @click="$router.go(-1)">返回</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import newBasicData from '@/filters/newBasicData'
|
||||
import commonBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
|
||||
import { timeFormatter } from '@/filters'
|
||||
|
||||
import { getCars, del /** , update, add */ } from '@/api/basicData/ProductDelivery/car'
|
||||
|
||||
import PayloadDetail from './components/payload-detail-in-delivery.vue'
|
||||
import CarlistAdd from './components/carlist-add.vue'
|
||||
|
||||
const topBtnConfig = [
|
||||
{
|
||||
type: 'add',
|
||||
btnName: 'add'
|
||||
}
|
||||
]
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: 'btn.edit'
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: 'btn.delete'
|
||||
}
|
||||
]
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'startLoadTime',
|
||||
// label: i18n.t('module.packingManage.PackingList.shelfId'),
|
||||
label: '开始装货时间',
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'deliveryCarCode',
|
||||
label: '发车编码'
|
||||
},
|
||||
{
|
||||
prop: 'plate',
|
||||
label: '车牌'
|
||||
},
|
||||
{
|
||||
prop: 'contactPerson',
|
||||
label: '车辆联系人'
|
||||
},
|
||||
{
|
||||
prop: 'quantity',
|
||||
label: '装车数量'
|
||||
},
|
||||
{
|
||||
prop: 'unitId',
|
||||
label: '单位',
|
||||
|
||||
filter: newBasicData('1')
|
||||
},
|
||||
{
|
||||
prop: 'description',
|
||||
label: '车辆描述信息'
|
||||
},
|
||||
{
|
||||
prop: '装货清单',
|
||||
label: '装货清单',
|
||||
width: 150,
|
||||
subcomponent: commonBtn,
|
||||
buttonContent: '装货清单明细',
|
||||
actionName: 'view-cargo-list',
|
||||
emitFullData: true
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'CarList',
|
||||
components: { HeadForm, CarlistAdd, BaseTable, Pagination, MethodBtn, PayloadDetail },
|
||||
data() {
|
||||
return {
|
||||
listLoading: false,
|
||||
topBtnConfig,
|
||||
tableBtn,
|
||||
tableProps,
|
||||
deliveryId: null,
|
||||
renderPayloadDetailDrawer: false,
|
||||
orderMeta: {
|
||||
id: null,
|
||||
name: '',
|
||||
deliveryCode: null
|
||||
},
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '订单名',
|
||||
placeholder: '订单名',
|
||||
disabled: true,
|
||||
param: 'orderName',
|
||||
defaultSelect: '' // 动态传入订单名
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '发货单号',
|
||||
placeholder: '发货单号',
|
||||
disabled: true,
|
||||
param: 'orderNo',
|
||||
defaultSelect: '' // 动态传入发货单号
|
||||
}
|
||||
],
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20
|
||||
},
|
||||
total: 0,
|
||||
trueWidth: 200,
|
||||
carlist: [],
|
||||
addOrUpdateVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
calculateWidth() {
|
||||
return this.tableBtn.length * 40 // 操作列的每个按钮宽度40
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.deliveryId = this.$route.params.deliveryId // 用于获取分页数据
|
||||
|
||||
// 填充订单数据，往下级组件传递
|
||||
this.orderMeta.id = this.$route.params.orderId
|
||||
this.orderMeta.name = this.$route.params.orderName
|
||||
this.orderMeta.deliveryCode = this.$route.params.deliveryCode
|
||||
|
||||
console.log('params', this.orderMeta)
|
||||
|
||||
// 动态更改 headFormConfig 显示
|
||||
this.headFormConfig[0].defaultSelect = this.orderMeta.name
|
||||
this.headFormConfig[1].defaultSelect = this.orderMeta.deliveryCode
|
||||
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
return getCars(this.deliveryId).then(res => {
|
||||
if (res.data.length > 0) {
|
||||
this.carlist = res.data
|
||||
} else {
|
||||
this.carlist.splice(0)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleTableEvents({ action, data }) {
|
||||
let chosenAction = null
|
||||
switch (action) {
|
||||
case 'view-cargo-list':
|
||||
chosenAction = this.handleViewCarlist
|
||||
break
|
||||
// other cases
|
||||
}
|
||||
// 还要传递额外的订单信息
|
||||
if (chosenAction) chosenAction({ ...data, order: this.orderMeta })
|
||||
},
|
||||
handleViewCarlist(data) {
|
||||
this.renderPayloadDetailDrawer = true
|
||||
this.$nextTick(() => {
|
||||
console.log('before detail list:', data)
|
||||
this.$refs.payloadDetail.init(data)
|
||||
})
|
||||
},
|
||||
clickTopBtn(val) {
|
||||
if (val === 'add') {
|
||||
this.addNew({ productDeliveryLogId: this.deliveryId })
|
||||
}
|
||||
},
|
||||
addNew(data) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(data)
|
||||
})
|
||||
},
|
||||
handleClick(raw) {
|
||||
if (raw.type === 'delete') {
|
||||
this.$confirm(
|
||||
`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.deliveryCarCode}]?`,
|
||||
this.$t('module.basicData.visual.Tips'),
|
||||
{
|
||||
confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
|
||||
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
del(raw.data.id).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
} else if (raw.type === 'edit') {
|
||||
// 编辑
|
||||
// this.addNew({ deliveryId: raw.data.id, orderId: raw.data.orderId }, false)
|
||||
this.addNew(raw.data, false)
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/** Start === 下面的这些样式都是为了本页面的返回按钮服务 */
|
||||
.app-container.padding-fixed {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.return-btn__row {
|
||||
text-align: right;
|
||||
margin-top: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.return-btn__wrapper {
|
||||
display: inline-block;
|
||||
background-color: #0b58ff;
|
||||
border-radius: 5px;
|
||||
transition: background-color, 0.2s ease-out;
|
||||
}
|
||||
|
||||
.return-btn__wrapper:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.return-btn__wrapper * {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.return-btn__wrapper:hover * {
|
||||
color: #5387f5;
|
||||
}
|
||||
|
||||
.return-btn__wrapper > .return-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.return-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.return-btn__inner {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
/** end === 结束块 */
|
||||
</style>
|
||||
114
src/views/basicData/ProductDelivery/components/PieChart.vue
Normal file
114
src/views/basicData/ProductDelivery/components/PieChart.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div ref="pie-chart" class="pie-chart" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
// require('echarts/theme/macarons') // echarts theme
|
||||
// import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
unloadMount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
radius: {
|
||||
type: [String, Number],
|
||||
default: '30%'
|
||||
},
|
||||
stillShowZeroSum: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
tooltip: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
formatter: '{a}: {b} - {c}'
|
||||
})
|
||||
}
|
||||
// 添加[传入]一些[默认]配置，参考echarts api
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.chart) {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('before destroy')
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
deactivated() {
|
||||
console.log('deactivated')
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
transformDataListToSeries() {
|
||||
if (this.dataList.length > 0) {
|
||||
const data = []
|
||||
this.dataList.map(item => {
|
||||
data.push({
|
||||
name: item.deliveryCode,
|
||||
value: item.deliveryQuantity
|
||||
})
|
||||
})
|
||||
|
||||
if (this.unloadMount > 0) {
|
||||
data.push({
|
||||
name: '未装货数量',
|
||||
value: this.unloadMount
|
||||
})
|
||||
}
|
||||
|
||||
this.series.push({
|
||||
type: 'pie',
|
||||
data
|
||||
})
|
||||
}
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs['pie-chart'])
|
||||
this.transformDataListToSeries()
|
||||
|
||||
this.chart.setOption({
|
||||
series: this.series,
|
||||
radius: this.radius,
|
||||
tooltip: this.tooltip
|
||||
// 其他一些[默认]配置
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pie-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
/* background-color: #eee; */
|
||||
}
|
||||
</style>
|
||||
268
src/views/basicData/ProductDelivery/components/carlist-add.vue
Normal file
268
src/views/basicData/ProductDelivery/components/carlist-add.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-05-24 09:00:00
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-05-24 09:00:00
|
||||
* @Description: 发货信息 - 发车清单 - 装货清单详情
|
||||
-->
|
||||
<template>
|
||||
<el-drawer :visible.sync="visible" :show-close="false" :wrapper-closable="false" class="drawer" size="60%">
|
||||
<small-title slot="title" :size="'lg'" :no-padding="true">
|
||||
{{ isdetail ? 'btn.detail' : isedit ? 'btn.edit' : 'btn.add' | i18nFilter }}
|
||||
</small-title>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="content">
|
||||
<div class="visual-part">
|
||||
<el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<!-- 发车编码 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'发车编码'" prop="deliveryCarCode">
|
||||
<el-input v-model="dataForm.deliveryCarCode" :label="'发车编码'" :placeholder="'发车编码'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 开始装货时间 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'开始装货时间'" prop="startLoadTime">
|
||||
<el-date-picker
|
||||
v-model="dataForm.startLoadTime"
|
||||
type="datetime"
|
||||
:label="'开始装货时间'"
|
||||
:placeholder="'开始装货时间'"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 车牌 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'车牌'" prop="plate">
|
||||
<el-input v-model="dataForm.plate" :label="'车牌'" :placeholder="'车牌'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 车辆联系人 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'车辆联系人'" prop="contactPerson">
|
||||
<el-input v-model="dataForm.contactPerson" :label="'车辆联系人'" :placeholder="'车辆联系人'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 装车数量 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'装车数量'" prop="quantity">
|
||||
<el-input v-model="dataForm.quantity" :label="'装车数量'" :placeholder="'装车数量'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 单位 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'单位'" prop="unitId">
|
||||
<el-select v-model="dataForm.unitId" :label="'单位'" :placeholder="'单位'">
|
||||
<el-option
|
||||
v-for="unit in unitList"
|
||||
:key="unit.dataCode"
|
||||
:label="unit.dataName"
|
||||
:value="unit.dataCode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 车辆联系人电话 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'车辆联系人电话'" prop="contactPersonCall">
|
||||
<el-input v-model="dataForm.contactPersonCall" :label="'车辆联系人电话'" :placeholder="'车辆联系人电话'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 发货单 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'发货单'" prop="productDeliveryLogId">
|
||||
<el-input v-model="dataForm.productDeliveryLogId" disabled :label="'发货单'" :placeholder="'发货单'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="'备注'" prop="remark">
|
||||
<el-input v-model="dataForm.remark" :label="'备注'" :placeholder="'备注'" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<!-- 车辆描述信息 -->
|
||||
<el-col>
|
||||
<el-form-item :label="'车辆描述信息'" prop="description">
|
||||
<el-input
|
||||
v-model="dataForm.description"
|
||||
type="textarea"
|
||||
:label="'车辆描述信息'"
|
||||
:placeholder="'车辆描述信息'"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div style="position: absolute; bottom: 24px; right: 24px;">
|
||||
<el-button @click="close">{{ 'btn.cancel' | i18nFilter }}</el-button>
|
||||
<el-button type="primary" @click="confirm">{{ 'btn.confirm' | i18nFilter }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
// import { refineData } from '@/utils/helpers'
|
||||
import { add, update } from '@/api/basicData/ProductDelivery/car'
|
||||
|
||||
export default {
|
||||
components: { SmallTitle },
|
||||
data() {
|
||||
return {
|
||||
isdetail: false,
|
||||
isedit: false,
|
||||
visible: false,
|
||||
dataForm: {
|
||||
id: null,
|
||||
deliveryCarCode: '',
|
||||
productDeliveryLogId: null, // 上层发货单ID，必填
|
||||
startLoadTime: '',
|
||||
plate: '',
|
||||
contactPerson: '',
|
||||
contactPersonCall: '',
|
||||
quantity: 0,
|
||||
unitId: null,
|
||||
description: '',
|
||||
remark: ''
|
||||
},
|
||||
dataFormRules: {
|
||||
productDeliveryLogId: [{ required: true, message: this.$t('module.basicData.visual.valueRequired.uplevelDeliveryId'), trigger: 'blur' }],
|
||||
deliveryCarCode: [{ required: true, message: this.$t('module.basicData.visual.valueRequired.carCode'), trigger: 'change' }],
|
||||
startLoadTime: [{ required: true, message: this.$t('module.basicData.visual.valueRequired.loadingTime'), trigger: 'blur' }],
|
||||
plate: [{ required: true, message: this.$t('module.basicData.visual.valueRequired.plate'), trigger: 'blur' }],
|
||||
contactPerson: [{ required: true, message: this.$t('module.basicData.visual.valueRequired.carContact'), trigger: 'blur' }],
|
||||
unitId: [{ required: true, message: this.$t('module.basicData.visual.valueRequired.unit'), trigger: 'blur' }],
|
||||
quantity: [
|
||||
{ required: true, message: this.$t('module.basicData.visual.valueRequired.payloadCount'), trigger: 'blur' },
|
||||
{ type: 'number', message: this.$t('module.basicData.visual.typeValidation.number'), trigger: 'blur', transform: val => Number(val) }
|
||||
],
|
||||
contactPersonCall: [
|
||||
{
|
||||
pattern: /(^1\d{10}$)|(^[0-9]\d{7}$)/,
|
||||
// message: this.$t('module.basicData.customer.Telephone') + this.$t('module.basicData.customer.format'),
|
||||
message: this.$t('module.basicData.visual.typeValidation.phone'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
unitList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// initDataForm() {
|
||||
// this.dataForm = {
|
||||
// id: null,
|
||||
// deliveryCarCode: '',
|
||||
// startLoadTime: '',
|
||||
// plate: '',
|
||||
// contactPerson: '',
|
||||
// quantity: 0,
|
||||
// unitId: null
|
||||
// }
|
||||
// },
|
||||
init(data, detailMode) {
|
||||
// this.initDataForm()
|
||||
// data 必须含有: productDeliveryLogId
|
||||
this.fetchUnitList()
|
||||
// console.log('data===> ', data)
|
||||
this.dataForm.productDeliveryLogId = data.productDeliveryLogId
|
||||
this.isedit = !!(data && data.id)
|
||||
this.isdetail = !!detailMode
|
||||
this.visible = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataForm.resetFields()
|
||||
|
||||
if (this.isedit) {
|
||||
this.dataForm = data
|
||||
} else {
|
||||
this.dataForm.deliveryCarCode = this.getCode()
|
||||
}
|
||||
})
|
||||
},
|
||||
fetchUnitList() {
|
||||
const allDictList = this.$store.getters.dictList
|
||||
// 找到单位的列表, dictTypeId: 1
|
||||
this.unitList = allDictList[0].dataList // 其实第1个元素就是单位列表
|
||||
},
|
||||
confirm() {
|
||||
this.$refs['dataForm'].validate(valid => {
|
||||
if (valid) {
|
||||
const ajaxAction = this.dataForm.id ? update : add
|
||||
ajaxAction(this.dataForm).then(res => {
|
||||
this.$message({
|
||||
message: this.$t('module.basicData.visual.success'),
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.visible = false
|
||||
this.$emit('refreshDataList')
|
||||
},
|
||||
getCode() {
|
||||
const codeHead = 'FC-'
|
||||
return codeHead + Date.now()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
padding: 0;
|
||||
margin: 32px 0 8px 32px;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 0 24px 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user