elizebeth/src/xt_pages/data/components/diagnoseOther.vue

<template>
  <div class="main-contain">
    <div class=" sign-and-weigh-box" style="background: white">


      <diagnose-other-dialog
        ref="dialog"
        :titles="Dialog.titles"
        :formValue="Dialog.formValue"
        :visibility="Dialog.isVisibility"
        :type="Dialog.type"
        :isCreated="Dialog.isCreated"
        v-on:dialog-comfirm="dialogComfirm"
        v-on:dialog-cancle="dialogCancle"
      ></diagnose-other-dialog>


      <el-row :gutter="15">
        <el-col>
          <div>
            <el-button
              size="small"
              icon="el-icon-circle-plus-outline"
              style="float: right;margin-bottom: 15px"
              type="primary"
              @click="showDialog"
            >新增
            </el-button>
          </div>

          <el-table
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
            :data="manufacturerData"
            style="width: 100%"
            border
            v-loading="loading"
          >
            <el-table-column label="国家编码" align="center">
              <template slot-scope="scope">
                {{ scope.row.country_code }}
              </template>
            </el-table-column>

            <el-table-column label="目录代码" align="center">
              <template slot-scope="scope">
                {{ scope.row.content_code }}
              </template>
            </el-table-column>


            <el-table-column label="诊断名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.class_name }}
              </template>
            </el-table-column>

            <el-table-column label="国家目录名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.country_content_name }}
              </template>
            </el-table-column>

            <el-table-column label="排序" align="center">
              <template slot-scope="scope">
                {{ scope.row.sort }}
              </template>
            </el-table-column>

            <el-table-column label="备注" align="center">
              <template slot-scope="scope">
                {{ scope.row.remark }}
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.$index, scope.row)"
                  >
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button
                    size="small"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.$index, scope.row)"
                  >
                  </el-button>
                </el-tooltip>

              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            background
            align="right"
            style="margin-top:20px;"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    createDiagnose,
    modifyDiagnose,
    getDiagnoseList,
    deleteDiagnose,
    GetDiagnose
  } from '@/api/data'
  import DiagnoseOtherDialog from "./diagnoseOtherDialog";

  export default {
    components: {
      DiagnoseOtherDialog,
    },
    name: 'diagnoseOther',
    data() {
      return {
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        manufacturerData: [],
        total: 0,
        pageTotal: 0,
        pageSelect: 0,

        page: 1,
        limit: 10,
        loading: false,

        manufacturer_code: '',
        editId: '',
        editIndex: '',
        Dialog: {
          titles: '新增',
          isVisibility: false,
          isCreated: 1, //1.创建 2.编辑 3.查看详情
          formValue: {
            class_name: '',
            content_code: '',
            country_code: '',
            country_content_name: '',
            remark: '',
            pinyin: '',
            wubi: '',
            sort:0,

          },
          resetForm: {
            class_name: '',
            content_code: '',
            country_code: '',
            country_content_name: '',
            remark: '',
            pinyin: '',
            wubi: ''
          }
        }
      }
    },
    methods: {
      handleEdit: function(index, row) {
        this.editId = row.id
        this.editIndex = index
        let params = {
          id: row.id
        }
        GetDiagnose(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.Dialog.formValue.class_name =
              response.data.data.sick.class_name
            this.Dialog.formValue.content_code =
              response.data.data.sick.content_code
            this.Dialog.formValue.country_code =
              response.data.data.sick.country_code
            this.Dialog.formValue.country_content_name =
              response.data.data.sick.country_content_name
            this.Dialog.formValue.remark =
              response.data.data.sick.remark
            this.Dialog.formValue.pinyin =
              response.data.data.sick.pinyin
            this.Dialog.formValue.wubi =
              response.data.data.sick.wubi
            this.Dialog.formValue.sort = response.data.data.sick.sort
            this.Dialog.isCreated = 2
            this.$refs.dialog.show()

          }
        })
      },
      handleDelete: function(index, row) {
        this.$confirm('确认删除这条记录?', '删除记录', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let params = {
              id: row.id
            }
            deleteDiagnose(params).then(response => {
              if (response.data.state == 0) {
                this.$message.error(response.data.msg)
                return false
              } else {
                this.manufacturerData.splice(index, 1)
                this.$message.success('厂家已经删除')
              }
            })
          })
          .catch(() => {
          })
      },
      showDetails: function(index, row) {
        let params = {
          id: row.id
        }
        GetDiagnose(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.Dialog.formValue.class_name =
              response.data.data.sick.class_name
            this.Dialog.formValue.content_code =
              response.data.data.sick.content_code
            this.Dialog.formValue.country_code =
              response.data.data.sick.country_code
            this.Dialog.formValue.country_content_name =
              response.data.data.sick.country_content_name
            this.Dialog.formValue.remark =
              response.data.data.sick.remark
            this.Dialog.formValue.pinyin =
              response.data.data.sick.pinyin
            this.Dialog.formValue.wubi =
              response.data.data.sick.wubi
            this.Dialog.formValue.sort =
              response.data.data.sick.sort
            this.Dialog.isCreated = 3
            this.Dialog.isVisibility = true
          }
        })
      },
      dialogComfirm: function(val) {
        // this.manufacturerDialog.isVisibility = false
        this.$refs.dialog.hide()
        if (val.isCreated == 2) {
          //修改
          let params = {
            class_name: val.class_name,
            content_code: val.content_code,
            country_code: val.country_code,
            country_content_name: val.country_content_name,
            remark: val.remark,
            id: this.editId,
            pinyin: val.pinyin,
            wubi: val.wubi,
            sort:parseInt(val.sort)
          }
          modifyDiagnose(params).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg)
              return false
            } else {
              this.manufacturerData[this.editIndex].class_name =
                response.data.data.sick.class_name
              this.manufacturerData[this.editIndex].content_code =
                response.data.data.sick.content_code
              this.manufacturerData[this.editIndex].country_code =
                response.data.data.sick.country_code
              this.manufacturerData[this.editIndex].country_code =
                response.data.data.sick.country_code
              this.manufacturerData[this.editIndex].country_content_name =
                response.data.data.sick.country_content_name
              this.manufacturerData[this.editIndex].remark =
                response.data.data.sick.remark
              this.manufacturerData[this.editIndex].pinyin =
                response.data.data.sick.pinyin
              this.manufacturerData[this.editIndex].wubi =
                response.data.data.sick.wubi
              this.manufacturerData[this.editIndex].sort =
                response.data.data.sick.sort

              this.$message.success('修改成功')
            }
          })
        } else if (val.isCreated == 1) {
          //新增
          createDiagnose(val).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg)
              return false
            } else {
              this.manufacturerData.unshift(response.data.data.sick)

              this.$message.success('新增成功')
            }
          })
        }
      },
      dialogCancle: function() {
        this.$refs.dialog.hide()
      },
      showDialog: function() {
        this.Dialog.formValue = Object.assign(
          {},
          this.Dialog.resetForm
        )
        this.$refs.dialog.show()
        this.Dialog.isCreated = 1
      },
      handleSizeChange(val) {
        this.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getList()
      },
      getList() {
        let params = {
          page: this.page,
          limit: this.limit
        }
        this.loading = true
        getDiagnoseList(params).then(response => {
          if (response.data.state == 0) {
            this.loading = false
            this.$message.error(response.data.msg)
            return false
          } else {
            this.loading = false
            this.total = response.data.data.total
            this.manufacturerData = []
            for (let i = 0; i < response.data.data.sick.length; i++) {
              this.manufacturerData.push(response.data.data.sick[i])
            }
          }
        })
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style lang="scss">
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #d0d3da;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #d0d3da;
  }
</style>