mky-vent-base/src/views/vent/deviceManager/riskSetting/index.vue

<template>
  <div class="risk-setting">
    <a-table :columns="columns" size="small" :data-source="tableData" :scroll="{ y: 500 }" class="tableW" :pagination="false">
      <template #action="{ record }">
        <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
      </template>
      <template #bodyCell="{ column, text }"></template>
    </a-table>
    <!-- 编辑弹窗 -->
    <a-modal v-model:visible="visibleEdit" width="650px" :footer="null" :title="titleEdit" centered destroyOnClose>
      <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off">
        <a-form-item label="粉尘占比：">
          <a-input v-model:value="formState.dust" type="number" clearable placeholder="请输入" />
        </a-form-item>
        <a-form-item label="火灾占比：">
          <a-input v-model:value="formState.fire" type="number" clearable placeholder="请输入" />
        </a-form-item>
        <a-form-item label="瓦斯占比：">
          <a-input v-model:value="formState.gas" type="number" clearable placeholder="请输入" />
        </a-form-item>
        <a-form-item label="通风占比：">
          <a-input v-model:value="formState.vent" type="number" clearable placeholder="请输入" />
        </a-form-item>
      </a-form>
      <div class="edit-btn">
        <a-button type="primary" style="margin-right: 10px" @click="confirmSave">保存</a-button>
        <a-button type="success" @click="cancelSave">取消</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import { getDisasterProportion, updateDisasterProportion } from './riskSetting.api';
  import { columns } from './riskSetting.data';
  import { message } from 'ant-design-vue';

  let tableData = reactive<any[]>([]);
  let visibleEdit = ref(false);
  let titleEdit = ref('');
  let formState = reactive<any>({
    id: '',
    dust: '',
    fire: '',
    gas: '',
    vent: '',
  });
  //编辑
  let handlerEdit = (record) => {
    titleEdit.value = '编辑';
    visibleEdit.value = true;
    formState.dust = record.dust;
    formState.fire = record.fire;
    formState.vent = record.vent;
    formState.gas = record.gas;
    formState.id = record.id;
  };
  //确认编辑
  async function confirmSave() {
    let data = (parseFloat(formState.dust) + parseFloat(formState.fire) + parseFloat(formState.gas) + parseFloat(formState.vent)).toFixed(2);
    if (parseFloat(data) == 1) {
      let res = await updateDisasterProportion({ ...formState });
      if (res.code == 200) {
        visibleEdit.value = false;
        getDisasterProportionList();
      }
    } else {
      message.warning('录入错误!');
    }
  }
  //取消编辑
  let cancelSave = () => {
    visibleEdit.value = false;
  };
  //查询各种灾害风险比重
  async function getDisasterProportionList() {
    tableData.length = 0;
    let res = await getDisasterProportion();
    console.log(res, '风险比重占比');
    if (res) {
      tableData.push(res);
    } else {
      tableData.length = 0;
    }
  }
  onMounted(() => {
    getDisasterProportionList();
  });
</script>

<style lang="less" scoped>
  .risk-setting {
    position: relative;
    padding: 10px;
    box-sizing: border-box;
  }

  .zxm-form {
    padding-top: 15px !important;
    box-sizing: border-box;
  }

  .edit-btn {
    margin: 15px;
    display: flex;
    justify-content: flex-end;

    .zxm-btn {
      margin: 0px 10px;
    }
  }

  :deep(.zxm-input) {
    color: #fff;
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
  }
</style>