DraftBox.vue

<template>
  <div class="container" style="max-height: 89vh">
    <div v-show="!isDetail">
      <div class="header">草稿箱</div>
      <div class="content">
        <el-table-self
          ref="table"
          :table-data="tableData"
          :columns="columns"
          :list-loading="listLoading"
          :current-page="pageIndex"
          :total-count="total"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        />
      </div>
    </div>
    <div v-if="isDetail">
      <div>
        <el-button icon="el-icon-back" @click="isDetail = false"
          >返 回</el-button
        >
      </div>
      <div class="form_content">
        <ConfigForms
          form-type="1"
          :patient-id="patientId"
          :disabled="disabled"
          :operation="'edit'"
        ></ConfigForms>
      </div>
    </div>
  </div>
</template>
<script>
import paginationMixin from "@/components/TabComponents/mixin"
import ConfigForms from "./components/ConfigForms.vue"
import { mapGetters } from "vuex"
import { getPatientPage, deletePatient } from "@/api/patient.js"
export default {
  // 数据概览
  name: "",
  components: {
    ConfigForms,
  },
  mixins: [paginationMixin],
  data() {
    return {
      isDetail: false, //! 控制详情显隐
      listLoading: false,
      columns: [
        {
          label: "医联体",
          minWidth: 120,
          value: "unionName",
          formatter: (row) => {
            return row.unionName ? row.unionName : "--"
          },
        },
        {
          label: "姓名",
          minWidth: 120,
          formatter: (row) => {
            return row.name ? row.name : "--"
          },
          value: "name",
        },
        {
          label: "性别",
          minWidth: 80,
          value: "sex",
          formatter: (row) => {
            return row.sex
              ? this.$handle.formatDicList(this.dictMap["d-sex"], row.sex + "")
              : "--"
          },
        },
        // {
        //   label: "身份证",
        //   minWidth: 120,
        //   value: "idCard",
        //   formatter: (row) => {
        //     return row.idCard ? row.idCard : "--"
        //   },
        // },
        {
          label: "年龄",
          minWidth: 120,
          value: "age",
          formatter: (row) => {
            return row.age ? row.age : "--"
          },
        },
        {
          label: "筛查时间",
          minWidth: 180,
          // sortable: "custom",
          value: "createTime",
          formatter: (row) => {
            return row.createTime ? row.createTime : "--"
          },
        },
        {
          label: "风险评估结果",
          minWidth: 120,
          value: "riskRank",
          formatter: (row) => {
            let riskRank = {
              low: "低危",
              medium: "中危",
              high: "高危",
            }
            return row.riskRank ? riskRank[row.riskRank] : "--"
          },
        },
        {
          label: "是否内镜",
          minWidth: 120,
          value: "isInnerCheck",
          formatter: (row) => {
            let arr = [
              { label: "否", value: "0" },
              { label: "是", value: "1" },
            ]
            let label
            if (String(row.isInnerCheck)) {
              label = arr.filter((e) => e.value == row.isInnerCheck)[0].label
            } else {
              label = "--"
            }
            return label
          },
        },
        {
          label: "筛查审核状态",
          minWidth: 120,
          value: "checkStatus",
          formatter: (row) => {
            let arr = [
              { label: "待审核", value: "1" },
              { label: "驳回修改", value: "2" },
              { label: "合格", value: "3" },
              { label: "不合格", value: "4" },
            ]
            let label
            if (row.checkStatus) {
              label = arr.filter((e) => e.value == row.checkStatus)[0].label
            } else {
              label = "--"
            }
            return label
          },
        },
        {
          label: "操作",
          width: 220,
          fixed: "right",
          operType: "button",
          operations: [
            {
              func: this.handleAdd,
              formatter(row) {
                return {
                  label: "编辑",
                  type: "text",
                }
              },
            },
            {
              func: this.deletePatient,
              formatter(row) {
                return {
                  label: "删除",
                  type: "text",
                }
              },
              style: {
                color: "#FA6400",
              },
            },
          ],
        },
      ],
      tableData: [
        {
          name: "1",
          1: 2,
        },
      ],
    }
  },
  watch: {},
  mounted() {},
  methods: {
    handleAdd({ patientId, name }, index, disabled = false) {
      sessionStorage.removeItem("index1Data")
      this.disabled = disabled
      this.patientId = patientId || null
      this.name = name
      this.isDetail = true
    },
    setSelectedIndex(i) {
      console.log(this.selectedIndex)
      this.selectedIndex = i
      sessionStorage.setItem("homeSelectedIndex", this.selectedIndex)
    },
    // 查询
    handleFormSearch(form) {
      this.searchForm = form
      this.pageIndex = 1
      this.handleSearch(form)
    },
    handleSearch() {
      this.listLoading = true
      const data = {}
      data.current = this.pageIndex
      data.size = this.pageSize
      data.isDraft = 1
      data.patientFrom = this.selectedIndex
      getPatientPage(data).then((res) => {
        this.listLoading = false
        if (res.code === 1) {
          const d = res.data
          this.tableData = d.records || []
          this.total = Number(d.total)
        }
      })
    },
    deletePatient(row) {
      this.$confirm(`是否删除【${row.name}】?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletePatient(row.patientId).then((res) => {
            if (res.code === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              })
              this.handleSearch()
            }
          })
        })
        .catch(() => {})
    },
  },
  computed: {
    ...mapGetters({
      selectedIndex: "table/selectedIndex",
    }),
  },
  created() {
    this.handleFormSearch()
  },
  watch: {
    selectedIndex(v) {
      this.handleFormSearch()
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    text-indent: 24px;
    margin-bottom: 20px;
    height: 50px;
    line-height: 32px;
    font-size: 14px;
    font-family: AlibabaPuHuiTiR;
    color: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #f3f3f3;
  }
  .content {
    padding: 0 24px;
  }
  .form_content {
    height: calc(100% - 50px);
  }
}
</style>