smartai_desk_pc/src/modules/data-source-manage/data-source/DataSourceBody.vue

<template>
  <div class="detail-body">
    <a-table
      :row-selection="rowSelection"
      v-model:selectedKeys="selectedKeys"
      :pagination="false"
      rowKey="id"
      :data="groupTemplates"
      :loading="is_Loading"
      :scroll="{ y: 'calc(100% - 64px)' }"
      scrollbar
    >
      <template #columns>
        <a-table-column
          v-for="item in columns"
          :key="item.dataIndex"
          :title="item.title"
          :data-index="item.dataIndex"
          :header-cell-style="{ backgroundColor: 'var(--table-th-bg)' }"
          align="left"
          :width="item.width"
        >
          <template #cell="{ record, column }">
            <div class="column" v-if="item.dataIndex === 'name'">
              <img src="../../../assets/report-template/template_name.svg" alt="" />
              {{ record[column.dataIndex] }}
            </div>
            <div class="column" v-else-if="item.dataIndex === 'data_source_type'">
              {{ record[column.dataIndex] / 1 === 1 ? 'API' : '数据库' }}
            </div>
            <div class="column" v-else-if="item.dataIndex === 'created_at'">
              {{ formatDateTime(record[column.dataIndex]) || '-' }}
            </div>
            <div class="column" v-else-if="item.dataIndex === 'action'">
              <span class="link" @click="handleEdit(record)">编辑</span>
              <span class="link link_del" @click="handleDelete(record)">删除</span>
            </div>
            <div class="column" v-else>
              {{ record[column.dataIndex] }}
            </div>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <div class="pagination">
      <a-pagination
        :total="page.total"
        :current="page.current"
        :page-size="page.page_size"
        @change="changePageChange"
        @page-size-change="changePageSizeChange"
        show-total
        show-page-size
      />
    </div>
  </div>
  <DeleteModal
    :visible="show_delete_modal"
    :is_branch="is_branch"
    @ok="handleConfirm"
    @cancel="handleCancel"
  ></DeleteModal>
</template>

<script setup >
import { ref, reactive, watch, computed, nextTick, onMounted } from 'vue';
import { getDataSourceList, deleteDataSourceItem } from '../../conversation-dialog/api-template';
import DeleteModal from '../../../components/DeleteModal.vue';
import { Message } from '@arco-design/web-vue';
import { formatDateTime } from '../../../utils/utils';

const emit = defineEmits(['edit-template']);

const selectedKeys = ref([]);
const show_delete_modal = ref(false);
const is_branch = ref(false);
const selected_id_list = ref([]);
const filter_config = ref({
  filter: null,
  filter_value: null
});

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false
});

const columns = ref([
  {
    title: '数据源名称',
    dataIndex: 'metric_name',
    key: 'metric_name',
    width: 200,
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },
  {
    title: '描述',
    dataIndex: 'api_description',
    key: 'api_description',
    width: 400
  },
  {
    title: '数据源类型',
    dataIndex: 'data_source_type',
    key: 'data_source_type'
  },
  // {
  //   title: '创建者',
  //   dataIndex: 'creator',
  //   key: 'creator'
  //   // width: 200
  // },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    // width: 200,
    sortable: {
      sortDirections: ['ascend', 'descend']
    }
  },

  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
    // width: 200
  }
]);

const page = ref({
  total: 0,
  current: 1,
  page_size: 20
});
const is_Loading = ref(false);
const groupTemplates = ref([]);

const is_loading_status = ref(false);

const changePageChange = (current) => {
  page.value.current = current;
  getDataSourceListFun();
};
const changePageSizeChange = (page_size) => {
  page.value.page_size = page_size;
  getDataSourceListFun();
};

const getDataSourceListFun = async () => {
  is_Loading.value = true;
  try {
    const res = await getDataSourceList({
      page: page.value.current,
      size: page.value.page_size,
      metric_name: filter_config.value.filter_value || ''
    });
    if (res.code / 1 === 200) {
      console.log(res);
      groupTemplates.value = res.data || [];
      page.value.total = res.pages.total || 0;
    }
  } catch (error) {
    console.log(error);
  } finally {
    is_Loading.value = false;
  }
};
const handleDelete = async (record) => {
  console.log(record);
  selected_id_list.value = [record.id];
  show_delete_modal.value = true;
};
// 批量删除
const deleteSelected = async () => {
  if (selectedKeys.value.length === 0) {
    Message.warning('请选择要删除的草稿');
    return;
  }
  selected_id_list.value = selectedKeys.value;
  if (selected_id_list.value.length > 0) {
    is_branch.value = true;
  } else {
    is_branch.value = false;
  }
  show_delete_modal.value = true;
};

