elizebeth/src/xt_pages/user/vascularAccess.vue

<template>
  <div class="patient-container">
    <patient-sidebar :id="patientID" defaultActive="1-6" v-on:tran-patient="onTranPatient"></patient-sidebar>
    <div class="patient-app-container advice-container app-container">
      <div style="display:flex;justify-content: space-between;align-items: center;margin-bottom: 12px;">
         <span style="font-weight:bold;">血管通路列表</span>
         <el-button size="medium" type="primary" @click="dialogVisible =true">新增</el-button>
      </div>
      <el-table class="oictable" :data="tableData" border style="width:100%">
      <el-table-column prop="start_time" label="建立日期" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ getTime(scope.row.start_time, "{y}-{m}-{d}")}}</span>
          </template>
     </el-table-column>
      <el-table-column prop="blood_access_part_opera_id" label="血管通路" align="center" width="120">
        <template slot-scope="scope">
           <router-link
              :to="'/patients/patient/' + scope.row.patient_id+'/vascularAccessDetail/'+scope.row.id"
              style="color:#409eff;width:100%;display:block;"
            >{{ scope.row.blood_access_part_opera_id }}
            </router-link
            >
        </template>
     </el-table-column>
     <el-table-column prop="blood_access_part_id" label="血管通路部位" width="200" align="center">
        <template slot-scope="scope">
           <span>{{scope.row.blood_access_part_id}}</span>  
        </template>
     </el-table-column>
      <el-table-column prop="inflow_pass" label="流入-流出道" width="100" align="center">
         <template slot-scope="scope">
            <span>{{scope.row.inflow_pass}}</span>
         </template>
      </el-table-column>
      <el-table-column prop="date" label="首次启用日期" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ getTime(scope.row.first_start_time, "{y}-{m}-{d}")}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="date" label="默认到处方" align="center" width="100">
          <template slot-scope="scope">
             <span v-if="scope.row.user_status == 1">启用</span>
             <span v-if="scope.row.user_status == 2">停用</span>
          </template>
      </el-table-column>
       <el-table-column prop="date" label="停用日期" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.stop_time>0">{{ getTime(scope.row.stop_time, "{y}-{m}-{d}")}}</span>
             <span v-if="scope.row.stop_time<0"></span>
          </template>
      </el-table-column>
       <el-table-column prop="date" label="停用原因" align="center" width="120">
          <template slot-scope="scope">
             <span>{{scope.row.stop_reason}}</span>
          </template>
      </el-table-column>
       <el-table-column prop="date" label="使用寿命(天)" align="center" width="120">
          <template slot-scope="scope">
           <span v-if="scope.row.stop_time>0&&(scope.row.stop_time - scope.row.start_time)/86400 == 0"></span> 
           <span v-if="scope.row.stop_time>0&&(scope.row.stop_time - scope.row.start_time)/86400 != 0">{{(scope.row.stop_time - scope.row.start_time)/86400}}</span>
          </template>
      </el-table-column>
       <el-table-column prop="date" label="备注" align="center" width="180">
          <template slot-scope="scope">
             <span>{{scope.row.remark}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="date" label="创始人" align="center" width="100">
          <template slot-scope="scope">
            <span>{{getDoctor(scope.row.creator)}}</span>
          </template>
      </el-table-column>
       <el-table-column prop="date" fixed="right" label="操作" width="140" align="center">
          <template slot-scope="scope">
             <el-tooltip class="item" effect="dark" content="编辑" placement="top">
               <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-edit-outline"
                 
                  @click="handleUpdateAdviceTemplate(scope.row.id)"
                  >
               </el-button>
             </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                 <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDeleteAdviceTemplate(scope.row.id, scope.$index)"
                  >
                 </el-button>
              </el-tooltip>
           </template>
      </el-table-column>
  </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,50,100]"
        :page-size="10"
        background
        style="margin-top:20px;"
        align="right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>

     <el-dialog
         title="新增通路"
         :visible.sync="dialogVisible"
         width="60%"
         center>
      <el-form label-width="120px" :model="form" ref="form" :rules="rules" >
         <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item label="通路项目:" :required="true" prop="access_project">
                    <el-radio v-model="form.access_project" label="1">内瘘</el-radio>
                    <el-radio v-model="form.access_project" label="2">导管</el-radio>
                </el-form-item>
            </el-col>
         </el-row>
         <el-row :gutter="24">
            <el-col :span="8">
               <el-form-item label="建立日期:" :required="true" prop="start_time">
                 <el-date-picker
                    type="datetime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.start_time"
                    style="width:150px">
                 </el-date-picker>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="血管通路类型:" :required="true" prop="blood_access_part_opera_id">
                 <el-select v-model="form.blood_access_part_opera_id" placeholder="请选择"  style="width:150px">
                    <el-option
                        v-for="item in blood_access_part_opera"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        >
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="血管通路部位:" :required="true" prop="blood_access_part_id">
                  <el-input v-model="form.blood_access_part_id" readonly @focus="showInnerDialog('17')" style="width:150px"></el-input>
               </el-form-item>
            </el-col>
         </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
               <el-form-item label="流入-流出道:" :required="true" prop="inflow_pass">
                 <el-select v-model="form.inflow_pass" placeholder="请选择" style="width:150px">
                    <el-option
                        v-for="item in optionsPass"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="首次启用日期:" :required="true" prop="first_start_time">
                  <el-date-picker
                    type="datetime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.first_start_time"
                    style="width:150px">
                 </el-date-picker>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="使用状态:" :required="true" prop="user_status">
                 <el-select v-model="form.user_status" placeholder="请选择" style="width:150px" @change="changeStatus">
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row v-show="show">
            <el-col :span="8">
               <el-form-item label="停用日期:">
                  <el-date-picker
                    type="datetime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.stop_time"
                    style="width:150px">
                 </el-date-picker>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row v-show="show">
           <el-col>
            <el-form-item label="停用原因:">
               <el-input v-model="form.stop_reason"></el-input>
            </el-form-item>
           </el-col>  
         </el-row>
           <el-row>
            <el-col>
                <el-form-item label="备注:">
                 <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark"></el-input>
                </el-form-item>
            </el-col>  
         </el-row>
      </el-form>

     <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveVasularAccess('form')">保存</el-button>
     </span>
     </el-dialog>



      <el-dialog
         title="编辑通路"
         :visible.sync="editDialogVisible"
         width="60%"
         center>
      <el-form label-width="120px" :model="form" ref="form" :rules="rules" >
         <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item label="通路项目:" :required="true" prop="access_project">
                    <el-radio v-model="form.access_project" label="1">内瘘</el-radio>
                    <el-radio v-model="form.access_project" label="2">导管</el-radio>
                </el-form-item>
            </el-col>
         </el-row>
         <el-row :gutter="24">
            <el-col :span="8">
               <el-form-item label="建立日期:" :required="true" prop="start_time">
                 <el-date-picker
                    type="datetime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.start_time"
                    style="width:150px">
                 </el-date-picker>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="血管通路类型:" :required="true" prop="blood_access_part_opera_id">
                 <el-select v-model="form.blood_access_part_opera_id" placeholder="请选择"  style="width:150px">
                    <el-option
                        v-for="item in blood_access_part_opera"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        >
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="血管通路部位:" :required="true" prop="blood_access_part_id">
                 <!-- <el-select v-model="form.blood_access_part_id" placeholder="请选择" style="width:150px">
                    <el-option
                        v-for="item in blood_access_part"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select> -->

                   <el-input v-model="form.blood_access_part_id" readonly @focus="showInnerDialog('17')" style="width:150px"></el-input>
               </el-form-item>
            </el-col>
         </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
               <el-form-item label="流入-流出道:" :required="true" prop="inflow_pass">
                 <el-select v-model="form.inflow_pass" placeholder="请选择" style="width:150px">
                    <el-option
                        v-for="item in optionsPass"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="首次启用日期:" :required="true" prop="first_start_time">
                  <el-date-picker
                    type="datetime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.first_start_time"
                    style="width:150px">
                 </el-date-picker>
               </el-form-item>
            </el-col>
             <el-col :span="8">
               <el-form-item label="使用状态:" :required="true" prop="user_status">
                 <el-select v-model="form.user_status" placeholder="请选择" style="width:150px" @change="changeStatus">
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row v-show="show">
            <el-col :span="8">
               <el-form-item label="停用日期:">
                  <el-date-picker
                    type="datetime"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="选择时间"
                    v-model="form.stop_time"
                    style="width:150px">
                 </el-date-picker>
               </el-form-item>
            </el-col>
         </el-row>
         <el-row v-show="show">
           <el-col>
            <el-form-item label="停用原因:">
               <el-input v-model="form.stop_reason"></el-input>
            </el-form-item>
           </el-col>  
         </el-row>
           <el-row>
            <el-col>
                <el-form-item label="备注:">
                 <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark"></el-input>
                </el-form-item>
            </el-col>  
         </el-row>
      </el-form>

     <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible= false">取 消</el-button>
        <el-button type="primary" @click="updatedVasularAccess('form')">保存</el-button>
     </span>
     </el-dialog>

    </div>

     <multi-select-box
        :propsForm="InnerDialogProps"
        v-on:dialog-comfirm="innerDialogComfirm"
        v-on:dialog-cancle="innerDialogCancle"
      ></multi-select-box>
  </div>
