hwmom-ui/src/views/tool/draggable/demo.vue

<template>
  <div>
    <el-form :model="a " label-width="120px">
      <el-form-item label="id" :required="false">
        <el-input v-model="a['id']"
                  type="text" autocomplete="new-password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="aSubmit">提交</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
    <pagination v-show="pageData.total > 0"
                v-model:page="a['pageNum']"
                v-model:limit="a['pageSize']"
                :total="pageData.total" @pagination="aSubmit" />
  </div>
  <div style="margin-bottom: 12px;">
    <el-button :icon="Plus" type="primary" @click="aaAdd">新增</el-button>
    <el-button :icon="Edit" type="success" :disabled="aaSelectionList.length !== 1" @click="aaUpdate()">编辑
    </el-button>
    <el-button :icon="Delete" type="danger" :disabled="!(aaSelectionList.length >= 1)" @click="aaDel()">删除
    </el-button>
  </div>
  <el-table :data="formData['table']"
            style="width: 100%"
            @selection-change="aaSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="materialName" label="materialName" />
    <el-table-column prop="planAmount" label="planAmount" />
    <el-table-column prop="processName" label="processName" />
    <el-table-column prop="releaseName" label="releaseName" />
    <el-table-column prop="planId" label="planId" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="aaUpdate(scope)"
        >
          修改
        </el-button>
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="aaDel(scope)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="aaOperationFormVisible" :title="aaOperationTitle" width="500">
    <el-form :model="aaOperationForm" label-width="120px">
      <el-form-item label="materialName" :required="undefined">
        <el-input v-model="aaOperationForm['materialName']"
                  type="input" autocomplete="new-password" />
      </el-form-item>
      <el-form-item label="planAmount" :required="undefined">
        <el-input v-model="aaOperationForm['planAmount']"
                  type="input" autocomplete="new-password" />
      </el-form-item>
      <el-form-item label="processName" :required="undefined">
        <el-input v-model="aaOperationForm['processName']"
                  type="input" autocomplete="new-password" />
      </el-form-item>
      <el-form-item label="releaseName" :required="undefined">
        <el-input v-model="aaOperationForm['releaseName']"
                  type="input" autocomplete="new-password" />
      </el-form-item>
      <el-form-item label="planId" :required="undefined">
        <el-input v-model="aaOperationForm['planId']"
                  type="input" autocomplete="new-password" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="aaOperationFormVisible = false;aaOperationForm={}">关闭</el-button>
        <el-button type="primary" @click="aaAddSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
import request from '@/utils/request';

const formData = ref({});
const formDataOperation = {
  get: (key) => {
    return formData.value[key];
  },
  set: (key, value) => {
    formData.value[key] = value;
  }
};
const pageData = ref({});

const a = ref({ 'id': '' });

const aaOperationForm = ref({
  'materialName': '',
  'planAmount': '',
  'processName': '',
  'releaseName': '',
  'planId': ''
});


const table = ref([]);

const aaSelectionList = ref([]);

const aaOperationFormVisible = ref(false);

const aaOperationTitle = ref('');


const aSubmit = async () => {
  let formData = a.value;
  let localData = pageData.value;

  const table = await request({
    url: 'mes/planInfo/list',
    method: 'get',
    params: formData
  });
  formDataOperation.set('table', table.rows);
  localData.total = table.total;
};
const aaSelectionChange = (e) => {
  aaSelectionList.value = e;
};
const aaUpdate = (scope) => {
  if (!scope) {
    aaOperationForm.value = aaSelectionList.value[0];
  } else {
    aaOperationForm.value = scope.row;
  }
  aaOperationFormVisible.value = true;
};

const aaAdd = () => {
  aaOperationForm.value = {};
  aaOperationFormVisible.value = true;
};


const aaDel = () => {
  ElMessageBox.confirm(
    '确定删除这些数据吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      beforeClose: async (action, instance, done) => {
        try {
          let localData = pageData.value;
          let formData = { id: aaSelectionList.value.map(v => v[id]) };

          done();
        } catch (e) {
          console.log(e);
        }
      }
    }
  )
    .then(async () => {
      ElMessage({
        type: 'success',
        message: '删除完成'
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      });
    });
};

const aaAddSubmit = async () => {
  let formData = aaOperationForm.value;
  let localData = pageData.value;

  aaOperationFormVisible.value = false;
};

</script>