布展管理单元及博物馆管理页面布局

src/views/museum/index.vue

 <template>
-  <div>
-    博物馆管理
+  <div class="app-container">
+    <div class="top-bar">
+      <SearchBar :config="searchConfig" @search="search" @reset="reset" />
+      <el-button
+        type="primary"
+        @click.native="handleOperation({ type: 'add' })"
+      >
+        <i class="el-icon-s-promotion"></i>
+        发布</el-button
+      >
+    </div>
+
+    <el-table
+      :tree-props="{ children: 'children' }"
+      fit
+      row-key="id"
+      :data="orgTreeData"
+      border
+      stripe
+    >
+      <el-table-column
+        align="center"
+        prop="label"
+        label="名称"
+      ></el-table-column>
+      <el-table-column
+        align="center"
+        prop="pidName"
+        label="所属部门"
+      ></el-table-column>
+      <el-table-column align="center" prop="status" label="状态">
+      </el-table-column>
+      <el-table-column align="center" prop="longitude" label="经度">
+      </el-table-column>
+      <el-table-column align="center" prop="latitude" label="纬度">
+      </el-table-column>
+      <el-table-column align="center" prop="intro" label="简介" />
+      <el-table-column align="center" label="操作"> </el-table-column>
+    </el-table>
+    <InfoEditDialog
+      :visible="drawerVisible"
+      :form="form"
+      :orgTreeData="orgTreeData"
+      @handleClose="handleClose"
+      @refresh="loadData"
+    />
   </div>
 </template>
 
 <script>
+import TablePage from "@/components/Table/TablePage.vue";
+import TableOperation from "@/components/Table/TableOperation.vue";
+import { title, operates, operations } from "./config";
+import {
+  getMuseumList,
+  // getRCDetailById,
+  // deleteCultralRelic,
+  // editCulturalRelic,
+} from "@/api/museum";
+import InfoEditDialog from "./components/InfoEditDialog";
+import SearchBar from "@/components/SearchBar";
+
 export default {
+  components: {
+    TablePage,
+    TableOperation,
+    InfoEditDialog,
+    SearchBar,
+  },
+  data() {
+    return {
+      list: [],
+      searchForm: {
+        name: "",
+        status: "",
+      },
+      searchConfig: [
+        {
+          prop: "name",
+          type: "input",
+          label: "博物馆名称",
+        },
+        {
+          prop: "status",
+          type: "select",
+          label: "状态",
+          selectOptions: [
+            {
+              label: "已上架",
+              value: "1",
+            },
+            {
+              label: "已下架",
+              value: "0",
+            },
+          ],
+        },
+      ],
+      drawerVisible: false,
+      isAdd: true,
+      form: {
+        name: "", //名称
+        intro: "",
+        latitude: "", //纬度
+        longitude: "", //经度
+        faceImage: "",
+        pid: "", //所属部门id
+        regionCode: "", //所属地code
+      },
+      loading: false,
+      orgTreeData: [],
+    };
+  },
+  watch: {
+    dict(value) {
+      if (value) {
+        this.dict = value;
+      }
+    },
+  },
+  computed: {
+    tableTitle() {
+      return title;
+    },
+    tableOperates() {
+      return operates;
+    },
+    tableOperations() {
+      return operations;
+    },
+    getStatusTitle(status) {
+      return (status) => {
+        if (Number(status)) {
+          return "是否确定要下架？";
+        } else {
+          return "是否确定要上架？";
+        }
+      };
+    },
+  },
+  mounted() {
+    this.loadData();
+  },
+  methods: {
+    async search(form) {
+      var params = {
+        page: this.list.current,
+        limit: this.list.size,
+        ...form,
+      };
+      if (params.status == "") {
+        delete params.status;
+      }
+      console.log("params", params);
+      let res = await getMuseumList(params);
+      if (res.code == 0) {
+        this.list = res.data;
+      }
+    },
 
-}
-</script>
+    reset() {
+      this.loadData();
+    },
+
+    //   加载表格数据
+    loadData() {
+      this.$store.dispatch("org/getMuseumTreeData", "").then((res) => {
+        this.orgTreeData = res;
+      });
+    },
+
+    async handleOperation(value, row) {
+      console.log("handleOperation", value, row);
+      switch (value.type) {
+        case "add":
+          this.drawerVisible = true;
+          break;
+        case "view":
+          break;
+        case "edit":
+          let detailRes = await getRCDetailById({ crId: row.crId });
+          if (detailRes.code == 0) {
+            this.form = detailRes.data;
+            this.drawerVisible = true;
+          }
+          break;
+        case "delete":
+          let deleteRes = await deleteCultralRelic([row.crId]);
+          if (deleteRes.code == 0) {
+            this.$message.success("删除成功！");
+            this.loadData();
+          }
+          break;
+      }
+    },
+    async handleChangeStatus(row) {
+      console.log("status", row);
+      const { status } = row;
+      let newStatus = status === "0" ? "1" : "0";
+      const params = {
+        ...row,
+        status: newStatus,
+      };
+      let res = await editCulturalRelic(params);
+      if (res.code == 0) {
+        this.loadData();
+        this.$message.success("修改成功！");
+      }
+    },
+    // 多选
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
 
-<style>
+    // 改变页容量
+    handleSizeChange(value) {
+      this.list.size = value;
+      this.loadData();
+    },
 
+    // 改变当前显示页
+    handleCurrentChange(value) {
+      this.list.current = value;
+      this.loadData();
+    },
+
+    // 搜索
+    onSubmitSearch() {
+      console.log("submit!");
+    },
+
+    // 打开drawer
+    handleOpenDialog(type, value) {
+      this.drawerVisible = true;
+      switch (type) {
+        case "add":
+          console.log("新增");
+          break;
+        case "edit":
+          console.log("编辑", value);
+          break;
+      }
+    },
+    // 关闭Dialog
+    handleClose() {
+      this.drawerVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.pagination {
+  margin: 16px;
+}
 </style>
\ No newline at end of file