详情页

project/xiushan/apps/AppAdministrativeLicense/components/Detail.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="Detail">
+    <ai-detail class="add">
+      <template #title>
+        <ai-title :title="params.id ? '详情' : '新增行政许可信息'" :isShowBack="true" :isShowBottomBorder="true" @onBackClick="cancel(false)" />
+      </template>
+      <template #content>
+        <div class="add-form">
+          <ai-bar title="基本信息"></ai-bar>
+          <el-form ref="rules" :model="forms" :rules="formRules" size="small"  label-width="150px">
+            <el-form-item label="许可文书名称" prop="num">
+              <el-input v-model="input" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-row type="flex">
+              <el-col :span="20">
+                <el-form-item label="许可文书号" prop="num">
+                  <el-input v-model="input" placeholder="请输入"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="20">
+                <el-form-item label="许可决定日期" prop="num">
+                  <el-input v-model="input" placeholder="请输入"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row type="flex">
+              <el-col :span="20">
+                <el-form-item label="许可有效期自" prop="num">
+                  <el-date-picker v-model="value1" type="date" placeholder="选择日期" style="width:375px">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="20">
+                <el-form-item label="许可有效期至" prop="num">
+                  <ai-select v-model="readType" @change="onChange" placeholder="请选择文档类型" :selectList="$dict.getDict('readType')"></ai-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="许可机关" prop="num">
+              <el-input v-model="input" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-row type="flex">
+              <el-col :span="20">
+                <el-form-item label="经营主体" prop="num">
+                  <el-input v-model="input" placeholder="请输入"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="20">
+                <el-form-item label="统一信用代码" prop="num">
+                  <el-input v-model="input" placeholder="请输入"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="许可内容" prop="num">
+              <el-input v-model="input" placeholder="请输入许可内容" type="textarea" show-word-limit maxlength="500" :rows="5"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </template>
+    </ai-detail>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Detail",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    params: Object,
+  },
+  data() {},
+}
+</script>
+
+<style lang="scss" scoped>
+.Detail {
+  height: 100%;
+  overflow: hidden;
+  background: #f2f4f6 !important;
+
+  .add-form__item {
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep .el-form-item__label {
+    padding-right: 40px;
+  }
+
+  ::v-deep .ai-detail__footer {
+    background: #fff !important;
+  }
+
+  ::v-deep .ai-detail__content--active {
+    padding: 20px;
+
+    .ai-detail__content--wrapper {
+      width: 100%;
+    }
+
+    .aibar {
+      padding: 0 16px;
+    }
+
+    .el-form {
+      padding: 0 96px 20px 50px;
+    }
+
+    .add-form {
+      background: #fff;
+    }
+  }
+
+  ::v-deep .ai-wrapper {
+    align-items: inherit !important;
+  }
+
+  .user-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    border-radius: 10px;
+  }
+
+  .footer-btn {
+    width: 130px;
+  }
+
+  .el-form {
+    padding-bottom: 80px;
+  }
+}
+</style>

project/xiushan/apps/AppAdministrativeLicense/components/List.vue

@@ -16,7 +16,7 @@
         <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size" @getList="getTableData" :col-configs="colConfigs" :dict="dict" @selection-change="   (v) => (ids = v.filter((e) => e.sysUserId).map((e) => e.sysUserId)) ">          
           <el-table-column slot="options" label="操作" fixed="right" align="center">
             <template slot-scope="{ row }">
-              <el-button type="text" @click="showDetail(row.id)">详情</el-button>
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
             </template>
             <template slot-scope="{ row }">
               <el-button type="text" @click="delete row.id">删除</el-button>
@@ -137,6 +137,14 @@ export default {
     delete(id) {
       this.$confirm("是否要删除？").then(() => this.deleteInfo(id));
     },
+    toDetail (id) {
+      this.$emit('change', {
+        type: 'Detail',
+        params: {
+          id: id || ''
+        }
+      })
+    },
     deleteInfo() {},
   },
 };