初始化
This commit is contained in:
qsh
119
src/views/MiniMall/Purchase/Comp/DialogAdd.vue
Normal file
119
src/views/MiniMall/Purchase/Comp/DialogAdd.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<el-dialog title="发起采购" v-model="dialogVisible" width="800px">
|
||||
<el-form :model="form" ref="addForm" :rules="rules" label-width="100px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="产品" prop="product">
|
||||
<el-select v-model="form.product" placeholder="请选择" filterable style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in productOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="规格" prop="specs">
|
||||
<el-select v-model="form.specs" placeholder="请选择" filterable style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in specsOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="供应商" prop="supplier">
|
||||
<el-input v-model="form.supplier" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="采购数量" prop="purchaseCount">
|
||||
<el-input-number
|
||||
:min="1"
|
||||
v-model="form.purchaseCount"
|
||||
placeholder="请输入"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="采购单价" prop="price">
|
||||
<el-input-number
|
||||
:min="0"
|
||||
v-model="form.price"
|
||||
placeholder="请输入"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item label="存放仓库" prop="warehouse">
|
||||
<el-select v-model="form.warehouse" placeholder="请选择" filterable style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in warehouseOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<Editor v-model:modelValue="form.remark" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSave">保 存</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
|
||||
const form = ref()
|
||||
const rules = ref({})
|
||||
|
||||
const productOptions = ref([])
|
||||
const specsOptions = ref([])
|
||||
const warehouseOptions = ref([
|
||||
{ label: '自营仓', value: 1 },
|
||||
{ label: '供应商仓', value: 2 }
|
||||
])
|
||||
|
||||
const open = (val) => {
|
||||
dialogVisible.value = true
|
||||
form.value = val || {
|
||||
product: '',
|
||||
specs: '',
|
||||
supplier: '',
|
||||
purchaseCount: 1,
|
||||
warehouse: 1,
|
||||
remark: ''
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
function handleSave() {
|
||||
console.log('保存')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
119
src/views/MiniMall/Purchase/Comp/DialogAudit.vue
Normal file
119
src/views/MiniMall/Purchase/Comp/DialogAudit.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<el-dialog title="采购审核" v-model="dialogVisible" width="800px">
|
||||
<Descriptions :data="form" :schema="schema" :columns="3" />
|
||||
<el-form v-if="canEdit" :model="form" ref="auditForm" :rules="rules" label-width="80px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form-item label="审核" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio :label="2">通过</el-radio>
|
||||
<el-radio :label="3">驳回</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form-item label="备注" prop="auditRemark">
|
||||
<Editor v-model:modelValue="form.auditRemark" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSave">保 存</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
|
||||
const form = ref({})
|
||||
const rules = ref({})
|
||||
const canEdit = ref(true)
|
||||
|
||||
const schema = ref([
|
||||
{
|
||||
field: 'name',
|
||||
label: '产品名称'
|
||||
},
|
||||
{
|
||||
field: 'specsName',
|
||||
label: '规格名称'
|
||||
},
|
||||
{
|
||||
field: 'supplier',
|
||||
label: '供应商'
|
||||
},
|
||||
{
|
||||
field: 'purchaseCount',
|
||||
label: '采购数量'
|
||||
},
|
||||
{
|
||||
field: 'unitPrice',
|
||||
label: '采购单价'
|
||||
},
|
||||
{
|
||||
field: 'totalPrice',
|
||||
label: '总金额'
|
||||
},
|
||||
{
|
||||
field: 'warehouse',
|
||||
label: '仓库'
|
||||
},
|
||||
{
|
||||
field: 'warehouse',
|
||||
label: '申请人'
|
||||
},
|
||||
{
|
||||
field: '',
|
||||
label: '申请时间'
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
label: '备注',
|
||||
isEditor: true,
|
||||
span: 3
|
||||
}
|
||||
])
|
||||
|
||||
const open = (val, flag) => {
|
||||
dialogVisible.value = true
|
||||
form.value = { ...val, status: 2, remark: '<p style="color: red;">哈哈哈</p>' }
|
||||
canEdit.value = flag
|
||||
if (!canEdit.value) {
|
||||
const arr = [
|
||||
{
|
||||
field: 'status',
|
||||
label: '采购状态'
|
||||
},
|
||||
{
|
||||
field: 'auditUser',
|
||||
label: '审核人'
|
||||
},
|
||||
{
|
||||
field: 'auditTime',
|
||||
label: '审核时间'
|
||||
},
|
||||
{
|
||||
field: 'auditRemark',
|
||||
label: '审核备注',
|
||||
isEditor: true,
|
||||
span: 3
|
||||
}
|
||||
]
|
||||
schema.value = [...schema.value, ...arr]
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
function handleSave() {
|
||||
console.log('保存')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
133
src/views/MiniMall/Purchase/index.data.js
Normal file
133
src/views/MiniMall/Purchase/index.data.js
Normal file
@@ -0,0 +1,133 @@
|
||||
// import { CrudSchema } from '@/hooks/web/useCrudSchemas'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '审核中', value: 1 },
|
||||
{ label: '已通过', value: 2 },
|
||||
{ label: '已驳回', value: 3 }
|
||||
]
|
||||
|
||||
// CrudSchema：https://doc.iocoder.cn/vue3/crud-schema/
|
||||
const crudSchemas = reactive([
|
||||
{
|
||||
label: '产品名称',
|
||||
field: 'name',
|
||||
isSearch: true,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '规格名称',
|
||||
field: 'specsName',
|
||||
isSearch: true,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '供应商',
|
||||
field: 'supplier',
|
||||
isSearch: true,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '采购数量',
|
||||
field: 'purchaseCount',
|
||||
isSearch: false,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '采购单价',
|
||||
field: 'unitPrice',
|
||||
isSearch: false,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '总金额',
|
||||
field: 'totalPrice',
|
||||
isSearch: false,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '仓库',
|
||||
field: 'warehouse',
|
||||
isSearch: false,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '申请人',
|
||||
field: 'applyUserName',
|
||||
isSearch: true,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '申请时间',
|
||||
field: 'applyTime',
|
||||
isSearch: true,
|
||||
isTable: true,
|
||||
formatter: dateFormatter,
|
||||
detail: {
|
||||
dateFormat: 'YYYY-MM-DD'
|
||||
},
|
||||
search: {
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
type: 'daterange',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
startPlaceholder: '申请时间',
|
||||
endPlaceholder: '申请时间'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '审核人',
|
||||
field: 'auditUserName',
|
||||
isSearch: true,
|
||||
isTable: true
|
||||
},
|
||||
{
|
||||
label: '审核时间',
|
||||
field: 'auditTime',
|
||||
isSearch: true,
|
||||
isTable: true,
|
||||
formatter: dateFormatter,
|
||||
detail: {
|
||||
dateFormat: 'YYYY-MM-DD'
|
||||
},
|
||||
search: {
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
type: 'daterange',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
startPlaceholder: '审核时间',
|
||||
endPlaceholder: '审核时间'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '采购状态',
|
||||
field: 'status',
|
||||
isSearch: true,
|
||||
isTable: true,
|
||||
search: {
|
||||
component: 'Select',
|
||||
api: () => statusOptions,
|
||||
componentProps: {
|
||||
optionsAlias: {
|
||||
labelField: 'label',
|
||||
valueField: 'value'
|
||||
}
|
||||
}
|
||||
},
|
||||
table: {
|
||||
field: 'statusName',
|
||||
fixed: 'right'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
field: 'remark',
|
||||
isSearch: false,
|
||||
isTable: true
|
||||
}
|
||||
])
|
||||
export const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
94
src/views/MiniMall/Purchase/index.vue
Normal file
94
src/views/MiniMall/Purchase/index.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索工作栏 -->
|
||||
<Search
|
||||
:schema="allSchemas.searchSchema"
|
||||
labelWidth="0"
|
||||
expand
|
||||
expand-field="supplier"
|
||||
@search="setSearchParams"
|
||||
@reset="setSearchParams"
|
||||
>
|
||||
<template #actionMore>
|
||||
<el-button type="primary" @click="handleAdd">发起采购</el-button>
|
||||
</template>
|
||||
</Search>
|
||||
<!-- 列表 -->
|
||||
<SSTable
|
||||
class="mt-20px"
|
||||
v-model:tableObject="tableObject"
|
||||
:tableColumns="allSchemas.tableColumns"
|
||||
@get-list="getTableList"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="item in allSchemas.tableColumns"
|
||||
:key="item.table?.field || item.field"
|
||||
:prop="item.table?.field || item.field"
|
||||
:label="item.label"
|
||||
:fixed="item.fixed"
|
||||
min-width="150px"
|
||||
showOverflowTooltip
|
||||
/>
|
||||
<el-table-column label="操作" width="150px" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" v-if="row.status == 1" link @click="handleAudit(row)"
|
||||
>采购审核</el-button
|
||||
>
|
||||
<el-button v-else type="primary" link @click="purchaseAgain(row)">再次采购</el-button>
|
||||
<el-button type="primary" link @click="handleDetail(row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</SSTable>
|
||||
<DialogAdd ref="creatPurchase" />
|
||||
<DialogAudit ref="auditPurchase" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { allSchemas } from './index.data.js'
|
||||
import DialogAdd from './Comp/DialogAdd.vue'
|
||||
import DialogAudit from './Comp/DialogAudit.vue'
|
||||
|
||||
const creatPurchase = ref()
|
||||
const auditPurchase = ref()
|
||||
|
||||
const tableObject = ref({
|
||||
tableList: [],
|
||||
loading: false,
|
||||
total: 1,
|
||||
pageSize: 20,
|
||||
currentPage: 1
|
||||
})
|
||||
const setSearchParams = function () {
|
||||
tableObject.value.tableList = [
|
||||
{ name: '测试', status: 1, statusName: '审核中', supplier: '林氏木业', purchaseCount: 10 },
|
||||
{ name: '测试2', status: 2, statusName: '已通过', supplier: '张氏木业', purchaseCount: 1 },
|
||||
{ name: '测试3', status: 3, statusName: '已驳回', supplier: '周氏木业', purchaseCount: 5 }
|
||||
]
|
||||
}
|
||||
|
||||
function getTableList() {
|
||||
tableObject.value.tableList = [
|
||||
{ name: '测试', status: 1, statusName: '审核中', supplier: '林氏木业', purchaseCount: 10 },
|
||||
{ name: '测试2', status: 2, statusName: '已通过', supplier: '张氏木业', purchaseCount: 1 },
|
||||
{ name: '测试3', status: 3, statusName: '已驳回', supplier: '周氏木业', purchaseCount: 5 }
|
||||
]
|
||||
}
|
||||
|
||||
function purchaseAgain(row) {
|
||||
creatPurchase.value.open({ ...row })
|
||||
}
|
||||
|
||||
function handleAudit(row) {
|
||||
auditPurchase.value.open({ ...row }, true)
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
creatPurchase.value.open(null)
|
||||
}
|
||||
function handleDetail(row) {
|
||||
auditPurchase.value.open({ ...row }, false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user