|
@@ -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);
|