new
This commit is contained in:
szdot
parent
04a515106f
commit
14b32f0828
151
src/views/layout/components/main/product/add.vue
Normal file
151
src/views/layout/components/main/product/add.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row class="m-t-0">
|
||||
<el-col :span="24">
|
||||
<el-container>
|
||||
<el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
|
||||
<div class="l">
|
||||
<i v-if="pageState === 'add'" class="iconfont el-icon-plus f-s-20"></i>
|
||||
<i v-else class="iconfont el-icon-edit f-s-20"></i>
|
||||
<font class="m-l-10 f-s-18 fb">{{ $route.meta.title }}</font>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="border p-20">
|
||||
<el-form ref="form" :model="form" label-width="120px">
|
||||
<el-form-item v-if="pageState === 'add'" label="所属商铺">
|
||||
<Selection v-model="form.shop_id" :allSel="false" />
|
||||
</el-form-item>
|
||||
<el-form-item label="飞机名称">
|
||||
<el-input v-model="form.name" placeholder="起名可以是中文" />
|
||||
</el-form-item>
|
||||
<el-form-item label="购买日期">
|
||||
<el-date-picker v-if="pageState == 'add' ? true : false" v-model="form.date" type="date"
|
||||
placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="timestamp">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-else v-model="form.date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
|
||||
value-format="timestamp" disabled>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item :label="form.onoff === true ? '启用' : '停用'">
|
||||
<el-switch v-model="form.onoff" />
|
||||
</el-form-item>
|
||||
<el-form-item label="飞机描述">
|
||||
<el-input v-model="form.desc" type="textarea" placeholder="非必填" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="pageState == 'add' ? true : false">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addAir">创建</el-button>
|
||||
<el-button @click="setForm({})" class="iconfont icon-qingchu">
|
||||
<font class="m-l-5">重填</font>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-else>
|
||||
<el-button type="primary" icon="el-icon-edit" @click="saveAir">更新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Selection from '@/components/Selection'
|
||||
|
||||
export default {
|
||||
name: 'RegisterAdd',
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
shop_id: '',
|
||||
name: '',
|
||||
date: '',
|
||||
onoff: true,
|
||||
desc: ''
|
||||
},
|
||||
airId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
|
||||
pageState: '', // 页面状态
|
||||
plane: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Selection
|
||||
},
|
||||
computed: {
|
||||
// 获取飞机列表
|
||||
airList () {
|
||||
return this.$store.state.airList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 设置表单
|
||||
setForm (data) {
|
||||
if (data.desc == null) {
|
||||
data.desc = ''
|
||||
}
|
||||
this.form.shop_id = data.shop_id
|
||||
this.form.name = data.name
|
||||
this.form.date = data.date
|
||||
this.form.onoff = data.onoff
|
||||
this.form.desc = data.desc
|
||||
if (Object.keys(data).length === 0) {
|
||||
this.$message.warning('清空表单')
|
||||
}
|
||||
},
|
||||
// 初始化页面 添加or编辑
|
||||
initPage () {
|
||||
if (this.airId === undefined) {
|
||||
this.pageState = 'add'
|
||||
} else {
|
||||
this.pageState = 'edit'
|
||||
this.plane = this.airList.find((item) => item.id === this.airId)
|
||||
if (this.plane) {
|
||||
const data = {
|
||||
shop_id: this.plane.shop_id,
|
||||
name: this.plane.name,
|
||||
date: this.plane.apply_time + '000',
|
||||
onoff: this.plane.onoff === '1',
|
||||
desc: this.plane.describe
|
||||
}
|
||||
this.setForm(data)
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 创建新飞机
|
||||
*/
|
||||
async addAir () {
|
||||
const res = await this.$store.dispatch('fetchAddAir', this.form)
|
||||
if (res.data.status === 1) {
|
||||
this.$router.push('/register/index')
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 更新飞机
|
||||
*/
|
||||
async saveAir () {
|
||||
this.form.id = this.airId
|
||||
const res = await this.$store.dispatch('fetchSaveAir', this.form)
|
||||
if (res.data.status === 1) {
|
||||
this.$router.push('/register/index')
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
airList () {
|
||||
this.initPage()// 初始化页面
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.airList.length > 0) {
|
||||
this.initPage()// 初始化页面
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
125
src/views/layout/components/main/product/index.vue
Normal file
125
src/views/layout/components/main/product/index.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 组合按钮 -->
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$router.replace('/register/add')">添加</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deleteAir(countSelIdArr($refs.myTable.selection))">删除
|
||||
</el-button>
|
||||
<el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
|
||||
</el-button-group>
|
||||
<!-- 用户select选项 -->
|
||||
<el-button-group class="m-l-20">
|
||||
<Selection v-model="form.shop_id" :allSel="true" />
|
||||
</el-button-group>
|
||||
<!-- 飞机表格 -->
|
||||
<el-table class="m-t-20 w-100" ref="myTable"
|
||||
:data="productListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
|
||||
<el-table-column align="center" type="selection" width="40">
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="id" label="id" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" width="150" min-width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="controler" label="操作" width="200" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-search"
|
||||
@click="$router.replace(`/planes/index/${scope.row.id}/${scope.row.name}`)">查看</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="deleteAir([scope.row.id])">删除</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
|
||||
:total="productListArr.length">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { parseTime, countSelIdArr } from '@/utils'
|
||||
import Selection from '@/components/Selection'
|
||||
|
||||
export default {
|
||||
name: 'Register',
|
||||
data () {
|
||||
return {
|
||||
pageSize: 8, // 每页显示记录条数
|
||||
currentPage: 1, // 当前页
|
||||
form: {
|
||||
shop_id: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Selection
|
||||
},
|
||||
computed: {
|
||||
// 获取产品列表
|
||||
productList () {
|
||||
return this.$store.state.productList
|
||||
},
|
||||
/**
|
||||
* @description: 过滤掉 不对应客户的 产品列表
|
||||
* @return: 产品列表
|
||||
*/
|
||||
productListArr () {
|
||||
if (this.form.shop_id !== '') {
|
||||
return this.productList.filter((item) => item.shop_id === this.form.shop_id)
|
||||
} else {
|
||||
return this.productList
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countSelIdArr,
|
||||
/**
|
||||
* @description: 跳转到编辑页面
|
||||
*/
|
||||
toEditPage () {
|
||||
const selId = this.countSelIdArr(this.$refs.myTable.selection)
|
||||
switch (selId.length) {
|
||||
case 0:
|
||||
this.$message.error('请选择一条需要编辑的记录')
|
||||
break
|
||||
case 1:
|
||||
this.$router.push('/register/edit/' + selId['0'])
|
||||
break
|
||||
default:
|
||||
this.$message.error('只能选择一条记录')
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description: 删除飞机
|
||||
*/
|
||||
deleteAir (idArr) {
|
||||
this.$store.dispatch('fetchDelAir', idArr)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
productList (val) {
|
||||
console.log(val)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.productList.length > 0) {
|
||||
console.log(this.productList)
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
parseTime,
|
||||
countSelIdArr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/theme.scss";
|
||||
|
||||
.el-tag {
|
||||
i {
|
||||
vertical-align: middle
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user