1

src/layout/learning/sociology/info-1.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="info-1">
+    <van-row>
+      <van-col span="24" class="main">
+        <van-col span="24" class="one">
+          <van-form label-width="4em">
+            <van-field v-model="info.name" name="name" label="姓名" readonly />
+            <van-field v-model="info.age" name="age" label="年龄" readonly />
+            <van-field v-model="info.unit" name="unit" label="单位" type="textarea" autosize rows="1" readonly />
+            <van-field v-model="info.job" name="job" label="职务" readonly />
+            <van-field v-model="info.title" name="title" label="职称" readonly />
+            <van-field v-model="info.directionId" name="directionId" label="研究方向" autosize rows="1" readonly />
+          </van-form>
+        </van-col>
+      </van-col>
+    </van-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'info-1',
+  props: {
+    info: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .van-divider {
+      margin: 10px 0;
+    }
+  }
+}
+</style>

src/layout/learning/sociology/list-1.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="list-1">
+    <van-row>
+      <van-col span="24" class="main">
+        <van-col span="24" class="list" v-for="(item, index) in list" :key="index">
+          <van-col span="24" class="title textOver">
+            {{ item.name }}
+          </van-col>
+          <van-col span="24" class="other">
+            <van-col span="24" class="otherInfo">
+              单位：<span>{{ item.unit || '暂无' }}</span>
+            </van-col>
+            <van-col span="24" class="otherInfo">
+              研究方向：<span>{{ item.directionId || '暂无' }}</span>
+            </van-col>
+          </van-col>
+          <van-col span="24" class="btn">
+            <van-button type="info" size="small" @click="toView(item)">详细信息</van-button>
+          </van-col>
+        </van-col>
+      </van-col>
+    </van-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list-1',
+  props: {
+    list: { type: Array },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    // 查看详情
+    toView(data) {
+      this.$emit('toView', data);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .list {
+    background-color: #fff;
+    margin: 0 0 8px 0;
+    padding: 8px;
+    border-radius: 5px;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      margin: 0 0 5px 0;
+    }
+    .other {
+      margin: 0 0 5px 0;
+      .otherInfo {
+        font-size: 14px;
+        color: #666;
+        margin: 0 0 5px 0;
+        span {
+          color: #000;
+        }
+      }
+    }
+    .btn {
+      text-align: center;
+      .van-button {
+        margin: 0 5px;
+      }
+    }
+  }
+}
+</style>

src/layout/learning/sociology/search-1.vue

@@ -0,0 +1,71 @@
+<template>
+  <div id="search-1">
+    <van-row>
+      <van-col span="24" class="main">
+        <van-col span="24" class="one">
+          <van-form label-width="4em">
+            <van-field v-model="form.name" name="name" label="姓名" placeholder="请输入姓名" />
+            <van-field v-model="form.age" name="age" label="年龄" placeholder="请输入年龄" />
+            <van-field v-model="form.unit" name="unit" label="单位" placeholder="请输入单位" />
+            <van-field v-model="form.job" name="job" label="职务" placeholder="请输入职务" />
+            <van-field v-model="form.title" name="title" label="职称" placeholder="请输入职称" />
+            <van-field v-model="form.directionId" name="directionId" label="研究方向" placeholder="请输入研究方向" />
+            <div class="btn">
+              <van-button type="info" size="small" @click="reseat">重置条件</van-button>
+              <van-button type="primary" size="small" @click="onSubmit">提交查询</van-button>
+            </div>
+          </van-form>
+        </van-col>
+      </van-col>
+    </van-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const moment = require('moment');
+export default {
+  name: 'search-1',
+  props: { form: { type: Object } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    reseat() {
+      this.$emit('reseat');
+    },
+    onSubmit() {
+      this.$emit('onSubmit', { data: this.form });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .btn {
+      text-align: center;
+      margin: 10px 0;
+      .van-button {
+        margin: 0 5px;
+      }
+    }
+  }
+}
+</style>

src/views/learning/sociology/index.vue

@@ -1,22 +1,78 @@
 <template>
   <div id="index">
-    <van-row>
-      <van-col span="24" class="main"> test </van-col>
-    </van-row>
+    <admin-frame @search="search" :limit="limit" :total="total" topType="2" @back="back" @add="toAdd" :useNav="false">
+      <template v-slot:info>
+        <list-1 :list="list" @toView="toView"></list-1>
+      </template>
+    </admin-frame>
+    <van-dialog class="dialog" v-model="dialog.show" :title="dialog.title" :show-confirm-button="false" show-cancel-button cancel-button-text="返回">
+      <info-1 :info="info" v-if="dialog.type == '1'"></info-1>
+      <search-1 :form="searhForm" v-else-if="dialog.type == '2'" @reseat="reseat" @onSubmit="onSubmit"></search-1>
+    </van-dialog>
   </div>
 </template>
 
 <script>
+import list1 from '@/layout/learning/sociology/list-1.vue';
+import info1 from '@/layout/learning/sociology/info-1.vue';
+import search1 from '@/layout/learning/sociology/search-1.vue';
+import adminFrame from '@common/src/components/mobile-frame/mobile-main.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    adminFrame,
+    list1,
+    info1,
+    search1,
+  },
   data: function () {
-    return {};
+    return {
+      list: [],
+      total: 0,
+      limit: 5,
+      // 查询
+      searhForm: {},
+      // 弹框
+      dialog: { show: false, title: '详细信息', type: '1' },
+      // 详细信息
+      info: {},
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    async search({ skip = 0, limit = this.limit, searchName, ...info } = {}) {
+      if (searchName) info.name = searchName;
+      console.log(this.searhForm);
+    },
+    // 查看信息
+    async toView(data) {
+      this.$set(this, `info`, data);
+      this.dialog = { show: true, title: '详细信息', type: '1' };
+    },
+    // 添加查询条件
+    toAdd() {
+      this.dialog = { show: true, title: '查询条件', type: '2' };
+    },
+    // 重置条件
+    reseat() {
+      this.searhForm = {};
+      this.dialog = { show: false, title: '查询条件', type: '2' };
+      this.search();
+    },
+    // 提交查询
+    onSubmit({ data }) {
+      this.search(data);
+      this.dialog = { show: false, title: '查询条件', type: '2' };
+    },
+    // 返回
+    back() {
+      this.$router.push({ path: '/learning/index' });
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
@@ -33,4 +89,11 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.dialog {
+  /deep/.van-dialog__content {
+    max-height: 350px;
+    overflow-y: auto;
+  }
+}
+</style>