wangyifang
/
patrol-wzgl-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加仓库类型

Browse Source
master
lynn 12 months ago
parent 35d3c17be3
commit 6a034d90cb
4 changed files with 576 additions and 242 deletions
Show Stats Download Patch File Download Diff File

30
src/api/system/storehouseType.js
Unescape View File

@ -0,0 +1,30 @@
import request from '@/utils/request'
// 获取仓库类型列表
export function getStorehouseTypeList(data) {
return request({
url: '/api/admin/storehouse/index',
method: 'post',
data,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
// 删除仓库类型
export function destroyStorehouseType(id) {
return request({
url: '/api/admin/storehouse/destroy?id=' + id,
method: 'get'
})
}
// 新增或更新仓库类型
export function saveStorehouseType(data) {
return request({
url: '/api/admin/storehouse/save',
method: 'post',
data
})
}

469
src/views/storages/components/addStorage.vue
Unescape View File

@ -1,34 +1,33 @@
<template>
<div>
<xy-dialog ref="dialog" :width='70' :is-show.sync="isShow" type="form" :title="type==='add'?'新增':'编辑'"
:form="form" :rules="rules" @submit="submit">
<template v-slot:cangkumingcheng>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库名称：
</div>
<div class="xy-table-item-content">
<el-input style="width:300px" v-model="form.cangkumingcheng"></el-input>
</div>
</div>
</template>
<template v-slot:cangkubianma>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库编码：
</div>
<div class="xy-table-item-content">
<el-input style="width:300px" v-model="form.cangkubianma"></el-input>
</div>
</div>
</template>
<template v-slot:suozaiquyu>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>所在区域：
</div>
<div class="xy-table-item-content">
<template>
<div>
<xy-dialog ref="dialog" :width='70' :is-show.sync="isShow" type="form" :title="type==='add'?'新增':'编辑'"
:form="form" :rules="rules" @submit="submit">
<template v-slot:cangkumingcheng>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库名称：
</div>
<div class="xy-table-item-content">
<el-input style="width:300px" v-model="form.cangkumingcheng"></el-input>
</div>
</div>
</template>
<template v-slot:cangkubianma>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库编码：
</div>
<div class="xy-table-item-content">
<el-input style="width:300px" v-model="form.cangkubianma"></el-input>
</div>
</div>
</template>
<template v-slot:suozaiquyu>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>所在区域：
</div>
<div class="xy-table-item-content">
<el-select v-model="form.suozaiquyu" @change="changeQuyu" style="width:300px" placeholder="请选择">
<el-option
v-for="item in areaList"
@ -36,150 +35,150 @@
:label="item.value"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-slot:jiansheniandai>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>建设年代：
</div>
<div class="xy-table-item-content">
<el-date-picker style="width:300px" value-format="yyyy" format="yyyy" v-model="form.jiansheniandai" type="year" placeholder="选择年">
</el-date-picker>
</div>
</div>
</template>
<template v-slot:cangkumianji>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库面积：
</div>
<div class="xy-table-item-content">
<el-input style="width:300px" v-model="form.cangkumianji"></el-input>
</div>
</div>
</template>
<template v-slot:fuzeren>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>负责人：
</div>
<div class="xy-table-item-content">
<el-input style="width:300px" v-model="form.fuzeren"></el-input>
</div>
</div>
</template>
<template v-slot:lianxidianhua>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>联系电话：
</div>
<div class="xy-table-item-content">
<el-input style="width: 300px;" v-model="form.lianxidianhua"></el-input>
</div>
</div>
</template>
<template v-slot:cangkudizhi>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库地址：
</div>
<div class="xy-table-item-content">
<avue-input-map v-model="mapform" :params="mapparams" style="width:300px"
placeholder="请选择地图"></avue-input-map>
</div>
</div>
</template>
<template v-slot:jingdu>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>经度：
</div>
<div class="xy-table-item-content">
<el-input style="width: 300px;" v-model="form.jingdu"></el-input>
</div>
</div>
</template>
<template v-slot:weidu>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>纬度：
</div>
<div class="xy-table-item-content">
<el-input style="width: 300px;" v-model="form.weidu"></el-input>
</div>
</div>
</template>
<template v-slot:cangkujianjie>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库简介：
</div>
<div class="xy-table-item-content">
<el-input style="width: 300px;" type="textarea" v-model="form.cangkujianjie"></el-input>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {
save,
show
</el-select>
</div>
</div>
</template>
<template v-slot:jiansheniandai>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>建设年代：
</div>
<div class="xy-table-item-content">
<el-date-picker style="width:300px" value-format="yyyy" format="yyyy" v-model="form.jiansheniandai" type="year" placeholder="选择年">
</el-date-picker>
</div>
</div>
</template>
<template v-slot:cangkumianji>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库面积：
</div>
<div class="xy-table-item-content">
<el-input style="width:300px" v-model="form.cangkumianji"></el-input>
</div>
</div>
</template>
<template v-slot:fuzeren>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>负责人：
</div>
<div class="xy-table-item-content">
<el-input style="width:300px" v-model="form.fuzeren"></el-input>
</div>
</div>
</template>
<template v-slot:lianxidianhua>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>联系电话：
</div>
<div class="xy-table-item-content">
<el-input style="width: 300px;" v-model="form.lianxidianhua"></el-input>
</div>
</div>
</template>
<template v-slot:cangkudizhi>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库地址：
</div>
<div class="xy-table-item-content">
<avue-input-map v-model="mapform" :params="mapparams" style="width:300px"
placeholder="请选择地图"></avue-input-map>
</div>
</div>
</template>
<template v-slot:jingdu>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>经度：
</div>
<div class="xy-table-item-content">
<el-input style="width: 300px;" v-model="form.jingdu"></el-input>
</div>
</div>
</template>
<template v-slot:weidu>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>纬度：
</div>
<div class="xy-table-item-content">
<el-input style="width: 300px;" v-model="form.weidu"></el-input>
</div>
</div>
</template>
<template v-slot:cangkujianjie>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库简介：
</div>
<div class="xy-table-item-content">
<el-input style="width: 300px;" type="textarea" v-model="form.cangkujianjie"></el-input>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import {
save,
show
} from "@/api/system/baseForm.js"
import {
getparameteritem
} from "@/api/system/dictionary.js"
import {
Message
} from 'element-ui'
export default {
data() {
return {
isShow: false,
type: 'add',
id: '',
import {
getparameteritem
} from "@/api/system/dictionary.js"
import {
Message
} from 'element-ui'
import { saveStorehouseType } from '@/api/system/storehouseType'
export default {
data() {
return {
isShow: false,
type: 'add',
id: '',
tableName: 'materialstorages',
// flood_storages
areaList:[],
mapparams: {
zoom: 11,
},
mapform: [],
form: {
cangkumingcheng: '',
cangkubianma: '',
suozaiquyu: '',
jiansheniandai: '',
cangkumianji: '',
fuzeren: '',
lianxidianhua: '',
cangkudizhi: '',
jingdu: '',
weidu: '',
areaList:[],
mapparams: {
zoom: 11,
},
mapform: [],
form: {
cangkumingcheng: '',
cangkubianma: '',
suozaiquyu: '',
jiansheniandai: '',
cangkumianji: '',
fuzeren: '',
lianxidianhua: '',
cangkudizhi: '',
jingdu: '',
weidu: '',
cangkujianjie: '',
quyu_id:''
},
rules: {
cangkumingcheng: [{
required: true,
message: '请填写仓库名称'
}]
},
}
},
created() {
this.getArea()
},
methods: {
quyu_id:''
},
rules: {
cangkumingcheng: [{
required: true,
message: '请填写仓库名称'
}]
},
}
},
created() {
this.getArea()
},
methods: {
getArea(){
getparameteritem("area").then(res=>{
this.areaList = res.detail
@ -200,75 +199,61 @@
},
setTableName(e){
this.tableName = e?e:'materialstorages'
},
async getDetail() {
const res = await show({
id: this.id,
table_name: this.tableName
})
this.$integrateData(this.form, res)
this.mapform = [res.jingdu, res.weidu, res.cangkudizhi]
},
submit() {
if (this.type === 'add') {
save({
table_name: this.tableName,
...this.form
}).then(res => {
Message({
type: 'success',
message: '新增成功'
})
this.$emit('refresh')
this.isShow = false
})
return
}
if (this.type === 'editor') {
save({
id: this.id,
table_name: this.tableName,
...this.form
}).then(res => {
Message({
type: 'success',
message: '编辑成功'
})
this.$emit('refresh')
this.isShow = false
})
}
},
},
watch: {
isShow(newVal) {
if (newVal) {
if (this.type === 'editor') {
this.getDetail()
}
} else {
this.id = ''
this.type = ''
this.mapform = []
this.$refs['dialog'].reset()
}
},
mapform(newVal, oldVal) {
console.log(newVal)
this.form.jingdu = newVal[0];
this.form.weidu = newVal[1];
this.form.cangkudizhi = newVal[2];
},
}
}
</script>
<style scoped lang="scss">
::v-deep .xy-table-item-label {
min-width: 160px !important
}
},
async getDetail() {
const res = await show({
id: this.id,
table_name: this.tableName
})
this.$integrateData(this.form, res)
this.mapform = [res.jingdu, res.weidu, res.cangkudizhi]
},
submit() {
const params = {
name: this.form.cangkumingcheng,
remark: this.form.cangkujianjie,
};
if (this.type === 'editor') {
params.id = this.id;
}
saveStorehouseType(params).then(res => {
Message({
type: 'success',
message: this.type === 'add' ? '新增成功' : '编辑成功'
})
this.$emit('refresh')
this.isShow = false
})
},
},
watch: {
isShow(newVal) {
if (newVal) {
if (this.type === 'editor') {
this.getDetail()
}
} else {
this.id = ''
this.type = ''
this.mapform = []
this.$refs['dialog'].reset()
}
},
mapform(newVal, oldVal) {
console.log(newVal)
this.form.jingdu = newVal[0];
this.form.weidu = newVal[1];
this.form.cangkudizhi = newVal[2];
},
}
}
</script>
<style scoped lang="scss">
::v-deep .xy-table-item-label {
min-width: 160px !important
}
</style>

129
src/views/storages/components/addType.vue
Unescape View File

@ -0,0 +1,129 @@
<template>
<div>
<xy-dialog ref="dialog" :width='700' :is-show.sync="isShow" type="form" :title="type==='add'?'新增仓库类型':'编辑仓库类型'"
:form="form" :rules="rules" @submit="submit">
<template v-slot:cangkumingcheng>
<div class="xy-table-item type-dialog-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库类型：
</div>
<div class="xy-table-item-content">
<el-input style="width:500px; font-size:18px;" v-model="form.cangkumingcheng" placeholder="请输入仓库类型"></el-input>
</div>
</div>
</template>
<template v-slot:beizhu>
<div class="xy-table-item type-dialog-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>备注：
</div>
<div class="xy-table-item-content">
<el-input style="width:500px; font-size:18px;" v-model="form.beizhu" placeholder="请输入备注"></el-input>
</div>
</div>
</template>
<template v-slot:sort>
<div class="xy-table-item type-dialog-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>排序编号：
</div>
<div class="xy-table-item-content">
<el-input-number style="width: 200px; font-size:18px;" v-model="form.sort" :min="1" :max="9999" :step="1" placeholder="请输入排序编号"></el-input-number>
</div>
</div>
</template>
</xy-dialog>
</div>
</template>
<script>
import { saveStorehouseType } from '@/api/system/storehouseType'
import { Message } from 'element-ui'
export default {
data() {
return {
isShow: false,
type: 'add',
id: '',
form: {
cangkumingcheng: '',
beizhu: '',
sort: 1
},
rules: {
cangkumingcheng: [{ required: true, message: '请填写仓库类型' }]
}
}
},
methods: {
open(type = 'add', row = null) {
this.type = type;
this.isShow = true;
this.$nextTick(() => {
if (this.$refs.dialog && this.$refs.dialog.$refs.form) {
this.$refs.dialog.$refs.form.resetFields();
}
});
if (type === 'editor' && row) {
this.id = row.id;
Object.assign(this.form, {
cangkumingcheng: row.name || '',
beizhu: row.remark || '',
sort: row.sort || 1
});
} else {
this.id = '';
Object.assign(this.form, {
cangkumingcheng: '',
beizhu: '',
sort: 1
});
}
},
submit() {
const params = {
name: this.form.cangkumingcheng,
remark: this.form.beizhu,
sort: this.form.sort,
};
if (this.type === 'editor') {
params.id = this.id;
}
saveStorehouseType(params).then(res => {
Message({
type: 'success',
message: this.type === 'add' ? '新增成功' : '编辑成功'
})
this.$emit('refresh')
this.isShow = false
})
}
}
}
</script>
<style scoped lang="scss">
::v-deep .xy-table-item-label {
min-width: 120px !important;
font-size: 16px;
text-align: right;
}
.type-dialog-item {
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.xy-table-item-content {
display: flex;
align-items: center;
}
::v-deep .el-dialog {
border-radius: 12px;
}
::v-deep .el-button--primary {
border-radius: 6px;
font-size: 15px;
padding: 8px 24px;
}
</style>

190
src/views/storages/type.vue
Unescape View File

@ -0,0 +1,190 @@
<template>
<div class="table-page-container">
<div ref="lxHeader">
<lx-header icon="md-apps" text="仓库类型" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
<Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="仓库类型" />
<Button type="primary" @click="getTypeList">查询</Button>
<Button type="primary" style="margin-left: 10px;" @click="$refs.addType.open('add')">添加</Button>
<!-- <Button icon="ios-add" type="primary" style="margin-left: 10px;"
@click="$refs['imports'].show()">导入</Button> -->
</div>
</slot>
</lx-header>
</div>
<div class="table-flex-content">
<xy-table :list="list" :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
:table-item="table" size="medium" :height="tableHeight" style="border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08); width: 100%;">
<template v-slot:btns>
<el-table-column label="操作" align="center" min-width="140" header-align="center" class-name="table-col-action">
<template slot-scope="scope">
<div style="display: flex; gap: 8px; justify-content: center;">
<Button type="primary" size="small" style="border-radius: 6px;" @click="$refs.addType.open('editor', scope.row)">编辑</Button>
<Button type="primary" style="margin-left: 0; border-radius: 6px;" size="small" ghost @click="delRow(scope.row.id)">删除</Button>
</div>
</template>
</el-table-column>
</template>
</xy-table>
<addType ref="addType" @refresh="getTypeList"></addType>
</div>
</div>
</template>
<script>
import {
destroy
} from "@/api/system/baseForm.js"
import { getStorehouseTypeList } from '@/api/system/storehouseType'
import addType from './components/addType.vue'
import {
getparameteritem
} from "@/api/system/dictionary.js"
import { destroyStorehouseType } from '@/api/system/storehouseType'
export default {
components: {
addType,
},
data() {
return {
select: {
page: 1,
page_size: 10,
keyword: '',
table_name: 'materialstorages',
area:''
},
areaList:[],
total: 0,
list: [],
table: [{
label: '序号',
type: 'index',
width: 60,
}, {
label: '仓库类型',
prop: 'name',
minWidth: 180
}, {
label: '排序编号',
prop: 'sort',
minWidth: 120,
}, {
label: '备注',
prop: 'remark',
minWidth: 200,
}, {
label: '创建日期',
prop: 'created_at',
minWidth: 120,
formatter: (cell, data, value) => {
return value ? value.substring(0, 10) : ''
}
}],
tableHeight: 550 // 默认高度
}
},
created() {
this.getTypeList()
},
mounted() {
this.calcTableHeight();
window.addEventListener('resize', this.calcTableHeight);
},
beforeDestroy() {
window.removeEventListener('resize', this.calcTableHeight);
},
methods: {
async getTypeList() {
try {
const formData = new FormData();
formData.append('page', this.select.page);
formData.append('page_size', this.select.page_size);
// 如果有搜索关键词，添加模糊匹配条件
if (this.select.keyword) {
formData.append('filter[0][key]', 'name');
formData.append('filter[0][op]', 'like');
formData.append('filter[0][value]', this.select.keyword);
}
const res = await getStorehouseTypeList(formData);
this.list = res.data;
this.total = res.total;
} catch (e) {
this.$message.error('获取仓库类型列表失败');
}
},
pageChange(e) {
this.select.page = e
this.getTypeList()
},
pageSizeChange(e){
this.select.page_size = e
this.getTypeList()
},
delRow(id) {
if (id) {
this.$confirm('确认要删除该仓库类型吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
try {
await destroyStorehouseType(id);
this.$message.success('删除成功');
this.getTypeList();
} catch (e) {
this.$message.error('删除失败');
}
});
}
},
calcTableHeight() {
const header = this.$refs.lxHeader ? this.$refs.lxHeader.offsetHeight : 0;
const windowHeight = window.innerHeight;
const minTableHeight = 600; // 至少能展示一页数据
this.tableHeight = Math.max(windowHeight - header - 100, minTableHeight);
},
}
}
</script>
<style>
.table-page-container {
display: flex;
flex-direction: column;
height: 100vh;
box-sizing: border-box;
background: #f5f7fa;
}
.table-flex-content {
flex: 1 1 0;
display: flex;
flex-direction: column;
min-height: 0;
}
.el-table th {
background: #f5f7fa !important;
color: #333;
font-weight: bold;
font-size: 15px;
}
.el-table td {
font-size: 14px;
height: 48px;
}
.el-table {
border-radius: 10px;
overflow: hidden;
width: 100%;
height: 100%;
}
/* 让操作列自动填充剩余空间 */
.table-col-action {
flex: 1 !important;
}
</style>
Write Preview
Loading…
Cancel
Save