issue页面格式化

src/pages/main/performance/issue.vue

@@ -1,31 +1,36 @@
 <template>
-  <div>
-    <div class="simple-container">
-      <simple-form :form="table_form" @search="handleSearch"></simple-form>
-      <simple-table
-        :list="table_list"
-        :config="table_config"
-        :loading="table_loading"
-        :handle-row="table_handle_row"
-        @principalName="(params) => handleVisible('principalName', params)"
-        @detail="(params) => handleVisible('detail', params)"
-        @withdraw="handleWithdraw"
-        @edit="(params) => handleVisible('edit', params)"
-      ></simple-table>
-      <simple-pagination
-        :page="page"
-        :total="total"
-        @change="handleChange"
-      ></simple-pagination>
-    </div>
-    <simple-dialog
-      title="查看"
-      fullscreen
-      @cancel="handleVisible('template')"
-      @confirm="handleVisible('template')"
-      :visible="template_visible"
-      >
-      <!-- <div class="flex-justify-align-end padding-right-20 padding-left-20">
+    <div>
+        <div class="simple-container">
+            <simple-form
+                :form="table_form"
+                @search="handleSearch"
+            ></simple-form>
+            <simple-table
+                :list="table_list"
+                :config="table_config"
+                :loading="table_loading"
+                :handle-row="table_handle_row"
+                @principalName="
+                    (params) => handleVisible('principalName', params)
+                "
+                @detail="(params) => handleVisible('detail', params)"
+                @withdraw="handleWithdraw"
+                @edit="(params) => handleVisible('edit', params)"
+            ></simple-table>
+            <simple-pagination
+                :page="page"
+                :total="total"
+                @change="handleChange"
+            ></simple-pagination>
+        </div>
+        <simple-dialog
+            title="查看"
+            fullscreen
+            @cancel="handleVisible('template')"
+            @confirm="handleVisible('template')"
+            :visible="template_visible"
+        >
+            <!-- <div class="flex-justify-align-end padding-right-20 padding-left-20">
         <div>
           <el-button type="primary">导出</el-button>
           <el-button @click="handleVisible('template')" type="primary"
@@ -33,25 +38,34 @@
           >
         </div>
       </div> -->
-      <simpleSheet v-if="isCheck" :id="edit_rows.id" />
-      <simpleSheet v-else :id="edit_rows.id" type="edit" />
-      <template v-slot:footer><div></div></template>
-    </simple-dialog>
-    <simple-dialog
-      title="回复详情"
-      width="700px"
-      @cancel="handleVisible('principalName')"
-      @confirm="handleVisible('principalName')"
-      :visible="receiver_visible"
-    >
-      <simple-table
-        :list="receiver_table_list"
-        :config="receiver_table_config"
-        :loading="receiver_table_loading"
-        @receiver="handleVisible('principalName')"
-      ></simple-table>
-    </simple-dialog>
-  </div>
+            <simpleSheet
+                v-if="template_visible && isCheck"
+                :id="edit_rows.id"
+                attribute="order"
+            />
+            <simpleSheet
+                v-if="template_visible && !isCheck"
+                :id="edit_rows.id"
+                attribute="order"
+                type="edit"
+            />
+            <template v-slot:footer><div></div></template>
+        </simple-dialog>
+        <simple-dialog
+            title="回复详情"
+            width="700px"
+            @cancel="handleVisible('principalName')"
+            @confirm="handleVisible('principalName')"
+            :visible="receiver_visible"
+        >
+            <simple-table
+                :list="receiver_table_list"
+                :config="receiver_table_config"
+                :loading="receiver_table_loading"
+                @receiver="handleVisible('principalName')"
+            ></simple-table>
+        </simple-dialog>
+    </div>
 </template>
 
 <script>
