|
|
@@ -0,0 +1,229 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="visible"
|
|
|
+ :title="`订单详情 ${oData && oData.orderNo ? oData.orderNo : ''}`"
|
|
|
+ append-to-body
|
|
|
+ width="900px"
|
|
|
+ >
|
|
|
+ <div class="flex column" style="padding-bottom:20px;height:580px">
|
|
|
+ <div class="flex valign-center">
|
|
|
+ <el-button
|
|
|
+ plain
|
|
|
+ icon="el-icon-plus"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ class="custom-plain-button"
|
|
|
+ @click="onAddTagBtnClick"
|
|
|
+ :disabled="oData && oData.tagPurchaseStateId !='0'"
|
|
|
+ >新增标签</el-button>
|
|
|
+ <el-button
|
|
|
+ plain
|
|
|
+ icon="el-icon-delete"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ class="custom-plain-button"
|
|
|
+ @click="onBatchDeleteBtnClick"
|
|
|
+ :disabled="selectedList.length === 0 || oData.tagPurchaseStateId !='0'"
|
|
|
+ >批量删除</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1 fit-size" style="padding-top:20px;">
|
|
|
+ <el-table
|
|
|
+ ref="table"
|
|
|
+ :data="list"
|
|
|
+ stripe
|
|
|
+ border
|
|
|
+ height="100%"
|
|
|
+ size="small"
|
|
|
+ class="custom-el-table-style"
|
|
|
+ @selection-change="onSelectionChange"
|
|
|
+ @row-click="onRowClick"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="55"
|
|
|
+ align="center"
|
|
|
+ :selectable="tagSelectAble"
|
|
|
+ fixed
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="60"
|
|
|
+ align="center"
|
|
|
+ fixed
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="标签类型"
|
|
|
+ prop="tagTypeName"
|
|
|
+ header-align="center"
|
|
|
+ min-width="120"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="数量"
|
|
|
+ min-width="80"
|
|
|
+ prop="number"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.number" :class="{ 'input-error': scope.row.number === '' }" @input="handleInput" :disabled="oData.tagPurchaseStateId !='0'"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="单价（元）"
|
|
|
+ prop="unitPrice"
|
|
|
+ align="right"
|
|
|
+ min-width="70"
|
|
|
+ header-align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="费用（元）"
|
|
|
+ prop="amount"
|
|
|
+ align="right"
|
|
|
+ min-width="70"
|
|
|
+ header-align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作栏"
|
|
|
+ min-width="80"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template v-slot="{ row }">
|
|
|
+ <div class="flex center layout-gap">
|
|
|
+ <edit-button :data="row" :on-click="onDeleteBtnClick" icon="el-icon-delete" :disabled="oData.tagPurchaseStateId !='0'">删除</edit-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer v-if="oData && oData.tagPurchaseStateId === '0'">
|
|
|
+ <div class="flex center dialog-footer">
|
|
|
+ <el-button
|
|
|
+ @click="onCloseBtnClick"
|
|
|
+ >取消</el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="onOkBtnClick"
|
|
|
+ >确定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <dialog-add-tag-purchase
|
|
|
+ ref="addTagPurchaseDialog"
|
|
|
+ :optionGroup="optionGroup"
|
|
|
+ @saved="loadTag"
|
|
|
+ ></dialog-add-tag-purchase>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BaseCurdList from '@@/utils/BaseCurdList'
|
|
|
+import TagPurchase from '@@/entries/TagPurchase'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'DialogTagPurchaseDetail',
|
|
|
+ extends: BaseCurdList(TagPurchase),
|
|
|
+ props: {
|
|
|
+ api: {
|
|
|
+ required: true,
|
|
|
+ type: Function
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: () => ({
|
|
|
+ visible: false,
|
|
|
+ oData: null
|
|
|
+ }),
|
|
|
+ methods: {
|
|
|
+ open (data) {
|
|
|
+ this.oData = data
|
|
|
+ this.visible = true
|
|
|
+ this.list = data.details
|
|
|
+ },
|
|
|
+ close () {
|
|
|
+ this.oData = null
|
|
|
+ this.visible = false
|
|
|
+ this.list = Object.freeze([])
|
|
|
+ },
|
|
|
+ tagSelectAble () {
|
|
|
+ return this.oData.tagPurchaseStateId === '0'
|
|
|
+ },
|
|
|
+ onBatchDeleteBtnClick () {
|
|
|
+ const { selectedList } = this
|
|
|
+ this.$confirm(`此操作将删除选中的记录, 是否继续？`, '确认', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ confirmButtonClass: 'confirm-dialog-confirm-btn',
|
|
|
+ cancelButtonClass: 'confirm-dialog-cancel-btn',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ const ids = new Set(selectedList.map(data => data.id))
|
|
|
+ this.list = this.list.filter(item => !ids.has(item.id))
|
|
|
+ this.oData.details = this.list
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ onDeleteBtnClick (data) {
|
|
|
+ this.$confirm(`此操作将删除该记录, 是否继续？`, '确认', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ confirmButtonClass: 'confirm-dialog-confirm-btn',
|
|
|
+ cancelButtonClass: 'confirm-dialog-cancel-btn',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.list = this.list.filter(item => item.id !== data.id)
|
|
|
+ this.oData.details = this.list
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ onCloseBtnClick () {
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+ onOkBtnClick () {
|
|
|
+ this.$$request(this.api, this.oData).then(() => {
|
|
|
+ this.close()
|
|
|
+ this.$emit('saved')
|
|
|
+ }).catch(console.error).finally(() => {})
|
|
|
+ },
|
|
|
+ handleInput (value) {
|
|
|
+ let sanitizedValue = value.replace(/[^0-9]/g, '')
|
|
|
+ sanitizedValue = sanitizedValue.replace(/^0+/, '')
|
|
|
+ this.selectedData.number = sanitizedValue === '' ? '' : sanitizedValue
|
|
|
+ this.selectedData.amount = sanitizedValue === '' ? 0 : (sanitizedValue * this.selectedData.unitPrice).toFixed(2)
|
|
|
+ },
|
|
|
+ onAddTagBtnClick () {
|
|
|
+ this.$refs.addTagPurchaseDialog.open({tagTypeId: '1', number: 0})
|
|
|
+ },
|
|
|
+ loadTag (data) {
|
|
|
+ if (data.number > 0) {
|
|
|
+ const currentTag = this.list.filter(item => item.tagTypeId === data.tagTypeId)
|
|
|
+ if (currentTag.length <= 0) {
|
|
|
+ const providerConfig = this.optionGroup.TagType
|
|
|
+ const tag = providerConfig.list.find(item => item.id === data.tagTypeId)
|
|
|
+ if (tag) {
|
|
|
+ const amount = (data.number * tag.price).toFixed(2)
|
|
|
+ const orderId = this.oData.id
|
|
|
+ const addData = {
|
|
|
+ amount: amount,
|
|
|
+ number: data.number,
|
|
|
+ tagPurchaseId: orderId,
|
|
|
+ tagTypeId: tag.id,
|
|
|
+ tagTypeName: tag.name,
|
|
|
+ unitPrice: tag.price
|
|
|
+ }
|
|
|
+ this.list.push(addData)
|
|
|
+ this.oData.details = this.list
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.input-error .el-input__inner {
|
|
|
+ border-color: red;
|
|
|
+}
|
|
|
+</style>
|
gongwencan