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