增加商品货源(完成 list)

feature/0423
Wayne 1 year ago
parent 4e72a27e36
commit c22fce6989
  1. 64
      src/api/goods/source.js
  2. 10
      src/config/router.config.js
  3. 179
      src/views/goods/source/Index.vue
  4. 118
      src/views/goods/source/modules/AddForm.vue
  5. 134
      src/views/goods/source/modules/EditForm.vue

@ -0,0 +1,64 @@
import { axios } from '@/utils/request'
// api接口列表
const api = {
list: '/goods.source/list',
all: '/goods.source/all',
add: '/goods.source/add',
edit: '/goods.source/edit',
delete: '/goods.source/delete'
}
// 列表记录
export function list (params) {
return axios({
url: api.list,
method: 'get',
params
})
}
// 全部记录
export function all (params) {
return axios({
url: api.all,
method: 'get',
params
})
}
/**
* 新增记录
* @param {*} data
*/
export function add (data) {
return axios({
url: api.add,
method: 'post',
data
})
}
/**
* 编辑记录
* @param {*} data
*/
export function edit (data) {
return axios({
url: api.edit,
method: 'post',
data
})
}
/**
* 删除记录
* @param {*} data
*/
export function deleted (data) {
return axios({
url: api.delete,
method: 'post',
data: data
})
}

@ -286,6 +286,16 @@ export const asyncRouterMap = [
meta: { title: '商品导入', pageTitle: '商品批量导入', keepAlive: false, permission: ['/goods/import'] },
hidden: true,
},
{
path: '/goods/source/index',
component: () => import(/* webpackChunkName: "goods" */ '@/views/goods/source/Index'),
meta: {
title: '商品货源',
pageTitle: '商品货源',
keepAlive: false,
permission: ['/goods/source/index'],
},
},
],
},

@ -0,0 +1,179 @@
<template>
<a-card :bordered="false">
<div class="card-title">{{ $route.meta.pageTitle }}</div>
<div class="table-operator">
<a-row>
<a-col :span="6">
<!-- <a-button v-action:add type="primary" icon="plus" @click="handleAdd">新增</a-button> -->
</a-col>
<a-col :span="8" :offset="10">
<a-input-search
style="max-width: 300px; min-width: 150px;float: right;"
v-model="queryParam.search"
placeholder="请输入商品名称"
@search="onSearch"
/>
</a-col>
</a-row>
</div>
<s-table
ref="table"
rowKey="service_id"
:loading="isLoading"
:columns="columns"
:data="loadData"
:pageSize="15"
:scroll="{ x: 1300 }"
>
<span slot="type" slot-scope="text">
<a-tag :color="text ? 'green' : ''">{{ text ? '是' : '否' }}</a-tag>
</span>
<span slot="price_range" slot-scope="text, item">
{{ item['min_price'] }} ~ {{ item['max_price'] }}
</span>
<span slot="is_face" slot-scope="text">
<a-tag :color="text ? 'green' : ''">{{ text ? '是' : '否' }}</a-tag>
</span>
<!-- 操作 -->
<span slot="action" slot-scope="text, item">
<a v-action:edit style="margin-right: 8px;" @click="handleEdit(item)">编辑</a>
<a v-action:delete @click="handleDelete(item)">删除</a>
</span>
</s-table>
<AddForm ref="AddForm" @handleSubmit="handleRefresh" />
<EditForm ref="EditForm" @handleSubmit="handleRefresh" />
</a-card>
</template>
<script>
import * as Api from '@/api/goods/source'
import { STable } from '@/components'
import AddForm from './modules/AddForm'
import EditForm from './modules/EditForm'
export default {
name: 'Index',
components: {
STable,
AddForm,
EditForm
},
data () {
return {
//
queryParam: {},
//
isLoading: false,
//
columns: [
{
title: '货源ID',
dataIndex: 'id',
width: '100px'
},
{
title: '商品名称',
dataIndex: 'goods_name',
width: '200px'
},
{
title: '一件代发',
dataIndex: 'type',
width: '200px',
scopedSlots: { customRender: 'type' }
},
{
title: '交付日期',
width: '180px',
dataIndex: 'deliver_at'
},
{
title: '数量',
width: '180px',
dataIndex: 'num'
},
{
title: '单价区间',
width: '180px',
scopedSlots: { customRender: 'price_range' }
},
{
title: '是否面谈',
width: '180px',
dataIndex: 'is_face',
scopedSlots: { customRender: 'is_face' }
},
{
title: '创建时间',
width: '180px',
dataIndex: 'created_at'
},
/* {
title: '操作',
width: '150px',
fixed: 'right',
scopedSlots: { customRender: 'action' }
} */
],
// Promise
loadData: param => {
return Api.list({ ...param, ...this.queryParam })
.then(response => {
return response.data.list
})
}
}
},
created () {
},
methods: {
//
handleAdd () {
this.$refs.AddForm.add()
},
//
handleEdit (item) {
this.$refs.EditForm.edit(item)
},
//
handleDelete (item) {
const self = this
const modal = this.$confirm({
title: '您确定要删除该记录吗?',
content: '删除后不可恢复',
onOk () {
return Api.deleted({ serviceId: item['service_id'] })
.then(result => {
self.$message.success(result.message, 1.5)
self.handleRefresh()
})
.finally(result => modal.destroy())
}
})
},
/**
* 刷新列表
* @param Boolean bool 强制刷新到第一页
*/
handleRefresh (bool = false) {
this.$refs.table.refresh(bool)
},
//
onSearch () {
this.handleRefresh(true)
}
}
}
</script>
<style lang="less" scoped>
.summary {
max-width: 400px;
}
</style>

