zfire-newmall-admin/src/views/mallManagement/settlement/index.vue

<template>
	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
		<template slot-scope="{activeKey, data}">
			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
			  :operation="operation()" :exportList="exportList">
			</template-page>
			<div v-if="~['remark'].indexOf(activeKey)">
				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
				  <zj-form-module title="" label-width="100px" :showPackUp="false"
				    :form-data="formData" :form-items="formItems">
				  </zj-form-module>
				</zj-form-container>
				<div slot="footer" class="dialog-footer">
				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
				  <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
				</div>
			</div>
		</template>
	</zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
import { orderShareListPageV2, orderSharePageExport, settlement, saveRemark } from "@/api/settlement";
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
  components: { TemplatePage },
  mixins: [import_mixin,operation_mixin],
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      /** 表单变量 */
      formDialogType: 0,
      formDialogTitles: ["备注"],
      formDialog: false,
      formData: {
        remark: '',
      },
		formType: 'add',
		formVisible: false,
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    formItems() {
      return [{
        md: 24,
        isShow: true,
        name: 'el-input',
        attributes: { placeholder: '请输入', type: "textarea", maxlength: "100",rows: 5 },
        formItemAttributes: {
          label: '备注',
          prop: 'remark',
          rules: [...required]
        }
      }]
    }
  },
  methods: {
    // 列表请求函数
    getList: orderShareListPageV2,
    // 列表导出函数
    exportList: orderSharePageExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
			if (item.jname === 'orderId') {
				defaultData.render = (h, { row, index, column }) => {
					return (
						<div style="padding:0 6px;cursor: pointer;" class={{ 'text-view': true, 'text-view-copy': column.isCopy }}>
							<span style="color:#008dd4;" onClick={() => {
									this.$router.push({
										name: "order_detail",
										params: {
										  pageName: row.orderId,
										  pageType: 'detail',
										  pageCode: row.orderId
										},
										query: {
										  id: row.orderId,
										  orderId: row.orderId
										}
									})
							}}>{row.orderId}</span>
							{(column.isCopy && row.orderId) ? (
								<i
									style="color:#008dd4;"
									class={['el-icon-document-copy', column.columnCopyClass]}
									data-clipboard-text={row[column.columnAttributes.prop]}
								></i>
							) : null}
						</div>
					)
				}
				defaultData.columnAttributes.width = 200
			}
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
	// 表格操作列
	operation() {
		return this.operationBtn({
			remark: {
				btnType: 'text',
				click: ({ row, index, column }) => {
					Object.assign(this.formData, row)
					this.formDialogType = 0
					this.openForm('remark',row)
				}
			},
			account: {
				conditions: ({ row, index, column }) => {
					return row.orderStatus === 'OVER' && ~["EXCEPTION", "ING"].indexOf(row.status)
				},
				btnType: 'text',
				prompt: '是否确定结算？',
					click: ({ row, index, column }) => {
						settlement({
							orderId: row.orderId
						}).then(res => {
							this.$message({ type: 'success', message: `结算成功!` })
							this.$refs.pageRef.refreshList()
						})
					}
				},
		})
	},
    openForm(type) {
      this.$refs.tabPage.addTab({
      	// 对应显示的模块
      	activeKey: type,
      	// 唯一标识
      	key: type,
      	// 页签名称
      	label: ({ remark: "备注" })[type],
      	// 打开时事件
      	triggerEvent: () => {
      		this.formCancel()
      		this.$nextTick(()=>{
      			this.formType = type
      			this.formVisible = true
      		})
      	},
      	// 关闭时事件
      	closeEvent: () => {
			this.formCancel()
      	}
      })
    },
    formCancel() {
      this.formVisible = false
      this.$refs?.formRef?.resetFields()
      this.$data.formRef = this.$options.data().formRef
    },
    formConfirm(cancel) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          ([saveRemark][this.formDialogType])(this.formData).then(res => {
            this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
            cancel('list')
            this.$refs.pageRef.refreshList()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>