前端页面改造基本完成待优化

2021-12-30 22:41:53 +08:00
parent 8c2b6b2bc0
commit df9dc477ed
20 changed files with 729 additions and 720 deletions
@@ -68,7 +68,7 @@
  </div>
 </template>

-<script>
+<script setup>
 import {
  createExaCustomer,
  updateExaCustomer,
@@ -76,81 +76,106 @@ import {
  getExaCustomer,
  getExaCustomerList
 } from '@/api/customer'
-import infoList from '@/mixins/infoList'
 import warningBar from '@/components/warningBar/warningBar.vue'
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { formatDate } from '@/utils/format'
+
+const dialogFormVisible = ref(false)
+const type = ref('')
+const form = ref({
+  customerName: '',
+  customerPhoneData: ''
+})
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// 查询
+const getTableData = async() => {
+  const table = await getExaCustomerList({ page: page.value, pageSize: pageSize.value })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
+  }
+}
+
+getTableData()
+
+const updateCustomer = async(row) => {
+  const res = await getExaCustomer({ ID: row.ID })
+  type.value = 'update'
+  if (res.code === 0) {
+    form.value = res.data.customer
+    dialogFormVisible.value = true
+  }
+}
+const closeDialog = () => {
+  dialogFormVisible.value = false
+  form.value = {
+    customerName: '',
+    customerPhoneData: ''
+  }
+}
+const deleteCustomer = async(row) => {
+  row.visible = false
+  const res = await deleteExaCustomer({ ID: row.ID })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    })
+    if (tableData.value.length === 1 && page.value > 1) {
+      page.value--
+    }
+    getTableData()
+  }
+}
+const enterDialog = async() => {
+  let res
+  switch (type.value) {
+    case 'create':
+      res = await createExaCustomer(form.value)
+      break
+    case 'update':
+      res = await updateExaCustomer(form.value)
+      break
+    default:
+      res = await createExaCustomer(form.value)
+      break
+  }
+
+  if (res.code === 0) {
+    closeDialog()
+    getTableData()
+  }
+}
+const openDialog = () => {
+  type.value = 'create'
+  dialogFormVisible.value = true
+}
+
+</script>
+
+<script>

 export default {
-  name: 'Customer',
-  components: { warningBar },
-  mixins: [infoList],
-  data() {
-    return {
-      listApi: getExaCustomerList,
-      dialogFormVisible: false,
-      type: '',
-      form: {
-        customerName: '',
-        customerPhoneData: ''
-      }
-    }
-  },
-  created() {
-    this.getTableData()
-  },
-  methods: {
-    async updateCustomer(row) {
-      const res = await getExaCustomer({ ID: row.ID })
-      this.type = 'update'
-      if (res.code === 0) {
-        this.form = res.data.customer
-        this.dialogFormVisible = true
-      }
-    },
-    closeDialog() {
-      this.dialogFormVisible = false
-      this.form = {
-        customerName: '',
-        customerPhoneData: ''
-      }
-    },
-    async deleteCustomer(row) {
-      row.visible = false
-      const res = await deleteExaCustomer({ ID: row.ID })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '删除成功'
-        })
-        if (this.tableData.length === 1 && this.page > 1) {
-          this.page--
-        }
-        this.getTableData()
-      }
-    },
-    async enterDialog() {
-      let res
-      switch (this.type) {
-        case 'create':
-          res = await createExaCustomer(this.form)
-          break
-        case 'update':
-          res = await updateExaCustomer(this.form)
-          break
-        default:
-          res = await createExaCustomer(this.form)
-          break
-      }
-
-      if (res.code === 0) {
-        this.closeDialog()
-        this.getTableData()
-      }
-    },
-    openDialog() {
-      this.type = 'create'
-      this.dialogFormVisible = true
-    }
-  }
+  name: 'Customer'
 }
 </script>