feature/表单模板增加区域配置

src/api/excel/index.ts

@@ -62,3 +62,27 @@ export function deleteTemp(data: any) {
     data,
   });
 }
+//位置坐标列表获取
+export function getSettingsData(data: any) {
+  return request({
+    url: "/api/v1/excelForm/settingPage",
+    method: "post",
+    data,
+  });
+}
+//位置坐标列表新增
+export function addSettingsData(data: any) {
+  return request({
+    url: "/api/v1/excelForm/addSetting",
+    method: "post",
+    data,
+  });
+}
+//位置坐标列表删除
+export function deleteSettingsData(data: any) {
+  return request({
+    url: "/api/v1/excelForm/removeSetting",
+    method: "post",
+    data,
+  });
+}

src/components/ExcelView/index.vue

@@ -164,6 +164,9 @@ const confirm = () => emits("confirm", luckysheet.getAllSheets());
 const reset = () => {
   luckysheet.destroy();
 };
+const getRangeAxis = () => {
+  return luckysheet.getRangeAxis();
+};
 //保存当次cell数据
 const saveCellData = () => {
   const enter = () => {
@@ -184,7 +187,7 @@ const saveCellData = () => {
   };
   enter();
 };
-defineExpose({ confirm, reset, saveCellData });
+defineExpose({ confirm, reset, saveCellData, getRangeAxis });
 onMounted(() => {
   if (props.data == null) {
     inName.value = "表格模版";

src/views/base/excel/template/index.vue

@@ -53,7 +53,7 @@
         </avue-crud>
       </div>
       <div v-if="excelStatus" :key="excelKey" class="editView">
-        <div class="exView">
+        <div class="exView" @mouseup="showPosition">
           <ExcelView
             ref="excelViewRef"
             :option="options"
@@ -62,7 +62,6 @@
           />
         </div>
         <div class="form" v-if="options.edit">
-          <div class="title">{{ !operaEditStatus ? "新建" : "编辑" }}模版</div>
           <el-form
             ref="formRef"
             :model="formVlaue"
@@ -119,9 +118,112 @@
               </div>
             </el-form-item>
           </el-form>
+          <div class="add">
+            <div class="body">
+              <el-form
+                ref="formRef1"
+                :model="addForm"
+                :rules="addRules"
+                label-width="auto"
+                status-icon
+              >
+                <el-form-item label="数据名称" prop="paramName">
+                  <el-input v-model="addForm.paramName" />
+                </el-form-item>
+                <el-form-item label="同步坐标" prop="position">
+                  <el-input :disabled="true" v-model="addForm.position" />
+                </el-form-item>
+                <el-form-item>
+                  <div class="btns">
+                    <el-button
+                      :disabled="!operaEditStatus"
+                      type="primary"
+                      @click="creatAddForm()"
+                    >
+                      新增
+                    </el-button>
+                  </div>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+          <div class="table">
+            <el-table
+              id="table"
+              border
+              :data="settings"
+              style="width: 260px; max-height: 240px"
+            >
+              <el-table-column prop="paramName" label="名称" />
+              <el-table-column prop="position" label="坐标" />
+              <el-table-column label="操作" width="60">
+                <template #default="{ row }">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="deleteSettings(row.id)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="btns">
+            <el-button
+              :disabled="searchForm.pageNo == 1"
+              link
+              type="primary"
+              @click="deletePage"
+            >
+              上一页
+            </el-button>
+            <el-button
+              :disabled="
+                searchForm.totalPages == searchForm.pageNo ||
+                searchForm.totalPages == 0
+              "
+              link
+              type="primary"
+              @click="addPage"
+            >
+              下一页
+            </el-button>
+          </div>
         </div>
         <div class="form" v-else>
           <el-button type="primary" @click="resetData"> 返 回 </el-button>
+          <div class="table">
+            <el-table
+              border
+              :data="settings"
+              style="width: 260px; max-height: 240px"
+            >
+              <el-table-column prop="paramName" label="数据名称" />
+              <el-table-column prop="position" label="同步坐标" />
+            </el-table>
+            <div class="btns">
+              <el-button
+                :disabled="searchForm.pageNo == 1"
+                link
+                type="primary"
+                @click="deletePage"
+              >
+                上一页
+              </el-button>
+              <el-button
+                :disabled="
+                  searchForm.totalPages == searchForm.pageNo ||
+                  searchForm.totalPages == 0
+                "
+                link
+                type="primary"
+                @click="addPage"
+              >
+                下一页
+              </el-button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -136,14 +238,23 @@ import {
   delExcel,
   getInfo,
   updateExcel,
+  getSettingsData,
+  addSettingsData,
+  deleteSettingsData,
 } from "@/api/excel";
 import ExcelView from "@/components/ExcelView/index.vue";
 import { useDictionaryStore } from "@/store";
 const { dicts } = useDictionaryStore();
+// const tableData = ref([]);
+const showPosition = () => {
+  if (!excelStatus) return;
+  addForm.value.position = excelViewRef.value.getRangeAxis()[0];
+};
 //初始化页面数据
 const resetData = () => {
   excelViewRef.value.saveCellData();
   excelViewRef.value.reset();
+  resetAddForm();
   excelKey.value = excelKey.value + 1;
   options.value = {
     opreaState: true,
@@ -152,6 +263,7 @@ const resetData = () => {
     print: true,
     edit: true,
   };
+
   exceldata.value = null;
   selectId.value = null;
   operaEditStatus.value = false;
@@ -266,8 +378,10 @@ const useAddTemplateHook = () => {
   //查看
   const lookTep = (row: any) => {
     options.value.edit = false;
+    selectId.value = row.id;
     exceldata.value = JSON.parse(row.excelData);
     excelStatus.value = true;
+    getSettingData();
   };
   //编辑
   const editTep = (row: any) => {
@@ -279,6 +393,7 @@ const useAddTemplateHook = () => {
     selectId.value = row.id;
     operaEditStatus.value = true;
     excelStatus.value = true;
+    getSettingData();
   };
   //删除
   const deleteTep = async (row: any) => {
@@ -366,6 +481,7 @@ const useFormHook = () => {
           ElMessage.success("添加成功！");
           resetData();
           dataEditList();
+          editTep(data);
         }
       }
     });
@@ -384,6 +500,7 @@ const useFormHook = () => {
           ...formVlaue,
           excelData: exceldata.value,
           id: selectId.value,
+          settings: settings.value,
         });
         if (code == "200") {
           ElMessage.success("修改成功！");
@@ -422,12 +539,148 @@ const {
   resetForm,
   updateExForm,
 } = useFormHook();
+//表格新增 分页
+const useAddFormHook = () => {
+  const formRef1 = ref(null);
+  const settings = ref([]);
+  const searchForm = ref({
+    pageNo: 1,
+    pageSize: 5,
+    totalPages: 0,
+  });
+  const addForm = ref({
+    paramName: "",
+    position: "",
+  });
+  const addPage = () => {
+    searchForm.value.pageNo = searchForm.value.pageNo + 1;
+    getSettingData();
+  };
+  const deletePage = () => {
+    searchForm.value.pageNo = searchForm.value.pageNo - 1;
+    getSettingData();
+  };
+  const getSettingData = async () => {
+    const { data } = await getSettingsData({
+      excelFormId: selectId.value,
+      ...searchForm.value,
+    });
+    settings.value = data.records;
+    if (settings.value.length == 0 && searchForm.value.pageNo > 1) {
+      deletePage();
+    }
+    searchForm.value.totalPages = data.totalPages;
+  };
+  const addSettings = async () => {
+    const { data, code } = await addSettingsData({
+      excelFormId: selectId.value,
+      ...addForm.value,
+    });
+    if (code == "200") {
+      ElMessage.success("添加成功");
+      resetAddForm();
+      getSettingData();
+    }
+  };
+  const deleteSettings = async (id: any) => {
+    const { data, code } = await deleteSettingsData({ id: id });
+    if (code == "200") {
+      ElMessage.success("删除成功");
+      getSettingData();
+    }
+  };
+
+  const resetAddForm = () => {
+    addForm.value = {
+      paramName: "",
+      position: "",
+    };
+    searchForm.value = {
+      pageNo: 1,
+      pageSize: 5,
+      totalPages: 0,
+    };
+    settings.value = [];
+  };
+  const creatAddForm = async () => {
+    await formRef1.value.validate(async (valid: any, fields: any) => {
+      if (valid) {
+        addSettings();
+      }
+    });
+  };
+  const addRules = reactive({
+    paramName: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    position: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+  });
+  return {
+    formRef1,
+    addForm,
+    searchForm,
+    settings,
+    addRules,
+    creatAddForm,
+    resetAddForm,
+    getSettingData,
+    addSettings,
+    addPage,
+    deleteSettings,
+    deletePage,
+  };
+};
+
+const {
+  formRef1,
+  addForm,
+  searchForm,
+  settings,
+  addRules,
+  creatAddForm,
+  deletePage,
+  addPage,
+  resetAddForm,
+  getSettingData,
+  deleteSettings,
+} = useAddFormHook();
 
 onMounted?.(() => {
   dataEditList();
 });
 </script>
 <style lang="scss" scoped>
+.table {
+  width: 260px;
+  padding-top: 20px;
+}
+.btns {
+  width: 100%;
+  justify-content: center;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+.add {
+  height: 140px;
+  display: flex;
+  flex-direction: column;
+  .body {
+    display: flex;
+    flex: 1;
+  }
+}
+#table {
+  height: calc(100vh - 540px) !important;
+}
 .editView {
   width: 100%;
   height: calc(100vh - 140px);