FileManagerUI/src/views/project/list/index.vue

<!-- eslint-disable prettier/prettier -->
<template>
  <div class="bodycontent">
    <div class="sheard">
      <div class="searchheard">
        <div class="item">
          <div>区域：</div>
          <div>
            <el-select v-model="searchForm.area" clearable placeholder="请选择">
              <el-option
                v-for="item in sys_area"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="item">
          <div>丘权号：</div>
          <div>
            <el-input
              v-model="searchForm.qiuquan"
              style="width: 240px"
              placeholder="请输入"
            />
          </div>
        </div>
        <div class="item">
          <div>建设单位：</div>
          <div>
            <el-input
              v-model="searchForm.buildUnit"
              style="width: 240px"
              placeholder="请输入"
            />
          </div>
        </div>

        <div class="item">
          <div>存储位置：</div>
          <div>
            <el-input
              v-model="searchForm.saveAddr"
              style="width: 240px"
              placeholder="请输入"
            />
          </div>
        </div>
        <br />

        <!-- ， 区域、丘权号、建设单位（后申请单位）、地址（公安门牌）、存储位置 -->
      </div>
      <div class="searchheard" style="margin-top: 10px">
        <div class="item">
          <div>地址：</div>
          <div>
            <el-input
              v-model="searchForm.addr"
              style="width: 240px"
              placeholder="请输入"
            />
          </div>
        </div>
      </div>

      <div
        style="
          position: absolute;
          right: 0;
          top: 10px;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
        "
      >
        <div>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="getnextdata(1)">查询</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button
            type="primary"
            @click="addproject"
            v-hasPermi="['filemanager.project.add']"
            >新增</el-button
          >
        </div>
      </div>
    </div>

    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; height: 70vh"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="date" label="区域" width="80">
          <template #default="scope">
            <dict-tag :options="sys_area" :value="scope.row.area" />
          </template>
        </el-table-column>
        <el-table-column prop="ecode" label="电子档案编号" width="190">
          <template #default="scope">
            <div style="display: flex; justify-content: space-between">
              <span>{{ scope.row.ecode }}</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="
                  scope.row.ext1 != null ? JSON.parse(scope.row.ext1).projectreson : ''
                "
                placement="top-start"
                :disabled="scope.row.status != '4'"
              >
                <el-tag
                  :type="`${
                    scope.row.status == '4'
                      ? 'danger'
                      : scope.row.status == '3'
                      ? 'success'
                      : 'warning'
                  }`"
                  v-if="scope.row.status != '1'"
                >
                  <dict-tag :options="sys_project_status" :value="scope.row.status"
                /></el-tag>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="qiuquan" label="丘权号" width="160" />
        <el-table-column prop="buildUnit" label="建设单位" width="200" />
        <el-table-column prop="achievementDate" label="建档日期" width="110" />
        <el-table-column prop="saveAddr" label="存储位置" width="100" />
        <el-table-column prop="addr" label="地址" width="180" />
        <el-table-column prop="remark" label="备注" width="180" />
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <div
              style="
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                align-content: center;
                flex-direction: row;
              "
            >
              <div v-if="scope.row.status == '3' || scope.row.status == '4'">
                <el-button
                  type="text"
                  size="small"
                  @click="updatecurrent(scope.row.id, 2)"
                  >提交</el-button
                >
              </div>
              <div
                v-if="scope.row.status != '2'"
                v-hasPermi="['filemanager.project.edit']"
              >
                <el-button type="text" size="small" @click="editproject(scope.row)"
                  >编辑</el-button
                >
              </div>

              <div v-hasPermi="['filemanager.project.remove']">
                <el-popconfirm
                  width="220"
                  title="是否删除项目(项目下的文件也会一并删除)?"
                  @confirm="deleteitem(scope.row.id)"
                >
                  <template #reference>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
              </div>
              <div>
                <el-button type="text" size="small" @click="lookfiles(scope.row)">文件查看</el-button>
              </div>
              <div v-if="scope.row.status == '2'">
                <el-button
                  type="text"
                  size="small"
                  v-hasPermi="['filemanager.project.sh']"
                  @click="shproject(scope.row)"
                  >审核</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="totalnum"
          class="mt-4"
          @current-change="getnextdata"
        />
      </div>
    </div>
    <el-dialog v-model="pdfviewshow" :title="`文件预览`" width="60vw" >


        <div style="position: relative;">
           <el-affix :offset="400" style="width: 100%;">
              <div style="position: absolute;">
                 <el-button type="primary" icon="DArrowLeft"></el-button>
              </div>
              <div style="float: right;">
                 <el-button type="primary" icon="DArrowRight"></el-button>
              </div>
           </el-affix>
            <pdfview :src="currentfile.url"></pdfview>



        </div>
        <!-- <div><el-affix :offset="120" position="bottom"><el-button type="text" icon="DArrowRight"></el-button></el-affix></div>
      </div> -->

     <template #footer>
        <div class="dialog-footer">
          <el-button @click="pdfviewshow = false">关闭</el-button>

          <el-button type="primary" @click="downloadfile">
            下载
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="shvisable" :title="`项目审核`" width="40vw">
      <el-input
        v-model="projectreson"
        type="textarea"
        :autosize="{ minRows: 4 }"
        placeholder="请输入意见"
      />

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="danger" @click="updatecurrent(currentitem.id, 4)">
            不通过
          </el-button>
          <el-button type="primary" @click="updatecurrent(currentitem.id, 1)">
            通过
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible"
      :title="`${currenttype == 1 ? '新增' : '编辑'}项目`"
      width="40vw"
    >
      <el-form :model="currentitem" label-width="auto">
        <el-form-item label="区域：" required>
          <el-select v-model="currentitem.area" clearable placeholder="请选择">
            <el-option
              v-for="item in sys_area"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电子档案编号：" required>
          <el-input v-model="currentitem.ecode" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="丘权号：" required>
          <el-input v-model="currentitem.qiuquan" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="建设单位：" required>
          <el-input v-model="currentitem.buildUnit" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="建档日期：">
          <el-input v-model="currentitem.achievementDate" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="存储位置：" required>
          <el-input v-model="currentitem.saveAddr" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="地址：">
          <el-input type="textarea" v-model="currentitem.addr" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="备注：">
          <el-input type="textarea" v-model="currentitem.remark" placeholder="请输入" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savecurrent"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>

     <el-drawer
    v-model="drawer"
    :title="`${currentitem.ecode} 文件列表查看`"
    :direction="'rtl'"
    :before-close="handleClose" size="50%"
  >
    <div style="position: absolute;right: 20px;bottom: 20px;">
    <el-button type="primary" icon="UploadFilled"  @click="uploadfile">上传文件</el-button>
    </div>

    <el-table style="width: 100%;" :data="filelist">
        <el-table-column prop="originalName" label="文件名称" width="300">
          <template #default="scope">
            <div style="display: flex;">
               <img style="width: 25px;height:25px" :src="gettypeicon(scope.row.fileSuffix)"/>
               <div>{{ scope.row.originalName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="文件大小" width="180">
           <template #default="scope">
              {{ scope.row.size >1024 ? scope.row.size>1024*1024?(scope.row.size / 1024/1024).toFixed(2) + ' MB' :(scope.row.size / 1024).toFixed(2) + ' KB' : scope.row.size + ' B' }}
           </template>
        </el-table-column>
         <el-table-column prop="createTime" label="上传时间" width="180">
        </el-table-column>
        <el-table-column prop="date" label="操作" >
          <template #default="scope">
             <div style="display: flex;gap:5px">
               <div> <el-button type="text" >删除</el-button></div>
               <div> <el-button type="text" @click="filepreview(scope.row)" >预览</el-button></div>
               <div> <el-button type="text" >下载</el-button></div>
             </div>

          </template>
        </el-table-column>
    </el-table>
  </el-drawer>

   <el-dialog  v-model="showfileuplaod"
      :title="`上传文件`" :before-close="handleCloseupload"
      width="40vw">

    <fileUpload :fileSize="100" v-model="uploadfilelist"  :suportdrag="true" :defaultbtn="false">
       <template #default>
          <div>
             <el-icon class="el-icon--upload"><upload-filled /></el-icon>
             <div class="el-upload__text">
               拖动文件到这边 或 <em>点击这边</em>
             </div>
          </div>
       </template>
    </fileUpload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveuploadfiles"> 保存 </el-button>
        </div>
      </template>
      </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { delOss } from "@/api/system/oss";
import {
  listArchives,
  addArchives,
  updateArchives,
  delArchives,
  getArchive_files,
  saveArchive_files
} from "@/api/archives/index";
import _ from "lodash";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_area, sys_project_status } = toRefs<any>(
  proxy?.useDict("sys_area", "sys_project_status")
);
const drawer = ref(false)
const shvisable = ref(false);
const pdfviewshow = ref(false);

const searchForm = ref({
  area: "",
  qiuquan: "",
  buildUnit: "",
  addr: "",
  saveAddr: "",
});

const reset = () => {
  searchForm.value = {
    area: "",
    qiuquan: "",
    buildUnit: "",
    addr: "",
    saveAddr: "",
  };
  getnextdata(1);
};

const tableData = ref([]);

const filelist = ref([]);

const currentpage = ref(0);
const totalnum = ref(0);

const getnextdata = (page: number) => {
  currentpage.value = page;
  listArchives({ pageSize: 10, pageNum: page, ...searchForm.value }).then((res) => {
    tableData.value = res.rows;
    totalnum.value = res.total;
  });
};
onMounted(() => {
  getnextdata(1);
})


const dialogVisible = ref(false);
const currenttype = ref(1);
const currentitem = ref({
  id: "",
  area: "",
  qiuquan: "",
  buildUnit: "",
  addr: "",
  community: "",
  achievementDate: "",
  saveAddr: "",
  remark: "",
  ecode: "",
});

const addproject = () => {
  currentitem.value = {
    id: "",
    area: "",
    qiuquan: "",
    buildUnit: "",
    addr: "",
    community: "",
    achievementDate: "",
    saveAddr: "",
    remark: "",
    ecode: "",
  };
  dialogVisible.value = true;
  currenttype.value = 1;
};

const savecurrent = () => {
  if (currentitem.value.id == "") {
    // 新增
    var dd = _.cloneDeep(currentitem.value);
    delete dd.id;
    addArchives(dd)
      .then((res) => {
        dialogVisible.value = false;
        ElMessage.success("新增成功");
        getnextdata(1);
      })
      .catch((e) => {
        // dialogVisible.value = false;
        // console.log(e);
      });
  } else {
    // 编辑
    updateArchives(currentitem.value)
      .then((res) => {
        dialogVisible.value = false;
        ElMessage.success("编辑成功");
        getnextdata(1);
      })
      .catch((e) => {
        dialogVisible.value = false;
        console.log(e);
      });
  }
};

const editproject = (item) => {
  dialogVisible.value = true;
  currenttype.value = 2;
  currentitem.value = item;
};

const projectreson = ref("");

const updatecurrent = (id, status: number) => {
  if (status == 4 && projectreson.value == "") {
    ElMessage.warning("请输入不同意原因");
    return;
  }
  updateArchives({
    id: id,
    status: status + "",
    ...(status == 4
      ? { ext1: JSON.stringify({ projectreson: projectreson.value }) }
      : {}),
  }).then((res) => {
    ElMessage.success("保存成功");
    shvisable.value = false;
    getnextdata(1);
  });
};

const shproject = (item) => {
  shvisable.value = true;
  currentitem.value = item;
};

const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
  if (row.status == "2") {
    return "warning-row";
  } else if (row.status == "3") {
    return "success-row";
  } else if (row.status == "4") {
    return "danger-row";
  }
  return "";
};

const deleteitem = (id: any) => {
  delArchives(id).then((res) => {
    ElMessage.success("删除成功");
    getnextdata(1);
  });
};

const lookfiles = (item) => {
  currentitem.value = item;
  drawer.value = true;

  getArchive_files(item.id).then((res) => {
    filelist.value = res.data
  });
};
const showfileuplaod = ref(false);
const uploadfilelist = ref("");
const uploadfile = () => {
  uploadfilelist.value = "";
  showfileuplaod.value = true;
};
const saveuploadfiles = () => {
  saveArchive_files(currentitem.value.id, uploadfilelist.value).then(res => {
    ElMessage.success("保存成功");
    showfileuplaod.value = false;
    getArchive_files(currentitem.value.id).then((res) => {
    filelist.value = res.data
  });
  })

}

const handleCloseupload = (done) => {
    ElMessageBox.confirm('确定取消文件上传?')
      .then(() => {
        try {
          uploadfilelist.value.split(",").map(i => {
            // delOss(i.id)
            console.log(i)
          })
        } catch (error) {}
      done()
    })
      .catch((e) => {
       console.log(e)
      // catch error
    })
};

const handleClose = (done) => {
    ElMessageBox.confirm('确定关闭文件查看?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
};

const currentfile = ref();

const filepreview = (file) => {
  currentfile.value = file;
  pdfviewshow.value = true;
}
const downloadfile = (file) => {

}



import txticon from '@/assets/icons/svg/txt.svg'
import picicon from '@/assets/icons/svg/pic.svg'
import pdficon from '@/assets/icons/svg/pdf1.svg'
import docicon from '@/assets/icons/svg/doc.svg'
import xlsicon from '@/assets/icons/svg/xls.svg'
import ppticon from '@/assets/icons/svg/ppt.svg'
import mp4icon from '@/assets/icons/svg/mp4.svg'
import cadicon from '@/assets/icons/svg/cad.svg'
import unknownicon from '@/assets/icons/svg/unknown.svg'

const gettypeicon = (type) => {
  if (type.indexOf('png') != -1 || type.indexOf('jp') != -1) {
    return picicon;
  }
  if (type.indexOf('ppt') != -1 ) {
    return ppticon;
  }
   if (type.indexOf('xl') != -1 ) {
    return xlsicon;
   }
   if (type.indexOf('doc') != -1 ) {
    return docicon;
   }
  if (type.indexOf('txt') != -1 ) {
    return txticon;
  }
  if (type.indexOf('ca') != -1 ) {
    return cadicon;
  }
  if (type.indexOf('mp4') != -1 ) {
    return mp4icon;
  }
  if (type.indexOf('pdf') != -1 ) {
    return pdficon;
  }
  return unknownicon
}

</script>

<style type="scss" scoped>
.bodycontent {
  padding: 10px 15px;
  .sheard {
    position: relative;
    padding: 10px 0px;
    .searchheard {
      display: flex;
      align-items: center;
      .item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        font-size: 14px;
      }
    }
  }
  .formitem {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 14px;
  }
}
</style>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-table .danger-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-9);
}
</style>