You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
337 lines
13 KiB
337 lines
13 KiB
3 weeks ago
|
<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>
|