dingxin_toolbox_vue/src/views/update/index.vue

<script setup>
import {onBeforeMount, onMounted, reactive, ref, unref, computed} from 'vue';
import {useStore, mapGetters, mapState} from "vuex";
import {cinema_list, cinema_search, cinema_user, change_cinema_user} from "@/apis/update.js";
import CinemaUpdate from "@/components/update/CinemaUpdate.vue";

// 注册vuex
const store = useStore()


// region 表单代码
// 搜索条件字段
const cinemaSearch = reactive({
  ip: '',
  version: '',
})

// 点击搜索时提交的数据
const cinemaSearchRef = ref()

// 数据校验部分 校验ip地址是否合法
const ip_validate = (rule, value, callback) => {
  const regex = new RegExp('((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})){3}');
  if (value === '') {
    callback()
  }
  if (!regex.test(value)) {
    callback(new Error('请输入正确的IP地址'))
  } else {
    callback()
  }
}

// 指定表单的校验规则， 仅对ip进行校验
const ipRule = reactive({
  ip: [{validator: ip_validate, trigger: 'change'}]
})

// 数据提交 点击搜索按键提交数据
const submitSearch = async (formEl) => {
  const {ip, version} = unref(cinemaSearch)
  tableData.value = []
  await cinema_search({ip, version}).then(
      res => {
        if (Array.isArray(res)) {
          tableData.value = [...res]

        } else {

        }
      }
  ).catch(
      err => {
      }
  )
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('提交数据')
    } else {
      console.log('提交失败')
      return false
    }
  })
}

// 重置搜索数据的逻辑
const resetSearch = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

// 刷新逻辑
const refresh = (formEL) => {
  formEL.resetFields()
  refresh_disable.value = true;
  refresh_loading.value = true;
  get_table_data()
  setTimeout(() => {
    refresh_disable.value = false;
    refresh_loading.value = false;
  }, 5000)
}
// endregion


// region 表格数据代码
// 表格展示的数据
const tableData = ref([])

// 定义开关控制刷新按键的状态 disable和loading
let refresh_disable = ref(false)
let refresh_loading = ref(false)

// 通过异步请求获取影院列表数据
async function get_table_data() {
  tableData.value = []
  await cinema_list().then(res => {
    if (Array.isArray(res)) {
      tableData.value = [...res]
    } else {
    }
  }).catch(err => {
        console.log(err)
      }
  )
}

// 定义生命周期，在加载时获取一次表格数据
onMounted(
    async () => {
      await get_table_data();
    }
)

// endregion

// region 常用人代码
// 定义常用人代码被选中的结果
const selectedUser = ref('')
// 定义变量用于接受返回数据
let userData = ref([])
// 定义用于展示的数据变量
onMounted(async () => {
  await cinema_user().then((res) => {
    const user_list = res.map((item, index) => {
      return {key: item.id, label: item.username, value: item.username}
    })
    user_list.unshift({key: 0, label: '暂无', value: '暂无'})
    userData.value = [...user_list]
  }).catch((err) => {
  })
})

const cinemaUserChange = (user, id) => {
  const params = {user, id}
  change_cinema_user(params).then(res => {
  }).catch(err => {
  })
}

// endregion

// region 升级相关代码
const update_ip = ref('')

const changeDialogStatus = (val) => {
  store.state.update_dialog_show = true
  update_ip.value = val
}
// endregion

</script>

<template>
  <el-form
      ref="cinemaSearchRef"
      :model="cinemaSearch"
      status-icon
      :rules="ipRule"
      class="cinema-search"
  >
    <el-row>
      <el-col :span="5">
        <el-form-item label="影院IP" prop="ip" label-width="60">
          <el-input v-model="cinemaSearch.ip" placeholder="请输入完整的影院IP" style="width: 180px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="系统版本" prop="version">
          <el-input v-model="cinemaSearch.version" placeholder="支持模糊查询" style="width: 160px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="submitSearch(cinemaSearchRef)">搜索</el-button>
        <el-button @click="resetSearch(cinemaSearchRef)">重置</el-button>
        <el-button v-bind:disabled="refresh_disable" @click="refresh(cinemaSearchRef)" v-bind:loading="refresh_loading">
          刷新
        </el-button>
      </el-col>
    </el-row>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="update_time" label="最后查询时间" min-width="180"></el-table-column>
    <el-table-column prop="ip" label="操作" min-width="80">
      <template v-slot="scope">
        <el-button type="info" size="small" @click="changeDialogStatus(scope.row.ip)">更新</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="selectedUser" label="当前使用人" min-width="120">
      <template v-slot="scope">
        <el-select v-model="scope.row.user" class="m-2" size="small" laceholder="请选择" style="width: 80px"
                   @change="cinemaUserChange(scope.row.user, scope.row.id)">
          <el-option v-for="data in userData" :key="data.id" :label="data.label"
                     :value="data.value"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="影院名称" min-width="250"></el-table-column>
    <el-table-column prop="ip" label="影院IP" min-width="120">
      <template v-slot="scope">
        <a target="_blank" style="color:#007bff;" v-if="scope.row.ip!=null"
           v-bind:href="'http://'+scope.row.ip+'/?code=leying'">
          {{ scope.row.ip }}
        </a>
        <span v-else> {{ scope.row.ip }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="zz_num" label="专资编码" min-width="100"></el-table-column>
    <el-table-column prop="inner_id" label="鼎新编码" min-width="90"></el-table-column>
    <el-table-column prop="sys_ver" label="系统版本" min-width="175"></el-table-column>
    <el-table-column prop="client_ver" label="客户端版本" min-width="150"></el-table-column>
    <el-table-column prop="is_cloud" label="云版本" min-width="80"></el-table-column>
    <el-table-column prop="remote_label" label="远程办公识别码" min-width="200" class-name="remote"></el-table-column>
    <el-table-column prop="db_user" label="数据库账号" min-width="100"></el-table-column>
    <el-table-column prop="db_pwd" label="数据库密码" min-width="120"></el-table-column>
  </el-table>
  <CinemaUpdate :ip="update_ip"></CinemaUpdate>
</template>


<style scoped>
:deep(td.remote div){
  font-family: "YaHei Consolas Hybrid";
}
</style>