3 changed files with 367 additions and 0 deletions
@ -0,0 +1,337 @@ |
|||||
|
<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> |
||||
Loading…
Reference in new issue