医联体管理静态页

src/components/CustomsTable/index.vue

@@ -71,7 +71,7 @@
                     :disabled="
                       op.formatter ? op.formatter(scope.row).disabled : false
                     "
-                    :style="{ fontSize: fontSize[fontIndex] }"
+                    :style="[{ fontSize: fontSize[fontIndex] }, op.style]"
                     :type="
                       op.formatter
                         ? op.formatter(scope.row).type

src/layouts/index.vue

@@ -44,6 +44,7 @@
     </div>
     <back-to-top transition-name="fade"></back-to-top>
     <el-dialog
+      custom-class="homeDialog"
       :title="''"
       :visible="modalFlag"
       :close-on-click-modal="false"
@@ -324,7 +325,7 @@ export default {
     height: calc(100vh - 90px);
   }
 }
-::v-deep .el-dialog__header {
+::v-deep .homeDialog .el-dialog__header {
   display: none;
 }
 .modalContent {

src/views/systems/medicalunion-management/index.vue

+<template>
+  <div id="medicalunion-management">
+    <div class="top-btn">
+      <el-button type="primary" class="btn" @click="addMedical">添加</el-button>
+    </div>
+    <div class="bot-table">
+      <customs-table
+        ref="table"
+        :table-data="tableData"
+        :columns="columns"
+        :header-class="'newHeader'"
+        :list-loading="listLoading"
+        :current-page="pageIndex"
+        :total-count="total"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        @pageSizeChange="handleSizeChange"
+        @currentPageChange="handleCurrentChange"
+      />
+    </div>
+    <el-dialog :visible.sync="addVisible" width="520px" :show-close="true">
+      <div class="title">添加医联体</div>
+      <el-form
+        :model="form"
+        :label-position="'right'"
+        label-width="110px"
+        label-suffix=":"
+      >
+        <el-form-item
+          v-for="(item, index) in formList"
+          :key="index"
+          :label="item.label"
+        >
+          <el-input
+            v-if="item.type == 'input'"
+            v-model="form[item.prop]"
+            autocomplete="off"
+            :placeholder="'请填写' + item.label"
+          ></el-input>
+          <el-select
+            v-if="item.type == 'select'"
+            v-model="form[item.prop]"
+            :placeholder="'请选择' + item.label"
+          >
+            <el-option
+              v-for="e in item.selectGroup"
+              :key="e.value"
+              :label="e.label"
+              :value="e.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="addVisible = false">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import CustomsTable from "@/components/CustomsTable"
+import paginationMixin from "@/components/TabComponents/mixin"
+export default {
+  components: {
+    CustomsTable,
+  },
+  mixins: [paginationMixin],
+  data() {
+    return {
+      addVisible: false,
+      listLoading: false,
+      columns: [
+        {
+          label: "医联体名称",
+          minWidth: 120,
+          value: "groupName",
+        },
+        {
+          label: "医联体编号",
+          minWidth: 120,
+          value: "name",
+        },
+        {
+          label: "省",
+          minWidth: 120,
+          value: "sex",
+        },
+
+        {
+          label: "市",
+          minWidth: 120,
+          value: "idCard",
+        },
+        {
+          label: "操作",
+          width: 220,
+          fixed: "right",
+          operType: "button",
+          operations: [
+            {
+              func: this.editMedical,
+              formatter(row) {
+                return {
+                  label: "编辑",
+                  type: "text",
+                }
+              },
+            },
+            {
+              func: this.rowOpration,
+              style: {
+                color: "#FA6400",
+              },
+              formatter(row) {
+                return {
+                  label: "删除",
+                  type: "text",
+                }
+              },
+            },
+          ],
+        },
+      ],
+      tableData: [
+        {
+          groupName: "第一个",
+        },
+      ],
+      formList: [
+        {
+          type: "input",
+          label: "医联体名称",
+          prop: "medicalName",
+        },
+        {
+          type: "input",
+          label: "医联体编号",
+          prop: "medicalId",
+        },
+        {
+          type: "select",
+          label: "省",
+          prop: "province",
+          selectGroup: [{ label: "北京市", value: "001" }],
+        },
+        {
+          type: "select",
+          label: "市",
+          prop: "city",
+          selectGroup: [{ label: "北京市", value: "001" }],
+        },
+      ],
+      form: {},
+    }
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    // 添加医联体
+    addMedical() {
+      this.addVisible = true
+    },
+    // 编辑医联体
+    editMedical(data) {
+      console.log(data)
+      this.form = {
+        medicalName: "黑乎乎",
+        medicalId: "123",
+        province: "001",
+        city: "001",
+      }
+      this.addVisible = true
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+#medicalunion-management {
+  padding: 20px;
+  .top-btn {
+    .btn {
+      width: 80px;
+      height: 32px;
+      background: #4e68ff;
+      border-radius: 4px;
+    }
+  }
+  .bot-table {
+    margin-top: 20px;
+  }
+  .title {
+    text-align: center;
+    height: 26px;
+    font-size: 22px;
+    font-family: AlibabaPuHuiTiM;
+    color: rgba(0, 0, 0, 0.8);
+    line-height: 26px;
+    margin-bottom: 30px;
+  }
+}
+::v-deep .el-dialog__body {
+  padding: 0 40px;
+  border-top: none;
+}
+::v-deep .el-dialog__footer {
+  border-top: none;
+  text-align: center;
+  .el-button {
+    width: 100px;
+    height: 32px;
+    background: #4e68ff;
+  }
+}
+</style>