@ -0,0 +1,118 @@
<template>
<a-modal
:title="title"
:width="720"
:visible="visible"
:confirmLoading="confirmLoading"
:maskClosable="false"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="服务名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入服务与承诺的名称"
v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
/>
</a-form-item>
<a-form-item label="概述" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea
placeholder="请输入概述内容 (300个字符以内)"
:autoSize="{ minRows: 4 }"
v-decorator="['summary']"
/>
</a-form-item>
<a-form-item label="是否默认" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="新增商品时是否默认勾选">
<a-radio-group v-decorator="['is_default', { initialValue: 1, rules: [{ required: true }] }]">
<a-radio :value="1"></a-radio>
<a-radio :value="0"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
<a-radio :value="1">显示</a-radio>
<a-radio :value="0">隐藏</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
<a-input-number
:min="0"
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]"
/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import * as Api from '@/api/goods/service'
export default {
data () {
return {
//
title: '',
//
labelCol: {
span: 7
},
//
wrapperCol: {
span: 13
},
// modal()
visible: false,
// modal() loading
confirmLoading: false,
//
form: this.$form.createForm(this),
}
},
methods: {
//
add () {
//
this.title = '新增记录'
this.visible = true
},
//
handleSubmit (e) {
e.preventDefault()
//
const { form: { validateFields } } = this
validateFields((errors, values) => {
// api
!errors && this.onFormSubmit(values)
})
},
//
handleCancel () {
this.visible = false
this.form.resetFields()
},
// api
onFormSubmit (values) {
this.confirmLoading = true
Api.add({ form: values })
.then(result => {
//
this.$message.success(result.message, 1.5)
//
this.handleCancel()
//
this.$emit('handleSubmit', values)
})
.finally(result => {
this.confirmLoading = false
})
}
}
}
</script>

@ -0,0 +1,134 @@
<template>
<a-modal
:title="title"
:width="720"
:visible="visible"
:confirmLoading="confirmLoading"
:maskClosable="false"
@ok="handleSubmit"
@cancel="handleCancel"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item label="服务名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input
placeholder="请输入服务与承诺的名称"
v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]"
/>
</a-form-item>
<a-form-item label="概述" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea
placeholder="请输入概述内容 (300个字符以内)"
:autoSize="{ minRows: 4 }"
v-decorator="['summary']"
/>
</a-form-item>
<a-form-item label="是否默认" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="新增商品时是否默认勾选">
<a-radio-group v-decorator="['is_default', { initialValue: 1, rules: [{ required: true }] }]">
<a-radio :value="1"></a-radio>
<a-radio :value="0"></a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="用户端是否展示">
<a-radio-group v-decorator="['status', { initialValue: 1, rules: [{ required: true }] }]">
<a-radio :value="1">显示</a-radio>
<a-radio :value="0">隐藏</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
<a-input-number
:min="0"
v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]"
/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import pick from 'lodash.pick'
import * as Api from '@/api/goods/service'
export default {
data () {
return {
//
title: '',
//
labelCol: {
span: 7
},
//
wrapperCol: {
span: 13
},
// modal()
visible: false,
// modal() loading
confirmLoading: false,
//
form: this.$form.createForm(this),
//
record: {}
}
},
methods: {
//
edit (record) {
//
this.title = '编辑记录'
this.visible = true
//
this.record = record
//
this.setFieldsValue()
},
//
setFieldsValue () {
const { form: { setFieldsValue } } = this
this.$nextTick(() => {
setFieldsValue(pick(this.record, ['name', 'summary', 'is_default', 'status', 'sort']))
})
},
//
handleSubmit (e) {
e.preventDefault()
//
const { form: { validateFields } } = this
validateFields((errors, values) => {
// api
!errors && this.onFormSubmit(values)
})
},
//
handleCancel () {
this.visible = false
this.form.resetFields()
},
// api
onFormSubmit (values) {
this.confirmLoading = true
Api.edit({ serviceId: this.record['service_id'], form: values })
.then(result => {
//
this.$message.success(result.message, 1.5)
//
this.handleCancel()
//
this.$emit('handleSubmit', values)
})
.finally(result => {
this.confirmLoading = false
})
}
}
}
</script>
Loading…
Cancel
Save