企微考试提交

src/project/wxtest/AppDutyInfo/AppDutyInfo.vue

@@ -0,0 +1,77 @@
+<script>
+import {mapActions, mapMutations, mapState} from "vuex";
+
+export default {
+  name: "AppDutyInfo",
+  appName: "值班信息",
+  data() {
+    return {
+      list: [],
+      show: false,
+      columns: [
+        {label: '值班人员', prop: 'dutyUserName'},
+        {label: '开始时间', prop: 'dutyStartTime'},
+        {label: '结束时间', prop: 'dutyEndTime'},
+      ],
+      typeList: [{value: '1', label: '陈锐-超管'}]
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onShow() {
+    document.title = '值班信息'
+    if (this.user.token) {
+      this.getList()
+    } else this.getCode().then(this.getToken).then(this.getList)
+  },
+  methods: {
+    ...mapMutations(['setToken']),
+    ...mapActions(['getCode']),
+    getToken() {
+      return this.$http.post("/node/wxtest/token", null, {withoutToken: 1}).then(res => {
+        if (res?.data) {
+          return this.setToken(res.data.data)
+        }
+      })
+    },
+    getList() {
+      this.$http.post('/node/duty/list').then((res) => {
+        if (res?.data) {
+          this.list = res.data.records
+        }
+      })
+    },
+  },
+}
+
+</script>
+
+<template>
+  <section class="AppDutyInfo">
+    <div v-text="user.token"/>
+    <div class="select" @click="show=true">艾贤凌
+      <u-icon name="arrow-down" color="#999" size="24"/>
+    </div>
+    <u-select v-model="show" :list="typeList"/>
+    <u-table>
+      <u-tr>
+        <u-th width="33%" v-for="column in columns" :key="column.prop">{{ column.label }}</u-th>
+      </u-tr>
+      <u-tr v-for="(row, i) in list" :key="i">
+        <u-th width="33%" v-for="column in columns" :key="column.prop">{{ row[column.prop] }}</u-th>
+      </u-tr>
+    </u-table>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.AppDutyInfo {
+  padding: 0 16px;
+
+  .select {
+    text-align: right;
+    padding: 32px 0;
+  }
+}
+</style>