增加模板

src/views/biz/template/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="模板类型" prop="tmplType">
-       <!-- <el-select v-model="queryParams.tmplType" placeholder="请选择模板类型" clearable>
+        <!-- <el-select v-model="queryParams.tmplType" placeholder="请选择模板类型" clearable>
           <el-option
             v-for="dict in ${dictType}"
             :key="dict.value"
@@ -10,54 +10,14 @@
             :value="dict.value"
           />
         </el-select> -->
+				<el-select v-model="queryParams.tmplType" placeholder="请选择模板类型" clearable>
+				  <el-option value="word" label="文档"/>
+				  <el-option value="excel" label="表格"/>
+				  <el-option value="ppt" label="演示"/>
+				</el-select>
       </el-form-item>
       <el-form-item label="模板名称" prop="tmplName">
-        <el-input
-          v-model="queryParams.tmplName"
-          placeholder="请输入模板名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建人" prop="createBy">
-        <el-input
-          v-model="queryParams.createBy"
-          placeholder="请输入创建人"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker clearable
-          v-model="queryParams.createTime"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="请选择创建时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="更新人" prop="updateBy">
-        <el-input
-          v-model="queryParams.updateBy"
-          placeholder="请输入更新人"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="更新时间" prop="updateTime">
-        <el-date-picker clearable
-          v-model="queryParams.updateTime"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="请选择更新时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input
-          v-model="queryParams.remark"
-          placeholder="请输入备注"
-          clearable
-          @keyup.enter="handleQuery"
-        />
+        <el-input v-model="queryParams.tmplName" placeholder="请输入模板名称" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -67,13 +27,9 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['biz:template:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['biz:template:add']">
+          新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -83,7 +39,9 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['biz:template:edit']"
-        >修改</el-button>
+        >
+          修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -93,16 +51,14 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['biz:template:remove']"
-        >删除</el-button>
+        >
+          删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['biz:template:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['biz:template:export']">
+          导出
+        </el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -127,14 +83,33 @@
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:template:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['biz:template:remove']">删除</el-button>
+          <el-button
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['biz:template:edit']"
+          >
+            修改
+          </el-button>
+          <el-button link type="primary" icon="Open" @click="handleOpen(scope.row)" v-hasPermi="['biz:template:edit']">
+            打开
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['biz:template:remove']"
+          >
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       v-model:page="queryParams.pageNum"
       v-model:limit="queryParams.pageSize"
@@ -145,14 +120,11 @@
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form ref="templateRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="模板类型" prop="tmplType">
-          <!-- <el-select v-model="form.tmplType" placeholder="请选择模板类型">
-            <el-option
-              v-for="dict in ${dictType}"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
-          </el-select> -->
+          <el-select v-model="form.tmplType" placeholder="请选择模板类型">
+           <el-option value="word" label="文档"/>
+           <el-option value="excel" label="表格"/>
+           <el-option value="ppt" label="演示"/>
+          </el-select>
         </el-form-item>
         <el-form-item label="模板名称" prop="tmplName">
           <el-input v-model="form.tmplName" placeholder="请输入模板名称" />
@@ -172,19 +144,19 @@
 </template>
 
 <script setup name="Template">
-    import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/biz/template";
+import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from '@/api/biz/template'
+import jjtOnlyOffice from '@/components/OnlyOffice/index.vue'
+const { proxy } = getCurrentInstance()
 
-    const { proxy } = getCurrentInstance();
-
-const templateList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
+const templateList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref('')
 
 const data = reactive({
   form: {},
@@ -199,26 +171,25 @@ const data = reactive({
     updateTime: null,
     remark: null
   },
-  rules: {
-  }
-});
+  rules: {}
+})
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams, form, rules } = toRefs(data)
 
 /** 查询文档模板列表 */
 function getList() {
-  loading.value = true;
-  listTemplate(queryParams.value).then(response => {
-    templateList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
+  loading.value = true
+  listTemplate(queryParams.value).then((response) => {
+    templateList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
 }
 
 // 取消按钮
 function cancel() {
-  open.value = false;
-  reset();
+  open.value = false
+  reset()
 }
 
 // 表单重置
@@ -232,85 +203,136 @@ function reset() {
     updateBy: null,
     updateTime: null,
     remark: null
-  };
-  proxy.resetForm("templateRef");
+  }
+  proxy.resetForm('templateRef')
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
+  queryParams.value.pageNum = 1
+  getList()
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
+  proxy.resetForm('queryRef')
+  handleQuery()
 }
 
 // 多选框选中数据
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.tmplId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
+  ids.value = selection.map((item) => item.tmplId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
 }
 
 /** 新增按钮操作 */
 function handleAdd() {
-  reset();
-  open.value = true;
-  title.value = "添加文档模板";
+  reset()
+  open.value = true
+  title.value = '添加文档模板'
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  reset();
+  reset()
   const _tmplId = row.tmplId || ids.value
-  getTemplate(_tmplId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改文档模板";
-  });
+  getTemplate(_tmplId).then((response) => {
+    form.value = response.data
+    open.value = true
+    title.value = '修改文档模板'
+  })
+}
+
+function handleOpen(row) {
+  // console.log('isEdit',isEdit);
+  let option = ref({
+    key: '',
+    url: '', //在线文档地址
+    isEdit: props.onlyView, //是否允许编辑
+    fileType: '', //文件扩展名
+    title: '', //文件标题
+    user: {
+      id: null, //用户ID
+      name: '' //用户姓名
+    },
+    userdata: '',
+    editUrl: '' //回调地址
+  })
+	
+  option.value.isEdit = true
+  option.value.isCopy = true
+  option.value.url = `${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/view/${row.fileId}`
+  option.value.title = row.tmplName
+  option.value.key = row.fileId
+  switch (row.tmplType) {
+    case 'word':
+      option.value.fileType = 'docx'
+      break
+    case 'excel':
+      option.value.fileType = 'xlsx'
+      break
+    case 'ppt':
+      option.value.fileType = 'pptx'
+      break
+  }
+
+  option.value.editUrl = `${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/only-office/tmpl/callback/${
+    row.tmplId
+  }?name=${useUserStore().uname}`
+  // option.value.editUrl = `http://8.142.173.95:19527/only-office/callback/${obj.docId}?name=${useUserStore().uname}`;
+  option.value.user = {
+    id: useUserStore().uid, //用户ID
+    name: useUserStore().uname //用户姓名
+  }
 }
 
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["templateRef"].validate(valid => {
+  proxy.$refs['templateRef'].validate((valid) => {
     if (valid) {
       if (form.value.tmplId != null) {
-        updateTemplate(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
+        updateTemplate(form.value).then((response) => {
+          proxy.$modal.msgSuccess('修改成功')
+          open.value = false
+          getList()
+        })
       } else {
-        addTemplate(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
+        addTemplate(form.value).then((response) => {
+          proxy.$modal.msgSuccess('新增成功')
+          open.value = false
+          getList()
+        })
       }
     }
-  });
+  })
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
-  const _tmplIds = row.tmplId || ids.value;
-  proxy.$modal.confirm('是否确认删除文档模板编号为"' + _tmplIds + '"的数据项？').then(function() {
-    return delTemplate(_tmplIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+  const _tmplIds = row.tmplId || ids.value
+  proxy.$modal
+    .confirm('是否确认删除文档模板编号为"' + _tmplIds + '"的数据项？')
+    .then(function () {
+      return delTemplate(_tmplIds)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+    .catch(() => {})
 }
 
 /** 导出按钮操作 */
 function handleExport() {
-  proxy.download('biz/template/export', {
-    ...queryParams.value
-  }, `template_${new Date().getTime()}.xlsx`)
+  proxy.download(
+    'biz/template/export',
+    {
+      ...queryParams.value
+    },
+    `template_${new Date().getTime()}.xlsx`
+  )
 }
 
-getList();
+getList()
 </script>