gas-cylinder/src/views/marketing/orderManagement.vue

<template>
  <!-- 订单管理 -->
  <div>
    <actionBar menuTitle="订单管理" :formList="formList"></actionBar>
    <tables :key="Math.random()" :suspension="false" :tableList="tableList" :tableData="tableData"
      @buttonData="buttonData"></tables>
    <!-- 分页 -->
    <div class="paging_bottom" v-if="Total">
      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
        @changeCurrent="changeCurrent">
      </pagination>
    </div>
    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="60%" :close-on-click-modal="false">
      <forms ref="childRules" :formNewList="formRuleList" labelWidth="100px"></forms>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="staffDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <div ref="root"></div>
  </div>
</template>

<script>
  import actionBar from '@/components/actionBar'
  import tables from '@/components/tables'
  import pagination from '@/components/pagination'
  import forms from '@/components/forms'
  import {
    formRules,
    employee
  } from "./order.js";
  import { ref, onMounted } from 'vue'
  export default {
    setup() {
      const root = ref(null)
      onMounted(() => {
        // 在渲染完成后, 这个 div DOM 会被赋值给 root ref 对象
        console.log(root.value,999) // <div/>
      })
      return {
        root,
      }
    },
    components: {
      actionBar,
      tables,
      pagination,
      forms
    },
    data() {
      return {
        staffTitle: '添加',
        staffDialogVisible: false,
        formList: [{
          type: 'input',
          label: '订单时间',
          field: 'T_name',
          placeholder: '订单时间',
          colWidth: 'el-col-24',
        }, {
          type: 'select',
          label: '订单状态',
          field: 'state',
          placeholder: '订单状态',
          colWidth: 'el-col-24',
        }, {
          type: 'input',
          label: '客户电话',
          field: 'phone',
          placeholder: '客户电话',
          colWidth: 'el-col-24',
        }],
        tableList: employee(),
        tableData: [{
          T_name: '2154'
        }, {
          T_name: '2154'
        }, {
          T_name: '2154'
        }],
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
        },
        Total: 10,
        formRuleList: [],
      }
    },
    mounted() {
      const dataList = formRules();
      this.formRuleList = dataList;
    },
    methods: {
      buttonData(row, type) {
        this.operationType = type
        console.log(row, type, 25)
        if (type == 'edit') {
          this.staffTitle = '编辑'
        } else {
          this.staffTitle = '详情'
        }
        this.staffDialogVisible = true
      },
      changeSize(val) {
        this.Pagination.PageSize = val
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
      },
    }
  }
</script>

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