self-constructing_graph/src/components/EditKBFileDialog.vue

<template>
  <div class="add-kb-file-dialog">
    <el-dialog v-model="dialogVisible" title="文件修改" width="1000px" align-center :show-close="false"
      @closed="() => { emit('update:modelValue', false) }">
      <el-form ref="formRef" style="max-width: 100%" :model="formData" label-width="auto" class="demo-dynamic">
        <el-form-item prop="fileTableData" v-show="formData.fileTableData.length > 0">
          <div class="file-table">
            <el-table :data="formData.fileTableData" border table-layout="fixed" height="400"
              style="max-width: 100%;box-sizing: border-box;min-width: 0px;">
              <el-table-column type="index" label="#" width="50" />
              <el-table-column label="导入文件标题" prop="file_name">
                <template #default="{ row, $index }">
                  <p :contenteditable="true" class="input-box" @blur="updateInputBox($event, $index, 'file_name')">{{
                    row.file_name }}</p>
                </template>
              </el-table-column>
              <el-table-column label="知识类型" prop="knowledge_type" width="210">
                <template #default="{ row }">
                  <!-- <p>{{ row.knowledge_type }}</p> -->
                  <el-select v-model="row.knowledge_type" placeholder="Select" style="width: 180px">
                    <el-option v-for="item in formData.knowledgeTypeOptions" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="版本号" prop="version">
                <template #default="{ row, $index }">
                  <p :contenteditable="true" class="input-box" @blur="updateInputBox($event, $index, 'version')">{{
                    row.version }}</p>
                </template>
              </el-table-column>
              <el-table-column label="作者（主编）" prop="author">
                <template #default="{ row, $index }">
                  <p :contenteditable="true" class="input-box" @blur="updateInputBox($event, $index, 'author')">{{
                    row.author }}</p>
                </template>
              </el-table-column>

              <el-table-column label="年份" prop="year" width="80">
                <template #default="{ row, $index }">
                  <p :contenteditable="true" class="input-box" @blur="updateInputBox($event, $index, 'year', 'number')">
                    {{ row.year }}
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :disabled="formData.fileTableData.length === 0" @click="handleConfirm">
            确认
          </el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { cloneDeep } from "lodash"
import { ref, watch, getCurrentInstance, toRaw } from "vue"
import { api } from "@/utils/config"
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()

const props = defineProps({ modelValue: Boolean, fileTable: Array })
const emit = defineEmits(['update:modelValue', 'updateFiles'])
const formData = ref({
  id: null,
  fileTableData: [],
  knowledgeTypeOptions: [
    { value: "中华医学会诊疗指南", label: "中华医学会诊疗指南" },
    { value: "规培十四五教材", label: "规培十四五教材" },
    { value: "临床路径", label: "临床路径" },
  ]
})
let dialogVisible = ref(false)
const handleCancel = () => {
  emit('update:modelValue', false)
}

const handleConfirm = () => {
  updateFiles()
}
watch(() => props.modelValue, (newVal) => {
  dialogVisible.value = newVal
}, { immediate: true })
watch(() => props.fileTable, (newVal) => {
  formData.value.fileTableData = cloneDeep(newVal) || []
}, { immediate: true, deep: true })

const updateFiles = async () => {
  try {
    const data = await proxy.$http.put(api.batchUpdate, {
      files: formData.value.fileTableData
    })
    formData.value.fileTableData = []
    emit('updateFiles')
    emit('update:modelValue', false)
  } catch (e) {
    console.log(e)
  }
}

function updateInputBox(e, index, key, valueType = 'string') {
  let value = e.target.innerText || ""
  if (valueType === 'number') {
    value = Number(value)
  }
  formData.value.fileTableData[index][key] = value
}

</script>

<style lang="less" scoped>
.add-kb-file-dialog {
  :deep(.el-dialog) {
    label {
      margin: 20px 0px 10px;
      display: block;
    }

    .dialog-footer {
      text-align: center;
      // gap: 40px;

      .el-button {
        padding: 19px 50px;
        margin-left: 50px;

        &:first-child {
          margin-left: 0px;
        }
      }
    }
  }

  :deep(.el-form) {
    .input-box {
      &:focus {
        outline: none;
      }
    }

    .el-textarea__inner,
    .el-input__wrapper {
      background-color: #F1F3F6;
    }

    .import-method {
      .el-radio-button {
        // margin: 10px 0px;
        padding: 2px;
        background: #E3E8F0;

        &:is(.is-active) {
          .el-radio-button__inner {
            background-color: white;
            color: #306FF3;
          }
        }

        &:first-child {
          border-radius: 10px 0px 0px 10px;
        }

        &:last-child {
          border-radius: 0px 10px 10px 0px;
        }

        .el-radio-button__inner {
          color: #859299;
          border-radius: 10px;
          background-color: transparent;
          border: none;
          padding: 10px 30px;
          box-shadow: none;
        }
      }
    }

    .file-type {
      display: flex;
      gap: 10px;

      .file-type-box {
        width: 250px;
        border: 1px solid #EDEDEF;
        padding: 10px;
        border-radius: 10px;

        &:is(.active) {
          border-color: #4B73F2;
          background-color: #EEF3FE;

          .title {
            .name {
              color: #4B73F2;
            }


          }
        }

        .title {
          display: flex;
          align-items: center;

          .name {
            color: #000;
          }
        }
      }
    }

    .file-table {
      flex: 1 1 auto;
    }
  }

  .moxing1-icon {
    width: 24px;
    height: 24px;
  }
}
</style>