swOperation/src/operation/moduleNormal/controlPanel/modules/handleHistory.vue

<template>
  <a-modal
    v-model:visible="modeVisible"
    class="custom-class"
    :title="typeData.title"
    placement="right"
    width="1800px"
    :closable="false"
    @ok="submit"
  >
    <div class="switch" v-if="typeData.title == '上传日志'">
      <div class="item">
        <a-radio-group
          v-model:value="analysis"
          :style="{ marginBottom: '8px' }"
        >
          <a-radio-button :value="true">译文</a-radio-button>
          <a-radio-button :value="false">原文</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <normalTable
      :is-select="false"
      v-if="modeVisible"
      :loadOverHandle="false"
      rowKey="w_areaid"
      ref="list"
      size="small"
      :param="param"
      :columns="utils.TBLayout(typeData.Table)"
    >
      <template #tb_cell="{ data }">
        <div v-if="data.column.dataIndex == 'issend'">
          {{ data.record.issend == 0 ? "未发送" : "已发送" }}
        </div>
        <div v-else-if="data.column.dataIndex == 'content'">
          <div
            v-if="typeData.title == '上传日志'"
            style="width: 1000px; white-space: normal"
          >
            {{ analysis ? data.record.analysis : data.record.content }}
          </div>
          <div style="width: 200px; display: flex; flex-wrap: wrap" v-else>
            <a-tag v-for="item in data.record.content"
              >{{ item.title }} : {{ item.value }}</a-tag
            >
          </div>
        </div>
        <div v-else-if="data.column.dataIndex == 'isreceive'">
          {{ data.record.isreceive ? "已接收" : "未接收" }}
        </div>
        <div v-else-if="data.column.dataIndex == 'invalid'">
          {{ data.record.isreceive ? "已失效" : "未失效" }}
        </div>
      </template>
    </normalTable>
    <template #footer>
      <a-button key="back" @click="clearCmd" v-if="typeData.title == '操作队列'"
        >清空队列</a-button
      >
      <a-button key="submit" type="primary" @click="modeVisible = false"
        >确定</a-button
      >
    </template>
  </a-modal>
</template>

<script setup>
import normalTable from "@/template/normalTable/index.vue";
import { ref, defineProps, defineEmits, computed, watch, inject } from "vue";
import Api from "@/api/api";
import utils from "@/utils/utils";
import { useRouter } from "vue-router";
import { Modal } from "ant-design-vue";
let analysis = ref(true);
let router = useRouter();
let emit = defineEmits([""]);
let props = defineProps({});
let modeVisible = ref(false);
let detailFun = inject("detailFun");
let type = ref(0);
let param = ref({
  id: 20230701132202,
  content: {
    w_deviceid: router.currentRoute.value.query.id,
    type: 0,
    pageNumber: 1,
    pageSize: 10,
  },
});

let list = ref();

let clearCmd = () => {
  Modal.confirm({
    title: "确定清空当前所有操作队列吗?",
    async onOk() {
      let res = await Api.requested({
        id: 20231128145402,
        content: {
          w_deviceid: router.currentRoute.value.query.id,
        },
      });
      utils.message(res, "操作成功", () => {
        detailFun();
        list.value.listData();
      });
    },
    onCancel() {},
  });
};

watch(
  () => modeVisible.value,
  (val) => {
    if (!val) param.value.content.pageNumber = 1;
  }
);

let typeData = computed(() => {
  let data = {};
  switch (type.value) {
    case 0:
      data = {
        title: "操作记录",
        Table: "historyTable",
      };
      break;
    case 1:
      data = {
        title: "上传日志",
        Table: "uploadHistory",
      };

      break;
    default:
      data = {
        title: "操作队列",
        Table: "handleQueue",
      };
      break;
  }
  return data;
});

let listData = () => {
  list.value.listData();
};

defineExpose({
  type,
  param,
  modeVisible,
  listData,
});
</script>

<style scoped>
.switch {
  position: relative;
}

.item {
  position: absolute;
  top: -84rem;
  left: 100rem;
  z-index: 1;
}
</style>