</template>
<script>
  const moment = require('moment')
  import PatientSidebar from './components/PatientSidebar'
  import { fetchAllAdminUsers, fetchAllDoctorAndNurse } from '@/api/doctor'
  import { saveVasularAccess,getAllVascularAccessList,getVascularAccessByDetail,updatedVasularAccess,DeleteVascularAccess } from '@/api/patient'

  import { jsGetAge, uParseTime } from '@/utils/tools'
  import { getDataConfig } from '@/utils/data'
  import multiSelectBox from '../dialysis/details/dialog/MultiSelectBox'
    
  export default {
    name: 'doctorAdvice',
    components: {
      PatientSidebar,
      multiSelectBox
    },
    data() {
      return {
        tableData: [],
        nowtime: moment(new Date()).format('YYYY-MM-DD'),
        page: 1,
        limit: 10,
        total: 0,
        rules: {
          start_time: [{ required: true, message: '请输入建立日期' }],
          access_project: [{ required: true, message: '请选择通路项目' }],
          blood_access_part_opera_id:[{required:true,message:'请选择血管通路类型'}],
          blood_access_part_id:[{required:true,message:"请选择血管通路"}],
          inflow_pass:[{required:true,message:"请选择流入-流出道"}],
          first_start_time:[{required:true,message:"请选择首次启用日期"}],
          user_status:[{required:true,message:"请选择使用状态"}]
        },
        dialogVisible:false,
        editDialogVisible:false,
        form:{
         id:0,
         access_project:"1",
         blood_access_part_id:"",
         blood_access_part_opera_id:"",
         inflow_pass:"",
         start_time:moment(new Date()).format('YYYY-MM-DD'),
         first_start_time:moment(new Date()).format('YYYY-MM-DD'),
         stop_reason:"",
         user_status:1,
         remark:"",
         stop_time:"",
        },
        options:[
         {id:1,name:"启用"},
         {id:2,name:"停用"}
        ],
        optionsPass:[
          {id:1,name:"流入-动脉"},
          {id:2,name:"流出-静脉"},
        ],
        blood_access_part_opera:[],
        blood_access_part:[],
        show:false,
        doctorList:[],
        InnerDialogProps: {
          values: [],
          visibility: false,
          isShowTextArea: true,
          customContent: '',
          titles: '',
          type: '' // 不同弹框类型，用来匹配数据
        },
      }
    },
    methods: {
      clickuseradvicecell(row, column, cell, event) {
      },
      onTranPatient: function(tranPatient) {
        this.currentPatient = tranPatient
      },
      CreateTime(time) {
        return uParseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
      },
   
     
    
     
      handleSizeChange(limit) {
        this.limit = limit
        this.getlist()
      },
      handleCurrentChange(page) {
        this.page = page
      
        this.getlist()
      },
      changeStatus(val){
        if(val == 1 ){
          this.show = false
        }
        if(val == 2){
          this.show = true
        }
      },
      saveVasularAccess(formName){
         this.$refs[formName].validate((valid)=>{
           if(valid){
              var blood_name = ""
              for(let i=0;i<this.blood_access_part_opera.length;i++){
                 if(this.blood_access_part_opera[i].id == this.form.blood_access_part_opera_id){
                     blood_name = this.blood_access_part_opera[i].name
                 }
              }
              var inflow_pass = ""
              for(let i=0;i<this.optionsPass.length;i++){
                 if(this.optionsPass[i].id == this.form.inflow_pass){
                     inflow_pass = this.optionsPass[i].name
                 }
              }
              console.log("params",this.form.blood_access_part_id)
              
              var params = {
                patient_id:this.patientID,
                access_project:parseInt(this.form.access_project),
                start_time:this.form.start_time,
                blood_access_part_opera_id:blood_name,
                blood_access_part_id:this.form.blood_access_part_id,
                inflow_pass:inflow_pass,
                first_start_time:this.form.first_start_time,
                user_status:this.form.user_status,
                stop_reason:this.form.stop_reason,
                remark:this.form.remark,
                stop_time:this.form.stop_time
              }
              console.log("params",params)
             saveVasularAccess(params).then(response=>{
                if(response.data.state == 1){
                   var access =  response.data.data.access
                   console.log("access",access)
                   this.$message.success("保存成功")
                   this.dialogVisible = false
                   this.getlist()
                   this.form.blood_access_part_opera_id=""
                   this.form.blood_access_part_id = ""
                   this.inflow_pass = ""
                   this.user_status = ""
                   this.stop_reason = ""
                   this.remark = ""
                }
             })
           }  
         })
      },
      getlist(){
         var params = {
               page:this.page,
               limit:this.limit,
               patient_id:this.patientID,
           }
        getAllVascularAccessList(params).then(response=>{
           if(response.data.state == 1){
             var list =  response.data.data.list
             console.log("list",list)
             this.tableData = list
             var total = response.data.data.total
             console.log("total",total)
             this.total = total
             var doctor = response.data.data.doctor
             console.log("doctor",doctor)
             this.doctorList = doctor
           }  
        })   
      },
     getTime(value, temp) {
        if (value != undefined) {
            return uParseTime(value, temp);
        }
        return "";
     },
     handleUpdateAdviceTemplate(id){
        getVascularAccessByDetail(id).then(response=>{
           if(response.data.state ==1){
             var accessDetail =  response.data.data.accessDetail
             console.log("accessDetail",accessDetail)
             this.form.id = accessDetail.id
             this.form.access_project = accessDetail.access_project.toString()
             
            

             this.form.blood_access_part_id = accessDetail.blood_access_part_id
             
              var blood_part = 0
              for(let i=0;i<this.blood_access_part_opera.length;i++){
                 if(accessDetail.blood_access_part_opera_id == this.blood_access_part_opera[i].name){
                    blood_part = this.blood_access_part_opera[i].id
                 }
              }
             this.form.blood_access_part_opera_id = blood_part
             this.form.first_start_time = this.getTime(accessDetail.first_start_time,"{y}-{m}-{d}")

             var inflow_id = 0
             for(let i=0;i<this.optionsPass.length;i++){
               if(this.optionsPass[i].name == accessDetail.inflow_pass){
                  inflow_id = this.optionsPass[i].id
               }
             }
             this.form.inflow_pass = inflow_id
             this.form.remark = accessDetail.remark
             this.form.start_time = this.getTime(accessDetail.start_time,"{y}-{m}-{d}")
             this.form.stop_reason = accessDetail.stop_reason
             this.form.stop_time = this.getTime(accessDetail.stop_time,"{y}-{m}-{d}")

             this.form.user_status = accessDetail.user_status
             if(accessDetail.user_status == 1){
               this.show = false
             }
             if(accessDetail.user_status == 2){
               this.show = true
             }
             this.editDialogVisible = true
           }
        }) 
     },
     getDoctor(id){
       var name = ""
       for(let i=0;i<this.doctorList.length;i++){
          if(id == this.doctorList[i].admin_user_id){
             name = this.doctorList[i].user_name
          }
       }
       return name
     },
     handleDeleteAdviceTemplate(id,index){
       this.$confirm("确认删除吗?", "删除", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning"
      })
        .then(() => {
          DeleteVascularAccess(id).then(response => {
            if(response.data.state == 1){
              var msg = response.data.data.msg
              this.tableData.splice(index, 1);
              this.$message.success("删除成功!")
            }
             
            
          });
        })
        .catch(() => {});
     },
     updatedVasularAccess(formName){
        this.$refs[formName].validate((valid)=>{
           if(valid){
              var blood_name = ""
              for(let i=0;i<this.blood_access_part_opera.length;i++){
                 if(this.blood_access_part_opera[i].id == this.form.blood_access_part_opera_id){
                     blood_name = this.blood_access_part_opera[i].name
                 }
              }
            //   var blood_part = ""
            //   for(let i=0;i<this.blood_access_part.length;i++){
            //      if(this.form.blood_access_part_id == this.blood_access_part[i].id){
            //         blood_part = this.blood_access_part[i].name
            //      }
            //   }
              var inflow_pass = ""
              for(let i=0;i<this.optionsPass.length;i++){
                 if(this.optionsPass[i].id == this.form.inflow_pass){
                     inflow_pass = this.optionsPass[i].name
                 }
              }
              var params = {
                id:this.form.id,
                patient_id:this.patientID,
                access_project:parseInt(this.form.access_project),
                start_time:this.form.start_time,
                blood_access_part_opera_id:blood_name,
                blood_access_part_id:this.form.blood_access_part_id,
                inflow_pass:inflow_pass,
                first_start_time:this.form.first_start_time,
                user_status:this.form.user_status,
                stop_reason:this.form.stop_reason,
                remark:this.form.remark,
                stop_time:this.form.stop_time
              }
              console.log("编辑",params)
              updatedVasularAccess(params).then(response=>{
                if(response.data.state == 1){
                  var access =  response.data.data.access
                  console.log("access",access)
                  this.$message.success("保存成功")
                  this.editDialogVisible = false
                  this.getlist()
                }
              })
           }
        })
     },
     rowClick(row){
       console.log("row",row)
       this.$router.push({path:'/patients/patient/'+this.patientID+'/vascularAccessDetail/'+row.id})
     },
       showInnerDialog: function(val) {
        this.InnerDialogProps.visibility = true
        switch (val) {
        
          case '17': // 血管通路
            this.InnerDialogProps.values = this.blood_access_part
            this.InnerDialogProps.titles = '血管通路部位'
            this.InnerDialogProps.type = 'blood_access_part_id'
            this.InnerDialogProps.selected = this.form.blood_access_part_id
            this.InnerDialogProps.isShowTextArea = false
            break

        
        }
      },
       innerDialogComfirm: function(val) {
         this.InnerDialogProps.visibility = false
         switch (val.type) {
           case 'blood_access_part_id':
           this.form.blood_access_part_id = val.value.join(',')
           break
        }
      },
      innerDialogCancle: function() {
        this.InnerDialogProps.visibility = false
      },
    },
    created() {
      const id = this.$route.params && this.$route.params.id
      console.log('id是设么', id)
      this.patientID = parseInt(id)
      
      //血管通路
      this.blood_access_part_opera = getDataConfig('hemodialysis', 'vascular_access_desc')
      console.log("血管通路",this.blood_access_part_opera)
      //血管通路部位
      this.blood_access_part = getDataConfig('hemodialysis', 'vascular_access')
      console.log("血管通路部位",this.blood_access_part)
      this.getlist()
    }
  }
</script>

<style>
  .oictable ::-webkit-scrollbar {
    height: 15px;
  }
</style>

<style rel="stylesheet/scss" lang="scss">
   ::-webkit-scrollbar{
      height:15px;
   }

</style>