123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895 |
- <template>
- <div class="mainContentBox">
- <div class="body">
- <div v-if="!excelStatus">
- <avue-crud
- ref="crudRef"
- v-model:search="search"
- v-model="form"
- :data="data"
- :option="option"
- v-model:page="page"
- @row-save="createRow"
- @row-update="updateRow"
- @row-del="deleteRow"
- @search-change="searchChange"
- @search-reset="resetChange"
- @size-change="dataList"
- @current-change="dataList"
- @selection-change="selectionChange"
- @row-dblclick="(row) => lookTep(row)"
- >
- <template #menu-left="{}">
- <el-button
- @click="addTemplate"
- class="ml-3"
- type="primary"
- icon="el-icon-plus"
- >
- 新 增
- </el-button>
- <el-button
- :disabled="toDeleteIds.length < 1"
- type="danger"
- icon="el-icon-delete"
- :size="size"
- @click="multipleDelete"
- >删除</el-button
- >
- </template>
- <!-- <template #menu="{ row, index, type }"> -->
- <!-- <el-button @click="lookTep(row)" text type="primary"
- >查看</el-button
- > -->
- <!-- <el-button @click="editTep(row)" text type="primary"
- >编辑</el-button
- > -->
- <!-- <el-popconfirm
- :visible="row.dialogVisible"
- title="您确认删除吗?"
- width="200"
- @cancel="row.dialogVisible = false"
- @confirm="deleteTep(row)"
- >
- <template #reference>
- <el-button @click="row.dialogVisible = true" text type="primary"
- >删除</el-button
- >
- </template>
- </el-popconfirm> -->
- <!-- </template> -->
- </avue-crud>
- </div>
- <div v-if="excelStatus" :key="excelKey" class="editView">
- <div class="exView" @mouseup="showPosition">
- <ExcelView
- ref="excelViewRef"
- :option="options"
- @confirm="confirm"
- v-model:data="exceldata"
- />
- </div>
- <div class="form" v-if="options.edit">
- <el-scrollbar>
- <el-form
- ref="formRef"
- :model="formVlaue"
- :rules="rules"
- label-width="auto"
- :show-message="false"
- status-icon
- >
- <el-form-item label="模版名称" prop="formName">
- <el-input v-model="formVlaue.formName" />
- </el-form-item>
- <el-form-item label="物料列表" prop="materialList">
- <el-select
- v-model="materialValue"
- multiple
- @remove-tag="setFormMaterial"
- ref="selectBom"
- placeholder="请选择物料"
- @click="startCreat"
- >
- <el-option
- v-for="item in formVlaue.materialList"
- :key="item"
- :label="item.materialName"
- :value="item.materialCode"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="启用状态" prop="state">
- <el-select v-model="formVlaue.state" placeholder="请选择状态">
- <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
- v-if="!operaEditStatus"
- type="primary"
- @click="submitForm(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 class="add">
- <div class="body">
- <el-form
- ref="formRef1"
- :model="addForm"
- :rules="addRules"
- label-width="auto"
- status-icon
- :show-message="false"
- style="width: 410px"
- >
- <el-form-item label="数据名称" prop="paramName">
- <el-select
- v-model="addForm.paramName"
- allow-create
- filterable
- default-first-option
- :reserve-keyword="false"
- >
- <el-option
- v-for="item in dicts.form_params"
- :key="item.dictLabel"
- :label="item.dictLabel"
- :value="item.dictValue"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="同步坐标" prop="position">
- <el-input :disabled="true" v-model="addForm.position" />
- </el-form-item>
- <el-form-item label="上限值" prop="up">
- <el-input v-model="addForm.up" />
- </el-form-item>
- <el-form-item label="下限值" prop="down">
- <el-input v-model="addForm.down" />
- </el-form-item>
- <el-form-item label="标准值" prop="standard">
- <el-input v-model="addForm.standard" />
- </el-form-item>
- <el-form-item label="数据来源" prop="source">
- <el-select v-model="addForm.source">
- <el-option label="手动" value="手动" selected />
- <el-option label="自动" value="自动" />
- </el-select>
- </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: 430px; max-height: 240px"
- >
- <el-table-column prop="paramName" label="名称" />
- <el-table-column prop="position" label="坐标" />
- <el-table-column prop="checkStr" width="60" label="上限值">
- <template #default="{ row }">
- <span>{{ row.up ? row.up : "-" }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="checkStr" width="60" label="下限值">
- <template #default="{ row }">
- <span>{{ row.down ? row.down : "-" }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="checkStr" width="60" label="标准值">
- <template #default="{ row }">
- <span>{{ row.standard ? row.standard : "-" }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="checkStr" width="60" label="数据来源">
- <template #default="{ row }">
- <span>{{
- row.checkStr ? JSON.parse(row.checkStr).source : "-"
- }}</span>
- </template>
- </el-table-column>
- <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> -->
- </el-scrollbar>
- </div>
- <div class="form" style="display: flex; justify-content: center" v-else>
- <el-button type="primary" @click="resetData"> 返 回 </el-button>
- <!-- <div class="table">
- <el-table
- border
- :data="settings"
- style="width: 450px; 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>
- <CommonTable
- ref="ctableRef"
- :key="ctableRefKey"
- tableTitle="物料添加"
- :multipleRow="multipleRow"
- tableType="MARTERIAL"
- @selected-sure="onSelectedFinish"
- />
- </div>
- </div>
- </template>
- <script setup>
- import { ref } from "vue";
- import { useCrud } from "@/hooks/userCrud";
- import {
- addExcel,
- delExcel,
- updateExcel,
- getSettingsData,
- addSettingsData,
- deleteSettingsData,
- } from "@/api/excel";
- import ExcelView from "@/components/ExcelView/index.vue";
- import { useDictionaryStore } from "@/store";
- const { dicts } = useDictionaryStore();
- const selectKey = ref(false);
- // const tableData = ref([]);
- const showPosition = () => {
- if (!excelStatus) return;
- addForm.value.position = excelViewRef.value.getRangeAxis()[0];
- };
- const multipleRow = ref(true);
- const ctableRef = ref(null);
- const ctableRefKey = ref(false);
- const selectBom = ref({});
- const startCreat = () => {
- selectBom.value.blur();
- ctableRef.value?.mergeOption({
- selection: true,
- reserveSelection: true,
- });
- ctableRef.value.startSelect();
- };
- const onSelectedFinish = (selectedValueList) => {
- formVlaue.value.materialList = [];
- selectedValueList.forEach((item, index) => {
- formVlaue.value.materialList.push({
- materialCode: item.materialCode,
- materialName: item.materialName,
- spec: item.spec,
- });
- });
- ctableRefKey.value = !ctableRefKey.value;
- selectKey.value = !selectKey.value;
- };
- const materialValue = ref([]);
- const setMaterialValue = () => {
- let array = [];
- for (let i = 0; i < formVlaue.value.materialList.length; i++) {
- array.push(formVlaue.value.materialList[i].materialCode);
- }
- materialValue.value = array;
- return array;
- };
- const setFormMaterial = () => {
- formVlaue.value.materialList = formVlaue.value.materialList.filter((item) => {
- const res = materialValue.value.includes(item.materialCode);
- return res;
- });
- };
- //初始化页面数据
- const resetData = () => {
- excelViewRef.value.saveCellData();
- excelViewRef.value.reset();
- resetAddForm();
- excelKey.value = excelKey.value + 1;
- options.value = {
- opreaState: true,
- in: true,
- out: true,
- print: true,
- edit: true,
- };
- exceldata.value = null;
- selectId.value = null;
- operaEditStatus.value = false;
- resetForm(formRef.value);
- formVlaue.value.materialList = [];
- formVlaue.value.formName = null;
- formVlaue.value.state = null;
- excelStatus.value = false;
- };
- // 数据字典相关
- // 传入一个url,后面不带/
- const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
- useCrud({
- src: "/api/v1/excelForm",
- });
- const {
- dataEditList,
- createRow,
- updateRow,
- deleteRow,
- searchChange,
- dataList,
- resetChange,
- } = Methords; //增删改查
- const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
- const crudRef = ref(null); //crudRef.value 获取avue-crud对象
- // 设置表格列或者其他自定义的option
- option.value = Object.assign(option.value, {
- selection: true,
- viewBtn: false,
- editBtn: false,
- delBtn: true,
- addBtn: false,
- menu: false,
- column: [
- {
- label: "模版名称",
- prop: "formName",
- headerAlign: "center",
- align: "center",
- search: true,
- overHidden: true,
- rules: [
- {
- required: true,
- message: "请填写图纸编号",
- trigger: "blur",
- },
- ],
- },
- {
- label: "物料编码",
- slot: true,
- search: true,
- headerAlign: "center",
- align: "center",
- prop: "materialCode",
- addDisplay: false,
- },
- {
- label: "物料名称",
- slot: true,
- search: true,
- headerAlign: "center",
- align: "center",
- prop: "materialName",
- addDisplay: false,
- },
- {
- label: "规格",
- slot: true,
- headerAlign: "center",
- align: "center",
- prop: "spec",
- addDisplay: false,
- },
- {
- 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,
- print: true,
- //编辑状态 false:为查看状态
- edit: true,
- //当前操作表格名称
- inName: "",
- });
- //双向绑定表格data变量
- const exceldata = ref(null);
- //控制表格组件展示界面变量(包括表格展示页面和操作页面)
- const excelStatus = ref(false);
- //新增模版
- const addTemplate = () => {
- excelStatus.value = true;
- };
- //查看
- const lookTep = (row) => {
- options.value.edit = false;
- selectId.value = row.id;
- exceldata.value = JSON.parse(row.excelData);
- excelStatus.value = true;
- getSettingData();
- };
- //编辑
- const editTep = (row) => {
- options.value.inName = row.formName;
- exceldata.value = JSON.parse(row.excelData);
- formVlaue.value.formName = row.formName;
- formVlaue.value.state = row.state;
- selectId.value = row.id;
- operaEditStatus.value = true;
- excelStatus.value = true;
- getSettingData();
- };
- //删除
- const deleteTep = async (row) => {
- const { data, code } = await delExcel({
- id: row.id,
- });
- if (code == "200") {
- ElMessage.success("删除成功!");
- dataEditList();
- }
- };
- //获取组件内实时数据赋值到外层
- const confirm = (data) => {
- exceldata.value = data;
- };
- return {
- excelStatus,
- options,
- addTemplate,
- confirm,
- exceldata,
- excelViewRef,
- lookTep,
- editTep,
- deleteTep,
- };
- };
- const {
- excelStatus,
- options,
- addTemplate,
- confirm,
- exceldata,
- excelViewRef,
- lookTep,
- editTep,
- deleteTep,
- } = useAddTemplateHook();
- const useFormHook = () => {
- //KEY告知组件刷新
- const excelKey = ref(1);
- //表单data
- const formVlaue = ref({
- formName: null,
- materialList: [],
- state: null,
- });
- //表单是否为编辑状态变量
- const operaEditStatus = ref(false);
- //选中的行id
- const selectId = ref(null);
- //表单ref实例
- const formRef = ref(null);
- //表单校验规则
- const rules = reactive({
- formName: [
- {
- required: true,
- trigger: "blur",
- },
- ],
- materialList: [
- {
- required: true,
- trigger: "blur",
- },
- ],
- state: [
- {
- required: true,
- trigger: "blur",
- },
- ],
- });
- //新增模版
- const submitForm = async (formEl) => {
- //@ts-ignore;
- excelViewRef.value.confirm();
- if (exceldata.value == null) return ElMessage.error("请提供表格数据!");
- if (!formEl) return;
- await formEl.validate(async (valid, fields) => {
- if (valid) {
- const { data, code } = await addExcel({
- ...formVlaue.value,
- excelData: exceldata.value,
- });
- if (code == "200") {
- ElMessage.success("添加成功!");
- resetData();
- dataEditList();
- }
- }
- });
- };
- //更新行内信息
- const updateExForm = async (formEl) => {
- //@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, fields) => {
- if (valid) {
- const { data, code } = await updateExcel({
- ...formVlaue.value,
- excelData: exceldata.value,
- id: selectId.value,
- settings: settings.value,
- });
- if (code == "200") {
- ElMessage.success("修改成功!");
- resetData();
- dataEditList();
- }
- }
- });
- };
- //表达数据重置
- const resetForm = (formEl) => {
- if (!formEl) return;
- formEl.resetFields();
- };
- return {
- formVlaue,
- formRef,
- rules,
- selectId,
- excelKey,
- operaEditStatus,
- submitForm,
- resetForm,
- updateExForm,
- };
- };
- const {
- formVlaue,
- formRef,
- rules,
- selectId,
- excelKey,
- operaEditStatus,
- submitForm,
- 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: "",
- up: "",
- down: "",
- standard: "",
- source: "手动",
- });
- 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;
- settings.value.forEach((item) => {
- if (item.checkStr) {
- item.up = JSON.parse(item.checkStr).up;
- item.down = JSON.parse(item.checkStr).down;
- item.standard = JSON.parse(item.checkStr).standard;
- item.source = JSON.parse(item.checkStr).source;
- }
- });
- if (settings.value.length == 0 && searchForm.value.pageNo > 1) {
- deletePage();
- }
- searchForm.value.totalPages = data.totalPages;
- };
- const addSettings = async () => {
- addForm.value.checkStr = JSON.stringify({
- up: addForm.value.up,
- down: addForm.value.down,
- standard: addForm.value.standard,
- source: addForm.value.source,
- });
- const { data, code } = await addSettingsData({
- excelFormId: selectId.value,
- ...addForm.value,
- });
- if (code == "200") {
- ElMessage.success("添加成功");
- resetAddForm();
- getSettingData();
- }
- };
- const deleteSettings = async (id) => {
- 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, fields) => {
- if (valid) {
- addSettings();
- }
- });
- };
- const addRules = reactive({
- paramName: [
- {
- required: true,
- trigger: "blur",
- },
- ],
- position: [
- {
- required: true,
- trigger: "blur",
- },
- ],
- up: [
- {
- required: false,
- trigger: "blur",
- },
- ],
- down: [
- {
- required: false,
- trigger: "blur",
- },
- ],
- standard: [
- {
- required: false,
- trigger: "blur",
- },
- ],
- source: [
- {
- required: false,
- 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();
- watch(
- () => formVlaue.value.materialList,
- (value) => {
- setMaterialValue();
- },
- {
- immediate: true,
- }
- );
- onMounted?.(() => {
- dataEditList();
- });
- </script>
- <style lang="scss" scoped>
- .table {
- width: 430px;
- padding-top: 20px;
- }
- .btns {
- width: 100%;
- justify-content: center;
- height: 40px;
- display: flex;
- align-items: center;
- .el-button {
- height: 30px;
- }
- }
- .add {
- width: 430px;
- height: 220px;
- display: flex;
- flex-direction: column;
- .body {
- display: flex;
- width: 430px;
- flex: 1;
- }
- }
- #table {
- height: calc(100vh - 540px) !important;
- }
- .editView {
- width: 100%;
- height: calc(100vh - 140px);
- display: flex;
- .exView {
- position: relative;
- width: calc(100% - 450px);
- height: 100%;
- }
- .form {
- width: 450px;
- height: 100%;
- font-size: 24px;
- padding: 20px;
- padding-right: 0px;
- .title {
- text-align: center;
- margin-bottom: 10px;
- }
- .btns {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
- }
- :deep(.el-form-item) {
- margin-bottom: 10px !important;
- }
- :deep(.el-input__inner) {
- height: 24px !important;
- }
- </style>
|