|
@@ -32,10 +32,10 @@
|
|
|
<el-button @click="lookTep(row)" text type="primary"
|
|
|
>查看</el-button
|
|
|
>
|
|
|
- <el-button @click="editTep(row, index, done)" text type="primary"
|
|
|
+ <el-button @click="editTep(row)" text type="primary"
|
|
|
>编辑</el-button
|
|
|
>
|
|
|
- <el-button @click="deleteTep(row, index, done)" text type="primary"
|
|
|
+ <el-button @click="deleteTep(row)" text type="primary"
|
|
|
>删除</el-button
|
|
|
>
|
|
|
</template>
|
|
@@ -51,7 +51,7 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="form" v-if="options.edit">
|
|
|
- <div class="title">新建模版</div>
|
|
|
+ <div class="title">{{ !operaEditStatus ? "新建" : "编辑" }}模版</div>
|
|
|
<el-form
|
|
|
ref="formRef"
|
|
|
:model="formVlaue"
|
|
@@ -63,29 +63,54 @@
|
|
|
<el-input v-model="formVlaue.formName" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="表格类型" prop="formType">
|
|
|
- <el-input v-model="formVlaue.formType" :disabled="true" />
|
|
|
+ <el-select
|
|
|
+ v-model="formVlaue.formType"
|
|
|
+ placeholder="请选择表格类型"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in dicts.excel_type"
|
|
|
+ :key="index"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="启用状态" prop="state">
|
|
|
<el-select v-model="formVlaue.state" placeholder="请选择状态">
|
|
|
- <el-option label="禁用" :value="0" />
|
|
|
- <el-option label="启用" :value="1" />
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in dicts.excel_states"
|
|
|
+ :key="index"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<div class="btns">
|
|
|
- <el-button type="primary" @click="submitForm(formRef)">
|
|
|
+ <el-button
|
|
|
+ v-if="!operaEditStatus"
|
|
|
+ type="primary"
|
|
|
+ @click="submitForm(formRef)"
|
|
|
+ >
|
|
|
创 建
|
|
|
</el-button>
|
|
|
- <el-button @click="resetForm(formRef)">重 置</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="operaEditStatus"
|
|
|
+ type="primary"
|
|
|
+ @click="updateExForm(formRef)"
|
|
|
+ >
|
|
|
+ 更 新
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="!operaEditStatus" @click="resetForm(formRef)"
|
|
|
+ >重 置</el-button
|
|
|
+ >
|
|
|
<el-button type="primary" @click="resetData"> 取 消 </el-button>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<div class="form" v-else>
|
|
|
- <el-button type="primary" @click="excelStatus = false">
|
|
|
- 返 回
|
|
|
- </el-button>
|
|
|
+ <el-button type="primary" @click="resetData"> 返 回 </el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -101,24 +126,29 @@ import {
|
|
|
getInfo,
|
|
|
updateExcel,
|
|
|
} from "@/api/excel";
|
|
|
-import dictDataUtil from "@/common/configs/dictDataUtil";
|
|
|
import ExcelView from "@/components/ExcelView/index.vue";
|
|
|
+import { useDictionaryStore } from "@/store";
|
|
|
+const { dicts } = useDictionaryStore();
|
|
|
//初始化页面数据
|
|
|
const resetData = () => {
|
|
|
+ excelViewRef.value.saveCellData();
|
|
|
excelViewRef.value.reset();
|
|
|
excelKey.value = excelKey.value + 1;
|
|
|
options.value = {
|
|
|
opreaState: true,
|
|
|
in: true,
|
|
|
out: true,
|
|
|
- confirm: false,
|
|
|
print: true,
|
|
|
- //编辑状态 false:为查看状态
|
|
|
edit: true,
|
|
|
};
|
|
|
exceldata.value = null;
|
|
|
- excelStatus.value = false;
|
|
|
+ selectId.value = null;
|
|
|
+ operaEditStatus.value = false;
|
|
|
resetForm(formRef.value);
|
|
|
+ formVlaue.formType = null;
|
|
|
+ formVlaue.formName = null;
|
|
|
+ formVlaue.state = null;
|
|
|
+ excelStatus.value = false;
|
|
|
};
|
|
|
// 数据字典相关
|
|
|
|
|
@@ -139,7 +169,6 @@ const {
|
|
|
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
|
|
|
|
|
|
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
|
|
|
-const router = useRouter?.();
|
|
|
|
|
|
// 设置表格列或者其他自定义的option
|
|
|
option.value = Object.assign(option.value, {
|
|
@@ -153,7 +182,8 @@ option.value = Object.assign(option.value, {
|
|
|
{
|
|
|
label: "表格名称",
|
|
|
prop: "formName",
|
|
|
-
|
|
|
+ headerAlign: "center",
|
|
|
+ align: "center",
|
|
|
search: true,
|
|
|
overHidden: true,
|
|
|
rules: [
|
|
@@ -167,54 +197,88 @@ option.value = Object.assign(option.value, {
|
|
|
{
|
|
|
label: "表格类型",
|
|
|
slot: true,
|
|
|
+ search: true,
|
|
|
headerAlign: "center",
|
|
|
+ align: "center",
|
|
|
prop: "formType",
|
|
|
-
|
|
|
addDisplay: false,
|
|
|
+ dicData: dicts.excel_type,
|
|
|
+ props: { label: "dictLabel", value: "dictValue" },
|
|
|
},
|
|
|
{
|
|
|
label: "表格状态",
|
|
|
slot: true,
|
|
|
+ search: true,
|
|
|
headerAlign: "center",
|
|
|
+ align: "center",
|
|
|
prop: "state",
|
|
|
addDisplay: false,
|
|
|
+ dicData: dicts.excel_states,
|
|
|
+ props: { label: "dictLabel", value: "dictValue" },
|
|
|
},
|
|
|
{
|
|
|
label: "修改时间",
|
|
|
slot: true,
|
|
|
headerAlign: "center",
|
|
|
+ align: "center",
|
|
|
prop: "updated",
|
|
|
-
|
|
|
addDisplay: false,
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
+// 存放操作表格相关业务代码
|
|
|
const useAddTemplateHook = () => {
|
|
|
+ //excelView 组件实例
|
|
|
const excelViewRef = ref(null);
|
|
|
+ //表格配置项
|
|
|
const options = ref({
|
|
|
+ //头部操作区域
|
|
|
opreaState: true,
|
|
|
+ //导入按钮展示
|
|
|
in: true,
|
|
|
+ //导出按钮展示
|
|
|
out: true,
|
|
|
- confirm: false,
|
|
|
print: true,
|
|
|
//编辑状态 false:为查看状态
|
|
|
edit: true,
|
|
|
+ //当前操作表格名称
|
|
|
+ inName: "",
|
|
|
});
|
|
|
+ //双向绑定表格data变量
|
|
|
const exceldata = ref(null);
|
|
|
+ //控制表格组件展示界面变量(包括表格展示页面和操作页面)
|
|
|
const excelStatus = ref(false);
|
|
|
//新增模版
|
|
|
const addTemplate = () => {
|
|
|
excelStatus.value = true;
|
|
|
};
|
|
|
//查看
|
|
|
- const lookTep = (row:any) => {
|
|
|
+ const lookTep = (row: any) => {
|
|
|
+ options.value.edit = false;
|
|
|
exceldata.value = JSON.parse(row.excelData);
|
|
|
excelStatus.value = true;
|
|
|
};
|
|
|
//编辑
|
|
|
- const editTep = () => {};
|
|
|
+ const editTep = (row: any) => {
|
|
|
+ options.value.inName = row.formName;
|
|
|
+ exceldata.value = JSON.parse(row.excelData);
|
|
|
+ formVlaue.formType = row.formType;
|
|
|
+ formVlaue.formName = row.formName;
|
|
|
+ formVlaue.state = row.state;
|
|
|
+ selectId.value = row.id;
|
|
|
+ operaEditStatus.value = true;
|
|
|
+ excelStatus.value = true;
|
|
|
+ };
|
|
|
//删除
|
|
|
- const deleteTep = () => {};
|
|
|
+ const deleteTep = async (row: any) => {
|
|
|
+ const { data, code } = await delExcel({
|
|
|
+ id: row.id,
|
|
|
+ });
|
|
|
+ if (code == "200") {
|
|
|
+ ElMessage.success("删除成功!");
|
|
|
+ dataEditList();
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
//获取组件内实时数据赋值到外层
|
|
|
const confirm = (data: any) => {
|
|
@@ -244,9 +308,17 @@ const {
|
|
|
deleteTep,
|
|
|
} = useAddTemplateHook();
|
|
|
const useFormHook = () => {
|
|
|
+ //KEY告知组件刷新
|
|
|
const excelKey = ref(1);
|
|
|
- const formVlaue = reactive({ formType: "普通", formName: "", state: 0 });
|
|
|
+ //表单data
|
|
|
+ const formVlaue = reactive({ formType: null, formName: null, state: null });
|
|
|
+ //表单是否为编辑状态变量
|
|
|
+ const operaEditStatus = ref(false);
|
|
|
+ //选中的行id
|
|
|
+ const selectId = ref(null);
|
|
|
+ //表单ref实例
|
|
|
const formRef = ref(null);
|
|
|
+ //表单校验规则
|
|
|
const rules = reactive({
|
|
|
formName: [
|
|
|
{
|
|
@@ -267,6 +339,7 @@ const useFormHook = () => {
|
|
|
},
|
|
|
],
|
|
|
});
|
|
|
+ //新增模版
|
|
|
const submitForm = async (formEl: any) => {
|
|
|
//@ts-ignore;
|
|
|
excelViewRef.value.confirm();
|
|
@@ -280,23 +353,64 @@ const useFormHook = () => {
|
|
|
});
|
|
|
if (code == "200") {
|
|
|
ElMessage.success("添加成功!");
|
|
|
- exceldata.value = null;
|
|
|
- excelStatus.value = false;
|
|
|
+ resetData();
|
|
|
dataEditList();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
-
|
|
|
+ //更新行内信息
|
|
|
+ const updateExForm = async (formEl: any) => {
|
|
|
+ //@ts-ignore;
|
|
|
+ excelViewRef.value.saveCellData();
|
|
|
+ //@ts-ignore;
|
|
|
+ excelViewRef.value.confirm();
|
|
|
+ if (exceldata.value == null) return ElMessage.error("请提供表格数据!");
|
|
|
+ if (!formEl) return;
|
|
|
+ await formEl.validate(async (valid: any, fields: any) => {
|
|
|
+ if (valid) {
|
|
|
+ const { data, code } = await updateExcel({
|
|
|
+ ...formVlaue,
|
|
|
+ excelData: exceldata.value,
|
|
|
+ id: selectId.value,
|
|
|
+ });
|
|
|
+ if (code == "200") {
|
|
|
+ ElMessage.success("修改成功!");
|
|
|
+ resetData();
|
|
|
+ dataEditList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ //表达数据重置
|
|
|
const resetForm = (formEl: any) => {
|
|
|
if (!formEl) return;
|
|
|
formEl.resetFields();
|
|
|
};
|
|
|
- return { formVlaue, formRef, rules, excelKey, submitForm, resetForm };
|
|
|
+ return {
|
|
|
+ formVlaue,
|
|
|
+ formRef,
|
|
|
+ rules,
|
|
|
+ selectId,
|
|
|
+ excelKey,
|
|
|
+ operaEditStatus,
|
|
|
+ submitForm,
|
|
|
+ resetForm,
|
|
|
+ updateExForm,
|
|
|
+ };
|
|
|
};
|
|
|
|
|
|
-const { formVlaue, formRef, rules, excelKey, submitForm, resetForm } =
|
|
|
- useFormHook();
|
|
|
+const {
|
|
|
+ formVlaue,
|
|
|
+ formRef,
|
|
|
+ rules,
|
|
|
+ selectId,
|
|
|
+ excelKey,
|
|
|
+ operaEditStatus,
|
|
|
+ submitForm,
|
|
|
+ resetForm,
|
|
|
+ updateExForm,
|
|
|
+} = useFormHook();
|
|
|
|
|
|
onMounted?.(() => {
|
|
|
dataEditList();
|