const handleConfirm = async () => {
  try {
    const res = await deleteDataSourceItem({
      metric_id: selected_id_list.value
    });

    if (res.code / 1 === 200) {
      Message.success('删除成功');
      getDataSourceListFun();
    } else {
      Message.error('删除失败');
    }
  } catch (error) {
    console.log(error);
    Message.error('删除失败');
  } finally {
    selected_id_list.value = [];
    selectedKeys.value = [];
    show_delete_modal.value = false;
    is_branch.value = false;
  }
};
const handleCancel = () => {
  show_delete_modal.value = false;
  selected_id_list.value = [];
  selectedKeys.value = [];
  is_branch.value = false;
};
const handleStatusChange = (record) => {
  console.log(record);
  is_loading_status.value = true;
  editTemplateItemFunc({ id: record.id, status: record.status });
};

const editTemplateItemFunc = async (item) => {
  try {
    const res = await editTemplateItem({
      ...item
    });
    if (res.code / 1 === 200) {
      // Message.success('编辑成功');
      getDataSourceListFun();
    } else {
      // Message.error('编辑失败');
    }
  } catch (error) {
    console.log(error);
    // Message.error('编辑失败');
  } finally {
    is_loading_status.value = false;
  }
};

const handleEditRemark = (record) => {
  record.temp_remark = record.remark;
  record.is_remark_edit = true;
  record.show_edit_btn = false;
  nextTick(() => {
    const input = document.querySelector('.remark-edit .arco-input');
    if (input) {
      input.focus();
    }
  });
};

const handleSaveRemark = async (record) => {
  try {
    const res = await editTemplateItem({
      id: record.id,
      remark: record.temp_remark
    });
    if (res.code / 1 === 200) {
      Message.success('保存成功');
      record.remark = record.temp_remark;
      record.is_remark_edit = false;
      delete record.temp_remark;
    } else {
      Message.error('保存失败');
    }
  } catch (error) {
    console.log(error);
    Message.error('保存失败');
  }
};

const handleCancelRemark = (record) => {
  record.is_remark_edit = false;
  delete record.temp_remark;
};

const handleEdit = (record) => {
  emit('edit-datasource', record);
};

const clearFilter = (params) => {
  filter_config.value = {
    filter: params.type,
    filter_value: params.value
  };
  page.value.current = 1;
};

const toSearch = (params) => {
  filter_config.value = {
    filter: params.type,
    filter_value: params.value
  };
  page.value.current = 1;

  getDataSourceListFun();
};
onMounted(() => {
  getDataSourceListFun();
});

defineExpose({
  update: getDataSourceListFun,
  deleteSelected: deleteSelected,
  toSearch: toSearch,
  clearFilter: clearFilter
});
</script>
<style scoped lang="css">
.detail-body {
  position: relative;
  height: calc(100% - 52px);
  padding: 0 20px;
  z-index: 10;
}
.column {
  display: flex;
  align-items: center;
  gap: 5px;
}
.column .link {
  color: #3d3d3d;
  cursor: pointer;
}
.column .link_del {
  color: #e34d59;
}
:deep(.arco-table-element th) {
  background-color: var(--table-th-bg) !important;
}
:deep(.arco-checkbox-checked .arco-checkbox-icon) {
  background: var(--primary-default);
}
:deep(.arco-checkbox-indeterminate .arco-checkbox-icon) {
  background: var(--primary-default);
}
.pagination {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
:deep(.arco-pagination-item-active, .arco-pagination-item-active:hover) {
  color: var(--primary-default);
  background: var(--title-bg);
}

.remark-cell {
  position: relative;
}

.remark-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.edit-icon {
  cursor: pointer;
  color: var(--color-text-2);
  opacity: 0;
  transition: opacity 0.2s;
}

.remark-cell:hover .edit-icon {
  opacity: 1;
}

.edit-icon:hover {
  color: var(--primary-default);
}

.remark-edit {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.edit-actions {
  display: flex;
  gap: 8px;
}

.edit-actions .arco-btn {
  min-width: 60px;
}
.icon_edit_btn {
  font-size: 16px;
  cursor: pointer;
}
.icon_edit_btn:hover {
  color: var(--primary-default);
}
</style>