成本模块
This commit is contained in:
363
klp-ui/src/views/wms/cost/standard/index.vue
Normal file
363
klp-ui/src/views/wms/cost/standard/index.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div class="app-container cost-standard">
|
||||
<!-- 当前有效标准提示 -->
|
||||
<div class="alert-section" v-if="currentStandard">
|
||||
<div class="alert-content">
|
||||
<i class="el-icon-info"></i>
|
||||
<span>当前有效标准：<strong>{{ formatMoney(currentStandard.unitCost) }}</strong> 元/吨/天（生效日期：{{ currentStandard.effectiveDate }}）</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查询条件 -->
|
||||
<div class="query-section">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增成本标准</el-button>
|
||||
<el-button type="success" icon="el-icon-refresh" @click="loadCurrentStandard">刷新当前标准</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 成本标准列表 -->
|
||||
<div class="table-section">
|
||||
<div class="section-header">
|
||||
<span>成本标准配置列表</span>
|
||||
<el-tooltip content="成本标准按生效日期自动应用，历史标准不会影响已计算的成本记录" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="standardList"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="unitCost" label="单位成本" align="right">
|
||||
<template slot-scope="scope">
|
||||
<span class="cost-value">{{ formatMoney(scope.row.unitCost) }}</span> 元/吨/天
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="effectiveDate" label="生效日期" />
|
||||
<el-table-column prop="expireDate" label="失效日期">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.expireDate || '当前有效' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
|
||||
{{ scope.row.status === 1 ? '有效' : '失效' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" />
|
||||
<el-table-column prop="createBy" label="创建人" />
|
||||
<el-table-column prop="createTime" label="创建时间" />
|
||||
<el-table-column label="操作" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="handleUpdate(scope.row)">修改</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleDelete(scope.row)"
|
||||
:disabled="scope.row.status === 1"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 新增/修改对话框 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
width="600px"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
||||
<el-form-item label="单位成本" prop="unitCost">
|
||||
<el-input-number
|
||||
v-model="form.unitCost"
|
||||
:precision="2"
|
||||
:step="1000"
|
||||
:min="0"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 5px;">
|
||||
单位：元/吨/天
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="生效日期" prop="effectiveDate">
|
||||
<el-date-picker
|
||||
v-model="form.effectiveDate"
|
||||
type="date"
|
||||
placeholder="选择生效日期"
|
||||
style="width: 100%;"
|
||||
value-format="yyyy-MM-dd"
|
||||
:picker-options="{
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now() - 8.64e7
|
||||
}
|
||||
}"
|
||||
/>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 5px;">
|
||||
生效日期不能早于今天
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注说明"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm" :loading="submitting">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listCostStandardConfig,
|
||||
getCostStandardConfig,
|
||||
addCostStandardConfig,
|
||||
updateCostStandardConfig,
|
||||
delCostStandardConfig,
|
||||
getCurrentCostStandard
|
||||
} from '@/api/wms/cost'
|
||||
|
||||
export default {
|
||||
name: 'CostStandard',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
submitting: false,
|
||||
total: 0,
|
||||
standardList: [],
|
||||
currentStandard: null,
|
||||
dialogVisible: false,
|
||||
dialogTitle: '新增成本标准',
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
form: {
|
||||
configId: null,
|
||||
unitCost: 10000,
|
||||
effectiveDate: null,
|
||||
remark: null
|
||||
},
|
||||
rules: {
|
||||
unitCost: [
|
||||
{ required: true, message: '请输入单位成本', trigger: 'blur' },
|
||||
{ type: 'number', min: 0, message: '单位成本必须大于0', trigger: 'blur' }
|
||||
],
|
||||
effectiveDate: [
|
||||
{ required: true, message: '请选择生效日期', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.loadCurrentStandard()
|
||||
},
|
||||
methods: {
|
||||
async getList() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await listCostStandardConfig(this.queryParams)
|
||||
if (res.code === 200) {
|
||||
this.standardList = res.rows || []
|
||||
this.total = res.total || 0
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('加载成本标准列表失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async loadCurrentStandard() {
|
||||
try {
|
||||
const res = await getCurrentCostStandard()
|
||||
if (res.code === 200) {
|
||||
this.currentStandard = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载当前标准失败:', error)
|
||||
}
|
||||
},
|
||||
handleAdd() {
|
||||
this.dialogTitle = '新增成本标准'
|
||||
this.form = {
|
||||
configId: null,
|
||||
unitCost: 10000,
|
||||
effectiveDate: null,
|
||||
remark: null
|
||||
}
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form && this.$refs.form.clearValidate()
|
||||
})
|
||||
},
|
||||
async handleUpdate(row) {
|
||||
this.dialogTitle = '修改成本标准'
|
||||
try {
|
||||
const res = await getCostStandardConfig(row.configId)
|
||||
if (res.code === 200) {
|
||||
this.form = {
|
||||
configId: res.data.configId,
|
||||
unitCost: res.data.unitCost,
|
||||
effectiveDate: res.data.effectiveDate,
|
||||
remark: res.data.remark
|
||||
}
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form && this.$refs.form.clearValidate()
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('加载成本标准详情失败')
|
||||
}
|
||||
},
|
||||
async handleDelete(row) {
|
||||
this.$confirm('确定要删除该成本标准吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await delCostStandardConfig([row.configId])
|
||||
if (res.code === 200) {
|
||||
this.$message.success('删除成功')
|
||||
this.getList()
|
||||
this.loadCurrentStandard()
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('删除失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs.form.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.submitting = true
|
||||
try {
|
||||
if (this.form.configId) {
|
||||
// 修改
|
||||
const res = await updateCostStandardConfig(this.form)
|
||||
if (res.code === 200) {
|
||||
this.$message.success('修改成功')
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
this.loadCurrentStandard()
|
||||
}
|
||||
} else {
|
||||
// 新增
|
||||
const res = await addCostStandardConfig(this.form)
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.dialogVisible = false
|
||||
this.getList()
|
||||
this.loadCurrentStandard()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error(this.form.configId ? '修改失败' : '新增失败')
|
||||
} finally {
|
||||
this.submitting = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
formatMoney(value) {
|
||||
if (!value) return '0.00'
|
||||
return Number(value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cost-standard {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.alert-section {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px 20px;
|
||||
background: #ECF5FF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #B3D8FF;
|
||||
|
||||
.alert-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #409EFF;
|
||||
font-size: 14px;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.query-section {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
padding: 20px;
|
||||
background: #FAFAFA;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 500;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
|
||||
.el-icon-question {
|
||||
color: #909399;
|
||||
cursor: help;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cost-value {
|
||||
color: #409EFF;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user