当前届次

project/pingchang/apps/AppOrganizationChange/components/moment.vue

@@ -1,13 +1,126 @@
 <template>
-  <div>当前届次</div>
+  <section class="moment">
+    <ai-detail>
+      <template slot="content">
+        <ai-bar title="总体概况">
+          <template slot="right">
+            <el-button size="small" type="text" icon="iconfont iconEdit" @click="toEdit('')" >修改</el-button>
+          </template>
+        </ai-bar>
+        <ai-wrapper>
+          <ai-info-item label="本届换届时间" :value="111" />
+          <ai-info-item label="换届类型" :value="111" />
+          <ai-info-item label="下届换届时间" :value="111" />
+          <ai-info-item label="当前届次" :value="111" />
+        </ai-wrapper>
+        <ai-bar title="本届任职">
+          <template slot="right">
+            <el-button size="small" type="text" icon="iconfont iconAdd" @click="toAdd('')" >添加任职人员</el-button>
+          </template>
+        </ai-bar>
+        <ai-table
+            class="detail-table__table"
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="totalJob"
+            :current.sync="current"
+            :size.sync="size"
+            @getList="getJobList">
+            <el-table-column slot="options" label="操作" align="center">
+              <template slot-scope="{ row }">
+                <el-button type="text" @click="jobEdit(row.id)">编辑</el-button>
+                <el-button type="text" @click="jobDelete(row.id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+          <ai-bar title="本届候选人">
+          <template slot="right">
+            <el-button size="small" type="text" icon="iconfont iconAdd" @click="toAdd('')" >添加候选人</el-button>
+          </template>
+        </ai-bar>
+        <ai-table
+            class="detail-table__table"
+            :tableData="tableData"
+            :col-configs="colConfigs"
+            :total="totalJob"
+            :current.sync="current"
+            :size.sync="size"
+            @getList="getJobList">
+            <el-table-column slot="options" label="操作" align="center">
+              <template slot-scope="{ row }">
+                <el-button type="text" @click="jobEdit(row.id)">编辑</el-button>
+                <el-button type="text" @click="jobDelete(row.id)">删除</el-button>
+              </template>
+            </el-table-column>
+          </ai-table>
+      </template>
+    </ai-detail>
+  </section>
 </template>
 
 <script>
 export default {
-
+  name: "moment",
+  props: {
+    instance: Function,
+    permissions: Function,
+    dict: Object,
+    selected: Object
+  },
+  data() {
+    return {
+      isEdit: false,
+      tableData: [],
+      totalJob: 0,
+      current: 1,
+      size: 10,
+    }
+  },
+  computed: {
+    colConfigs() {
+      return [
+        {prop: 'content', label: '职位'},
+        {prop: 'content', label: '姓名'},
+        {slot: 'options'},
+      ]
+    }
+  },
+  methods: {
+    jobEdit() {},
+    jobDelete() {},
+    getJobList() {},
+    toEdit() {
+      this.$emit('change', {
+        type: 'addChange',
+        params: {
+          id: id || ''
+        }
+      })
+    },
+  }
 }
 </script>
 
-<style>
+<style lang="scss" scope>
+.moment {
+  ::v-deep .ai-detail .ai-detail__content .ai-detail__content--wrapper {
+    padding-top: 0;
+    background-color: blue;
+    // ::v-deep .aibar {
+    //   height: 40px;
+    // }
+  }
+  ai-detail {
+    ::v-deep .ai-detail__content {
+      background-color: #FFF;
+    }
 
+    
+  }
+  
+
+  
+
+  
+}
 </style>