<template>
<div class="demo-wrap min-flex-right">
<div class="flex-between">
<h2>{{ pageTitle }}</h2>
<el-button type="primary" @click="openDialog">新增</el-button>
<GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
@dialogVisibleChange="dialogVisibleChange">
<el-form :model="form" class="el-row demo-ruleForm" ref="formRef">
<el-form-item label="检测类型" prop="type">
<GuipSelect v-model="form.type" :options="type2nameOptions" :defaultValue="form.typename" />
</el-form-item>
<el-form-item label="采购单价" prop="type" label-width="73px">
<div style="display: flex; align-items: center; gap: 8px; width: 100%;">
<GuipInput v-model="form.unit_price" style="flex: 1;" :default-value="form.unit_price" />
<span>元 /</span>
<GuipInput v-model="form.unit_num" style="flex: 1;" :default-value="form.unit_num"/>
<span>字（篇/页）</span>
</div>
</el-form-item>
<template v-if="type != 'purchase'">
<el-form-item label="阶段成本" prop="type" label-width="73px">
<div style="display: flex; align-items: center; gap: 8px; width: 100%;">
<GuipInput v-model="form.cost" style="flex: 1;" :default-value="form.cost"/>
<span>元</span>
</div>
</el-form-item>
<el-form-item label="起止日期" prop="type" label-width="73px">
<el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" :default-value="form.date">
</el-date-picker>
</el-form-item>
</template>
</el-form>
</GuipDialog>
</div>
<div class=" flex-common">
<el-form>
<el-table :data="tableData" style="width: 100%">
<template v-if="type == 'purchase'">
<el-table-column label="检测类型">
<template slot-scope="scope">
{{ type2name[scope.row.type] }}
</template>
</el-table-column>
<el-table-column label="采购单价">
<template slot-scope="scope">
{{ scope.row.unit_price }} / {{ scope.row.unit_num==1 ? '篇' : scope.row.unit_num + '字' }}
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<a @click="editPurchase(scope.row)" style="color: #006aff">编辑</a>
</template>
</el-table-column>
</template>
<template v-else>
<el-table-column label="检测类型">
<template slot-scope="scope">
{{ type2name[scope.row.type] }}
</template>
</el-table-column>
<el-table-column label="采购价">
<template slot-scope="scope">
<template v-if="scope.row.unit_price>0">
单价：{{ scope.row.unit_price }} 元 / {{ scope.row.unit_num==1 ? '篇' : scope.row.unit_num + '字' }}
</template>
<template v-else>
成本：{{ scope.row.cost }} 元
</template>
</template>
</el-table-column>
<el-table-column label="起止日期">
<template slot-scope="scope">
{{ scope.row.start_date.substring(0, 10) }} - {{ scope.row.end_date.substring(0, 10) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<a @click="editStagePurchase(scope.row)" style="color: #006aff">编辑</a>
</template>
</el-table-column>
</template>
</el-table>
<el-pagination background
@size-change='handleSizeChange'
@current-change='handleCurrentChange'
:current-page="currentPage"
:page-size=pageSize
layout="prev, pager, next,jumper"
:total="total">
</el-pagination>
</el-form>
</div>
</div>
</template>
<script>
import GuipDialog from "@/components/GuipDialog.vue";
import GuipSelect from "@/components/GuipSelect.vue";
import GuipInput from "@/components/GuipInput.vue";
export default {
name: 'purchase',
props: {
pageTitle: {
type: String,
default: ''
},
type: {
type: String,
default: ''
},
showDateSelect: {
type: Boolean,
default: true
}
},
components: {
GuipInput,
GuipSelect,
GuipDialog
},
data() {
return {
chktype:0,
currentPage: 1, //当前页
pageSize: 5, //每页的容量
total: 0, //列表总数
tableData: [],
type2name: [],
dialogTitle: '新增',//弹框标题
dialogVisible: false,//是否展示弹框
showCancelButton: true, // 控制是否显示取消按钮
showCloseButton: true, // 控制是否显示关闭按钮
form: {
type: '',
typename: '',
unit_price: '',
unit_num: '',
cost: '',
sdate: '',
edate: '',
},
}
},
mounted() {
this.init()
},
computed: {
type2nameOptions() {
return Object.entries(this.type2name).map(([value, label]) => ({
label,
value: Number(value) // 如果你需要 value 是数字
}));
}
},
watch: {
'$route'() {
this.init()
},
'form.date'(newVal) {
if (Array.isArray(newVal) && newVal.length === 2) {
this.form.sdate = this.formatDateTime(new Date(newVal[0]));
this.form.edate = this.formatDateTime(new Date(newVal[1]));
} else {
this.form.sdate = '';
this.form.edate = '';
}
}
},
methods: {
init() {
document.title = this.pageTitle;
if (this.type == 'purchase') {
this.getPurchase()
} else {
this.getStagePurchase()
}
},
getPurchase() {
const that = this
that.tableData = []
this.$http('POST', '/supernew/ajax_get_purchase_list', {
type: that.chktype,
cur_page: that.currentPage,
page_size: that.pageSize,
}).then(response => {
this.$nextTick(() => {
that.tableData = response.data.list
that.type2name = response.data.type2name
that.total = response.data.total
})
}).catch(error => {
console.error(error, 'error')
})
},
getStagePurchase() {
const that = this
that.tableData = []
this.$http('POST', '/supernew/ajax_get_stage_purchase', {
type: that.chktype,
cur_page: that.currentPage,
page_size: that.pageSize,
}).then(response => {
this.$nextTick(() => {
that.tableData = response.data.list
that.type2name = response.data.type2name
that.total = response.data.total
})
}).catch(error => {
console.error(error, 'error')
})
},
handleSizeChange(val) {
this.pageSize = val
this.init()
},
handleCurrentChange(val) {
this.currentPage = val
this.init()
},
openDialog() {
this.form.type = ''
this.form.typename = ''
this.form.unit_price = ''
this.form.unit_num = ''
this.dialogVisible = true;
}, // 确认按钮事件
handleConfirm() {
console.log('提交成功:', this.form);
const that = this
if(!that.form.type){
this.$message.warning('请选择检测类型');
return
}
if(that.type == 'purchase'){
if(!that.form.unit_price || !that.form.unit_num){
this.$message.warning('请输入采购单价');
return
}
this.$http('POST', '/supernew/ajax_save_purchase', {
type: that.form.type,
unit_price: that.form.unit_price,
unit_num: that.form.unit_num,
}).then(response => {
this.$nextTick(() => {
if(!response.status){
this.$message.warning(response.info);
}
this.dialogVisible = false;
})
}).catch(error => {
this.$message.warning(error);
this.dialogVisible = false;
})
}else{
if((!that.form.unit_price || !that.form.unit_num) && !that.form.cost){
this.$message.warning('请输入采购单价或阶段成本');
return
}
if(!that.form.sdate || !that.form.edate){
this.$message.warning('请选择起止日期');
return
}
this.$http('POST', '/supernew/ajax_save_stage_purchase', {
type: that.form.type,
unit_price: that.form.unit_price,
unit_num: that.form.unit_num,
cost: that.form.cost,
sdate: that.form.sdate,
edate: that.form.edate,
}).then(response => {
this.$nextTick(() => {
if(!response.status){
this.$message.warning(response.info);
}
this.dialogVisible = false;
})
}).catch(error => {
this.$message.warning(error);
this.dialogVisible = false;
})
}
},
// 取消按钮事件
handleCancel() {
// this.$message.warning('点击了取消按钮');
this.dialogVisible = false;
},
// 关闭弹框事件
handleClose() {
// this.$message.info('弹框已关闭');
this.dialogVisible = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
formatDateTime(date) {
const pad = n => n.toString().padStart(2, '0');
const Y = date.getFullYear();
const M = pad(date.getMonth() + 1);
const D = pad(date.getDate());
return `${Y}-${M}-${D}`;
},
editPurchase(row){
this.form.type = row.type
this.form.typename = this.type2name[row.type]
this.form.unit_price = row.unit_price
this.form.unit_num = row.unit_num
this.dialogVisible = true;
},
editStagePurchase(row){
this.form.type = row.type
this.form.typename = this.type2name[row.type]
this.form.unit_price = row.unit_price
this.form.unit_num = row.unit_num
this.dialogVisible = true;
}
}
}
</script>
<style scoped lang="scss">
</style>