From efad6058c9c9ee6ba754dc9cc61c8d744cd199b8 Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期一, 06 一月 2025 10:30:31 +0800
Subject: [PATCH] 完成设备模块搬迁

---
 src/components/do/a6-device/borrow.vue |  632 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 630 insertions(+), 2 deletions(-)

diff --git a/src/components/do/a6-device/borrow.vue b/src/components/do/a6-device/borrow.vue
index cfcc90b..c2ad921 100644
--- a/src/components/do/a6-device/borrow.vue
+++ b/src/components/do/a6-device/borrow.vue
@@ -1,13 +1,641 @@
+<!-- 璁惧鍊熺敤 -->
 <template>
-  <div>璁惧鍊熺敤</div>
+  <div>
+    <div class="search">
+      <div class="search_thing">
+        <div class="search_label">娴佺▼缂栧彿锛�</div>
+        <div ><el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="componentData.entity.processNumber"
+            @keyup.enter.native="refreshTable()"></el-input></div>
+      </div>
+      <div class="search_thing" style="padding-left: 30px;">
+        <el-button size="small" @click="refresh()">閲� 缃�</el-button>
+        <el-button size="small" type="primary" @click="refreshTable()">鏌� 璇�</el-button>
+      </div>
+      <div class="btns">
+        <el-button size="small" type="primary" @click="add">鏂板</el-button>
+        <el-button size="small" type="primary" @click="handleDown" :loading="outLoading">瀵煎嚭</el-button>
+      </div>
+    </div>
+    <div class="tables" style="margin-top: 10px;">
+      <ValueTable ref="ValueTable" :url="$api.deviceBorrow.deviceBorrowPage"
+          :delUrl="$api.deviceBorrow.deleteDeviceBorrow"
+          :componentData="componentData" :key="upIndex"/>
+    </div>
+    <el-dialog title="浠櫒璁惧棰�(鍊�)鐢ㄧ櫥璁�" top="5vh" :visible.sync="dialogVisible" width="60%">
+      <el-steps :active="currentStep" finish-status="success"  align-center>
+        <el-step style="cursor:pointer" v-for="(v, i) in steps" :title="v" :key="i"
+          @click.native="choiceStep(i)"></el-step>
+      </el-steps>
+      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+        <div v-show="currentStepClick === 0">
+          <el-card style="margin-top: 1em; height: 51vh; overflow-y: scroll;">
+            <!-- 鏂板璁惧浜嬭褰曞崱鐗� -->
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="缂栧彿锛�" prop="processNumber">
+                  <el-input v-model="form.processNumber" size="small" :disabled="currentStep>0"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="璁惧鍚嶇О锛�">
+                  <el-input v-model="form.deviceName" size="small" disabled></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="绠$悊缂栧彿锛�" prop="unifyNumber">
+                  <el-input v-model="form.unifyNumber" size="small" :disabled="currentStep>0"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鍊熺敤浜猴細" prop="recipientUser">
+                  <el-select v-model="form.recipientUser" filterable placeholder="璇烽�夋嫨" clearable
+                   size="small" style="width: 100%;" :disabled="currentStep>0">
+                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鍊熺敤浜鸿仈绯绘柟寮忥細" prop="borrowerContactInformation" label-width="150px">
+                  <el-input v-model="form.borrowerContactInformation" size="small"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鍊熺敤鏃ユ湡锛�" prop="recipientTime">
+                  <el-date-picker
+                    v-model="form.recipientTime"
+                    type="date"
+                    placeholder="閫夋嫨鏃ユ湡" size="small"  format="yyyy-MM-dd" style="width: 100%" value-format="yyyy-MM-dd" :disabled="currentStep>0">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鍊熺敤鏃剁姸鎬侊細"
+                >
+                  <el-radio-group v-model="form.recipientState" :disabled="currentStep !== 0">
+                    <el-radio :label="0">鍚堟牸</el-radio>
+                    <el-radio :label="1">缁翠慨</el-radio>
+                    <el-radio :label="2">鍋滅敤</el-radio>
+                    <el-radio :label="3">鎶ュ簾</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="鐩稿叧闄勪欢锛�" prop="fileName">
+                  <el-input v-model="form.fileName" disabled size="small"
+                    :style="`width: ${currentStep == 0 ? '88%' : '100%'};`">
+                    <el-button slot="append" v-if="currentStep === 0" icon="el-icon-delete-solid"
+                      @click="deleteFile"></el-button>
+                  </el-input>
+                  <el-upload ref="upload" style="float: right;" :action="action" :show-file-list="false"
+                    :on-success="onSuccess" :disabled="currentStep !== 0">
+                    <el-button style="position: relative;top: -4px" class="uploadFile" slot="trigger" size="small"
+                      type="primary" v-if="currentStep === 0">闄勪欢涓婁紶</el-button>
+                  </el-upload>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="涓嬬幆鑺傝矗浠讳汉锛�" prop="nextUser">
+                  <el-select v-model="form.nextUser" filterable placeholder="璇烽�夋嫨" clearable
+                   size="small" style="width: 100%;" :disabled="currentStep !== 0">
+                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-card>
+          <el-row style="margin-top: 1em;">
+            <el-col :span="4">
+              鎿嶄綔浜猴細{{ form.submitOperationUser }}
+            </el-col>
+            <el-col :span="6">
+              鏃ユ湡锛歿{ form.submitOperationTime }}
+            </el-col>
+          </el-row>
+        </div>
+        <div v-show="currentStepClick === 1">
+          <el-card style="margin-top: 1em; height: 51vh; overflow-y: scroll;">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="褰掕繕浜猴細" prop="rebackUser" :rules="[{ required: currentStep === 1, message: '璇疯緭鍏ュ綊杩樹汉', trigger: 'change' }]">
+                  <!-- <el-input v-model="form.rebackUser" size="small" :disabled="currentStep !== 1"></el-input> -->
+                  <el-select v-model="form.rebackUser" filterable placeholder="璇烽�夋嫨" clearable
+                   size="small" style="width: 50%;" :disabled="currentStep !== 1">
+                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="褰掕繕鏃ユ湡锛�" prop="rebackTime" :rules="[{ required: currentStep === 1, message: '璇烽�夋嫨褰掕繕鏃ユ湡', trigger: 'change' }]">
+                  <el-date-picker
+                    v-model="form.rebackTime"
+                    :disabled="currentStep !== 1"
+                    type="date"
+                    placeholder="閫夋嫨鏃ユ湡" size="small"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鎺ユ敹鐘跺喌锛�"
+                >
+                  <el-radio-group v-model="form.receiveState" :disabled="currentStep !== 1">
+                    <el-radio :label="0">鍚堟牸</el-radio>
+                    <el-radio :label="1">缁翠慨</el-radio>
+                    <el-radio :label="2">鍋滅敤</el-radio>
+                    <el-radio :label="3">鎶ュ簾</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="璁惧璐熻矗浜猴細" prop="deviceUser" :rules="[{ required: currentStep === 1, message: '璇烽�夋嫨璁惧璐熻矗浜�', trigger: 'change' }]">
+                  <!-- <el-input v-model="form.deviceUser" size="small" :disabled="currentStep !== 1"></el-input> -->
+                  <el-select v-model="form.deviceUser" filterable placeholder="璇烽�夋嫨" clearable
+                   size="small" style="width: 50%;" :disabled="currentStep !== 1">
+                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.name">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="澶囨敞锛�">
+                  <el-input type="textarea" v-model="form.note" :disabled="currentStep !== 1"
+                    size="small"></el-input>
+                </el-form-item>
+              </el-col>
+
+            </el-row>
+          </el-card>
+          <el-row style="margin-top: 1em;">
+            <el-col :span="4">
+              鎿嶄綔浜猴細{{ form.receiveOperationUser }}
+            </el-col>
+            <el-col :span="6">
+              鏃ユ湡锛歿{ form.receiveOperationTime }}
+            </el-col>
+          </el-row>
+        </div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="submitForm('3reject')" v-if="currentStep !== 0 && currentStep !== 2">椹冲洖</el-button>
+        <el-button @click="submitForm('2save')" v-if="currentStep === 0">淇濆瓨</el-button>
+        <el-button type="primary" v-if="currentStep !== 2" @click="submitForm('1submit')">{{ currentStep === 0 ? '鎻愪氦' :
+          '閫氳繃'
+          }}</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="娴佺▼璺熻釜" top="5vh" :visible.sync="dialogVisible0" width="60%">
+      <el-table
+      :data="deviceLogs"
+      style="width: 100%">
+        <el-table-column
+          type="index"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="operator"
+          label="鎿嶄綔浜�"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="operationTime"
+          label="鎿嶄綔鏃ユ湡"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="operationType"
+          label="鎻愪氦绫诲瀷">
+        </el-table-column>
+        <el-table-column
+          prop="operationContent"
+          label="鎿嶄綔鍐呭">
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import ValueTable from '../../tool/value-table.vue'
+import { dateFormat } from '../../../util/date'
 export default {
-
+  props: {
+    clickNodeVal: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  components: {
+    ValueTable
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogVisible0:false,
+      //琛ㄥご鏄剧ず
+      componentData:{
+        entity: {
+          processNumber: null,
+          deviceId:null,
+          orderBy: {
+            field: 'id',
+            order: 'asc'
+          }
+          },
+          isIndex: true,
+          showSelect: false,
+          select: false,
+          do: [
+          {
+            id: 'show',
+            font: '鏌ョ湅',
+            type: 'text',
+            method: 'lookDetail'
+          },
+            {
+            id: 'delete',
+            font: '鍒犻櫎',
+            type: 'text',
+            method: 'doDiy'
+          },
+          {
+            id: '111',
+            font: '娴佺▼璺熻釜',
+            type: 'text',
+            method: 'handleLookList'
+          }],
+          init:false,
+          tagField: {
+            recipientState:{
+              select: [{
+								value: 0,
+								type: 'success',
+								label: '鍚堟牸'
+							}, {
+								value: 1,
+								type: 'warning',
+								label: '缁翠慨'
+							}, {
+								value: 2,
+								type: 'info',
+								label: '鍋滅敤'
+							}, {
+								value: 3,
+								type: 'danger',
+								label: '鎶ュ簾'
+							}]
+            }
+          },
+          selectField: {},
+          requiredAdd: [],
+          requiredUp: [],
+      },
+      upIndex:0,
+      entityCopy:null,
+      currentStep: 0, // 姝ラ鏉℃樉绀虹鍑犳
+      currentStepClick: 0, // 鐐瑰嚮姝ラ鏉″彉鍖�
+      steps: ['鍊熷嚭', '鍊熺敤'],
+      responsibleOptions: [], // 涓嬬幆鑺傝礋璐d汉list
+      form:{
+        processNumber:null,
+        deviceName:null,
+        unifyNumber:null,
+        recipientUser:null,
+        recipientTime:null,
+        nextUser:null,
+        rebackUser:null,
+        rebackTime:null,
+        receiveState:null,
+        deviceUser:null,
+        fileName:null,
+      },
+      rules:{
+        processNumber: [{ required: true, message: '璇疯緭鍏ョ紪鍙�', trigger: 'blur' }],
+        deviceName: [{ required: true, message: '璇疯緭鍏ヨ澶囧悕绉�', trigger: 'blur' }],
+        unifyNumber: [{ required: true, message: '璇疯緭鍏ョ鐞嗙紪鍙�', trigger: 'blur' }],
+        recipientUser: [{ required: true, message: '璇疯緭鍏ュ�熺敤浜�', trigger: 'blur' }],
+        borrowerContactInformation: [{ required: true, message: '璇疯緭鍏ュ�熺敤浜鸿仈绯绘柟寮�', trigger: 'blur' }],
+        recipientTime: [{ required: true, message: '璇烽�夋嫨鍊熺敤鏃ユ湡', trigger: 'change' }],
+        nextUser: [{ required: true, message: '璇烽�夋嫨涓嬬幆鑺傝礋璐d汉', trigger: 'change' }],
+      },
+      deviceLogs:[],
+      outLoading:false
+    }
+  },
+  watch:{
+    // 鐩戝惉鐐瑰嚮el-tree鐨勬暟鎹紝杩涜鏁版嵁鍒锋柊
+    clickNodeVal(newVal) {
+      if (newVal.value) {
+        this.componentData.entity.deviceId = this.clickNodeVal.value
+        this.entityCopy = this.HaveJson(this.componentData.entity)
+        this.refreshTable()
+      }
+    },
+    dialogVisible(newVal) {
+      if (!newVal) {
+        this.form = {}
+        this.currentStep = 0 // 姝ラ鏉℃樉绀虹鍑犳
+        this.currentStepClick = 0 // 鐐瑰嚮姝ラ鏉″彉鍖�
+        this.$refs['form'].clearValidate()
+      }
+    }
+  },
+  computed: {
+    action() {
+      return this.javaApi + this.$api.personnel.saveCNASFile
+    }
+  },
+  mounted() {
+    this.componentData.entity.deviceId = this.clickNodeVal.value
+    this.entityCopy = this.HaveJson(this.componentData.entity)
+    // console.log(333,this.clickNodeVal)
+    this.getUserList()
+    this.refreshTable()
+  },
+  methods: {
+    refreshTable(e) {
+      this.$refs['ValueTable'].selectList(e)
+    },
+    refresh() {
+      this.componentData.entity = this.HaveJson(this.entityCopy)
+      this.refreshTable()
+      // this.upIndex++
+    },
+    choiceStep(index) {
+      this.currentStepClick = index
+    },
+    //鎻愪氦琛ㄥ崟
+    async submitForm(saveState) {
+      this.$refs.form.validate((valid) => {
+        if (valid === true || saveState !== '1submit') {
+          // 缁欏綋鍓嶇幆鑺傝缃垱寤轰汉涓庢椂闂�
+          let user = JSON.parse(localStorage.getItem('user'))
+          const dateTime = dateFormat(new Date())
+          // 鑾峰彇褰撳墠鐜妭鎿嶄綔浜轰笌鏃ユ湡
+          switch (this.currentStep) {
+            case 0:
+              this.form.submitOperationUser = user.name
+              this.form.submitOperationTime = dateTime
+              break
+            case 1:
+              this.form.receiveOperationUser = user.name
+              this.form.receiveOperationTime = dateTime
+              break
+            default:
+              break
+          }
+          // 鑾峰彇褰撳墠鐜妭璐熻矗浜�
+          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
+            case 0:
+              this.form.nowUser = this.form.nextUser
+              break
+            default:
+              break
+          }
+          let currentStepAction;
+          // 璁剧疆璇ユ搷浣滃垽鏂槸鍚︿负鎻愪氦锛屼繚瀛橈紝椹冲洖锛岄�氳繃
+          switch (saveState) {
+            // 鎻愪氦锛岄�氳繃
+            case '1submit':
+              currentStepAction = this.currentStep + 1
+              break
+            // 淇濆瓨
+            case '2save':
+              currentStepAction = this.currentStep
+              break
+            // 椹冲洖
+            case '3reject':
+              currentStepAction = this.currentStep - 1
+              break
+            default:
+              break
+          }
+          // 鑾峰彇褰撳墠鐘舵��
+          this.form.nowState = currentStepAction === 2 ? '鍏抽棴' : this.steps[currentStepAction]
+          this.form.deviceId = this.clickNodeVal.value
+          delete  this.form.deviceLogs
+          this.$axios.post(this.$api.deviceBorrow.saveDeviceBorrow, this.form, {
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            noQs:true
+          }).then(res => {
+            if (res.code == 200) {
+              this.$message.success('鎻愪氦鎴愬姛')
+              this.dialogVisible = false
+              this.refreshTable()
+            }
+          })
+        } else {
+          let step = this.steps[this.currentStep]
+          this.$message.warning(step + '  娴佺▼涓湁蹇呭~椤规湭濉紒');
+        }
+      });
+    },
+    deleteFile() {
+      this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎璇ユ枃浠�, 鏄惁缁х画?', '鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning'
+      }).then(() => {
+        this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + this.form.fileName).then(res => {
+          if (res.code == 200) {
+            this.$message.success('鍒犻櫎鎴愬姛锛�')
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '宸插彇娑堝垹闄�'
+        });
+      });
+    },
+    onSuccess(response, file, fileList) {
+      if (response.code == 200) {
+        // 鍦ㄤ繚瀛樿祴鍊兼柊鏂囦欢
+        this.form.fileName = file.name
+        this.form.url= response.data
+      } else {
+        this.$message.error(response.message)
+      }
+    },
+    // 鑾峰彇璐熻矗浜轰俊鎭帴鍙�
+    getUserList() {
+      this.$axios.get(this.$api.deviceScope.selectUserList).then(res => {
+        if (res.code == 200) {
+          this.responsibleOptions = res.data
+        }
+      })
+    },
+    // 鏌ョ湅璇︽儏
+    lookDetail(row){
+      this.$axios.get(this.$api.deviceBorrow.getDeviceBorrow+'?id='+row.id).then(res => {
+        if (res.code == 200) {
+          this.form = res.data
+          this.form.deviceName = this.clickNodeVal.label
+          this.form.deviceId = this.clickNodeVal.value
+          this.deviceLogs = res.data.deviceLogs
+          let i = this.steps.findIndex(item => item == row.nowState)
+          if(i==-1){
+            this.currentStep = 2
+            this.currentStepClick = 0
+          }else{
+            this.currentStep = i
+            this.currentStepClick = i
+          }
+          console.log(this.currentStepClick)
+          this.dialogVisible = true
+        }
+      })
+    },
+    // 鏂板
+    add(){
+      this.dialogVisible = true
+      this.form = {
+        processNumber:null,
+        deviceName:null,
+        unifyNumber:null,
+        recipientUser:null,
+        recipientTime:null,
+        nextUser:null,
+        rebackUser:null,
+        rebackTime:null,
+        receiveState:null,
+        deviceUser:null,
+        fileName:null,
+      }
+      this.form.deviceName = this.clickNodeVal.label
+      this.form.deviceId = this.clickNodeVal.value
+    },
+    //瀵煎嚭
+    handleDown() {
+      this.outLoading = true
+      this.$axios.post(this.$api.deviceBorrow.deviceBorrowExport,{deviceId:this.clickNodeVal.value},{responseType: 'blob'}).then(res => {
+        this.outLoading = false
+        const blob = new Blob([res], {
+          type: 'application/force-download'
+        })
+        const filename = decodeURI(this.clickNodeVal.label+'璁惧鍊熷嚭缁熻'+'.xlsx')
+        //灏咮lob 瀵硅薄杞崲鎴愬瓧绗︿覆
+        let reader = new FileReader();
+        reader.readAsText(blob, 'utf-8');
+        reader.onload = () => {
+          try {
+            let result = JSON.parse(reader.result);
+            if (result.message) {
+              this.$message.error(result.message);
+            } else {
+              // 鍒涘缓涓�涓秴閾炬帴锛屽皢鏂囦欢娴佽祴杩涘幓锛岀劧鍚庡疄鐜拌繖涓秴閾炬帴鐨勫崟鍑讳簨浠�
+              const elink = document.createElement('a')
+              elink.download = filename
+              elink.style.display = 'none'
+              elink.href = URL.createObjectURL(blob)
+              document.body.appendChild(elink)
+              elink.click();
+              URL.revokeObjectURL(elink.href) // 閲婃斁URL 瀵硅薄
+              document.body.removeChild(elink)
+              this.$message.success('瀵煎嚭鎴愬姛')
+            }
+          } catch (err) {
+            console.log(err);
+            // 鍒涘缓涓�涓秴閾炬帴锛屽皢鏂囦欢娴佽祴杩涘幓锛岀劧鍚庡疄鐜拌繖涓秴閾炬帴鐨勫崟鍑讳簨浠�
+            const elink = document.createElement('a')
+            elink.download = filename
+            elink.style.display = 'none'
+            elink.href = URL.createObjectURL(blob)
+            document.body.appendChild(elink)
+            elink.click();
+            URL.revokeObjectURL(elink.href) // 閲婃斁URL 瀵硅薄
+            document.body.removeChild(elink)
+            this.$message.success('瀵煎嚭鎴愬姛')
+          }
+        }
+      })
+    },
+    handleLookList(row){
+      this.$axios.get(this.$api.deviceBorrow.getDeviceBorrow+'?id='+row.id).then(res => {
+        if (res.code == 200) {
+          this.deviceLogs = res.data.deviceLogs
+          this.dialogVisible0 = true
+        }
+      })
+    }
+  },
 }
 </script>
 
 <style scoped>
+h4 {
+  font-weight: 400;
+  font-size: 16px;
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0;
+}
 
+h4 .line {
+  display: inline-block;
+  width: 3px;
+  height: 16px;
+  background: #3A7BFA;
+  margin-right: 4px;
+}
+
+.tables {
+  width: 100%;
+  height: calc(100vh - 15em);
+}
+
+.search {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-top: 10px;
+}
+
+.search_thing {
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
+
+.search_label {
+  width: 70px;
+  font-size: 14px;
+  text-align: right;
+}
+
+.search_input {
+  width: calc(100% - 120px);
+}
+
+.btns {
+  position: absolute;
+  right: 0px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.btns_thing {
+  position: absolute;
+  right: 230px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.form .search_label {
+  width: 120px;
+}
+.el-radio{
+  margin-right: 10px;
+}
+.el-radio-group{
+  width: 100%;
+  display: flex;
+  margin-top: 12px;
+}
 </style>

--
Gitblit v1.9.3