@@ -62,214 +76,214 @@ import simpleDialog from "./components/dialog.vue";
 import simplePagination from "./components/pagination.vue";
 import simpleSheet from "./components/sheet.vue";
 export default {
-  components: {
-    // analysis,
-    simpleTable,
-    simpleDialog,
-    simpleForm,
-    simplePagination,
-    simpleSheet,
-  },
-  data() {
-    return {
-      page: 1,
-      rows: 10,
-      total: 0,
-      edit_rows: {},
-      isCheck: false,
-      template_visible: false,
-      receiver_visible: false,
-      table_loading: false,
-      receiver_table_loading: false,
-      table_search: {},
-      table_form: [
-        {
-          label: "模板名称",
-          props: "templateName",
-          type: "input",
-        },
-        {
-          label: "截止日期",
-          props: "endTime",
-          type: "date",
-        },
-      ],
-      table_list: [],
-      table_handle_row: [
-        {
-          label: "查看",
-          props: "detail",
-        },
-        {
-          label: "修改",
-          props: "edit",
-        },
-        {
-          label: "撤回",
-          props: "withdraw",
-          popconfirm: true,
-        },
-      ],
-      table_config: [
-        {
-          label: "模板名称",
-          props: "templateName",
-        },
-        {
-          label: "填报事由",
-          props: "reason",
-        },
-        {
-          label: "填报注意事项",
-          props: "precautions",
-        },
-        {
-          label: "截止时间",
-          props: "endTime",
-          type: "date",
-        },
-        {
-          label: "接收人",
-          props: "principalName",
-          type: "click",
-        },
-      ],
-      receiver_table_list: [
-        {
-          receiver: "接收人",
-          department: "科室",
-          date: "回复时间",
-          value: "2021.11.4 XXX 同意\n2021.11.4 XXX 同意",
+    components: {
+        // analysis,
+        simpleTable,
+        simpleDialog,
+        simpleForm,
+        simplePagination,
+        simpleSheet,
+    },
+    data() {
+        return {
+            page: 1,
+            rows: 10,
+            total: 0,
+            edit_rows: {},
+            isCheck: false,
+            template_visible: false,
+            receiver_visible: false,
+            table_loading: false,
+            receiver_table_loading: false,
+            table_search: {},
+            table_form: [
+                {
+                    label: "模板名称",
+                    props: "templateName",
+                    type: "input",
+                },
+                {
+                    label: "截止日期",
+                    props: "endTime",
+                    type: "date",
+                },
+            ],
+            table_list: [],
+            table_handle_row: [
+                {
+                    label: "查看",
+                    props: "detail",
+                },
+                {
+                    label: "修改",
+                    props: "edit",
+                },
+                {
+                    label: "撤回",
+                    props: "withdraw",
+                    popconfirm: true,
+                },
+            ],
+            table_config: [
+                {
+                    label: "模板名称",
+                    props: "templateName",
+                },
+                {
+                    label: "填报事由",
+                    props: "reason",
+                },
+                {
+                    label: "填报注意事项",
+                    props: "precautions",
+                },
+                {
+                    label: "截止时间",
+                    props: "endTime",
+                    type: "date",
+                },
+                {
+                    label: "接收人",
+                    props: "principalName",
+                    type: "click",
+                },
+            ],
+            receiver_table_list: [
+                {
+                    receiver: "接收人",
+                    department: "科室",
+                    date: "回复时间",
+                    value: "2021.11.4 XXX 同意\n2021.11.4 XXX 同意",
+                },
+            ],
+            receiver_table_config: [
+                {
+                    label: "接收人",
+                    props: "receiver",
+                },
+                {
+                    label: "科室",
+                    props: "department",
+                },
+                {
+                    label: "回复时间",
+                    props: "date",
+                },
+                {
+                    label: "审批记录",
+                    props: "value",
+                    type: "textarea",
+                },
+            ],
+        };
+    },
+    methods: {
+        async handleInit(data) {
+            this.$http({
+                url: "/market/CMKIssued/CMKIssuedList",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: data,
+            }).then(({ data: { data, count } }) => {
+                this.total = count;
+                this.table_list = data;
+            });
+            // this.table_loading = true;
+            // const data = [];
+            // let index = 0;
+            // while (index < 1) {
+            //     data.push(
+            //         ...JSON.parse(sessionStorage.getItem("global_data")).filter(
+            //             (element) => element.issue_status
+            //         )
+            //     );
+            //     index = index + 1;
+            // }
+            // this.total = index;
+            // this.table_list = data;
+            // this.table_loading = false;
         },
-      ],
-      receiver_table_config: [
-        {
-          label: "接收人",
-          props: "receiver",
+        handleSearch(data) {
+            this.table_search = data;
+            this.handleReset();
+            this.handleInit({ ...data, page: this.page, pageSize: this.rows });
         },
-        {
-          label: "科室",
-          props: "department",
+        handleChange(page) {
+            this.page = page;
+            this.handleInit({
+                ...this.table_search,
+                page: this.page,
+                pageSize: this.rows,
+            });
         },
-        {
-          label: "回复时间",
-          props: "date",
+        handleVisible(props, params) {
+            switch (props) {
+                case "detail":
+                    if (params) {
+                        this.isCheck = true;
+                        this.edit_rows = params;
+                        this.template_visible = true;
+                    } else {
+                        this.isCheck = false;
+                        this.template_visible = false;
+                    }
+                    // this.template_visible = !this.template_visible;
+                    break;
+                case "edit":
+                    if (params) {
+                        this.isCheck = false;
+                        this.edit_rows = params;
+                        this.template_visible = true;
+                    } else {
+                        this.template_visible = false;
+                    }
+                    // this.template_visible = !this.template_visible;
+                    break;
+                case "template":
+                    this.template_visible = false;
+                    // this.template_visible = !this.template_visible;
+                    break;
+                case "principalName":
+                    if (params) {
+                        console.log(params);
+                    }
+                    this.receiver_visible = !this.receiver_visible;
+                    break;
+            }
         },
-        {
-          label: "审批记录",
-          props: "value",
-          type: "textarea",
+        handleReset() {
+            this.page = 1;
         },
-      ],
-    };
-  },
-  methods: {
-    async handleInit(data) {
-      this.$http({
-        url: "/market/CMKIssued/CMKIssuedList",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json",
+        handleWithdraw({ id }) {
+            this.$http({
+                url: "/market/CMKIssued/CMKDelIssuedById",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: { id },
+            }).then(({ data }) => {
+                console.log(data);
+                if (data.desc === "删除成功") {
+                    this.$message.success("撤回成功");
+                    this.handleInit({
+                        ...this.table_search,
+                        page: this.page,
+                        pageSize: this.rows,
+                    });
+                }
+            });
         },
-        data: data,
-      }).then(({ data:{data,count}}) => {
-        this.total = count
-        this.table_list = data;
-      });
-      // this.table_loading = true;
-      // const data = [];
-      // let index = 0;
-      // while (index < 1) {
-      //     data.push(
-      //         ...JSON.parse(sessionStorage.getItem("global_data")).filter(
-      //             (element) => element.issue_status
-      //         )
-      //     );
-      //     index = index + 1;
-      // }
-      // this.total = index;
-      // this.table_list = data;
-      // this.table_loading = false;
     },
-    handleSearch(data) {
-      this.table_search = data;
-      this.handleReset();
-      this.handleInit({ ...data, page: this.page, pageSize: this.rows });
-    },
-    handleChange(page) {
-      this.page = page;
-      this.handleInit({
-        ...this.table_search,
-        page: this.page,
-        pageSize: this.rows,
-      });
-    },
-    handleVisible(props, params) {
-      switch (props) {
-        case "detail":
-          if (params) {
-            this.isCheck = true;
-            this.edit_rows = params;
-            this.template_visible = true;
-          } else {
-            this.isCheck = false;
-            this.template_visible = false;
-          }
-          // this.template_visible = !this.template_visible;
-          break;
-        case "edit":
-          if (params) {
-            this.isCheck = false;
-            this.edit_rows = params;
-            this.template_visible = true;
-          } else {
-            this.template_visible = false;
-          }
-          // this.template_visible = !this.template_visible;
-          break;
-        case "template":
-            this.template_visible = false;
-          // this.template_visible = !this.template_visible;
-          break;
-        case "principalName":
-          if (params) {
-            console.log(params);
-          }
-          this.receiver_visible = !this.receiver_visible;
-          break;
-      }
-    },
-    handleReset() {
-      this.page = 1;
-    },
-    handleWithdraw({ id }) {
-      this.$http({
-        url: "/market/CMKIssued/CMKDelIssuedById",
-        method: "post",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        data: { id },
-      }).then(({ data }) => {
-        console.log(data);
-        if (data.desc === "删除成功") {
-          this.$message.success("撤回成功");
-          this.handleInit({
+    mounted() {
+        this.handleInit({
             ...this.table_search,
             page: this.page,
             pageSize: this.rows,
-          });
-        }
-      });
+        });
     },
-  },
-  mounted() {
-    this.handleInit({
-      ...this.table_search,
-      page: this.page,
-      pageSize: this.rows,
-    });
-  },
 };
 </script>