hwmom-ui/src/views/tool/draggable/viewElements/hw-table-view.vue

<script lang="ts">

export default {
  name: 'hw-table-view'
};
</script>
<template>
  <div>
    <div style="margin-bottom: 12px;" v-if="options.isOperate">
      <el-button :icon="Plus" type="primary" @click="addBtn">新增</el-button>
      <el-button :icon="Edit" type="success" :disabled="SelectionList.length !== 1" @click="operateUpdateBtn">编辑
      </el-button>
      <el-button :icon="Delete" type="danger" :disabled="!(SelectionList.length >= 1)" @click="operateDelBtn">删除
      </el-button>
    </div>
    <el-table :data="globalFormData[options.dataKey]"
              style="width: 100%"
              @selection-change="tableSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column :prop="i.key" :label="i.name" v-for="i in options.thTdMap" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="updateBtn(scope)"
          >
            修改
          </el-button>
          <el-popconfirm title="确定要删除此项数据吗?" @confirm="delBtn(scope)">
            <template #reference>
              <el-button
                link
                type="primary"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="tableAddFormVisible" title="添加表格信息" width="500">
      <el-form :model="form" label-width="120px">
        <component v-for="(i,k) in options.thTdMap.filter(e=>e.isUpdate)" :is="'hw-'+i.type+'-view'" :formData="form"
                   :options="{name:i.name,key:i.key}" />
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tableAddFormVisible = false;form={}">关闭</el-button>
          <el-button type="primary" @click="addSubmit">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="tableUpdateFormVisible" title="修改表格信息" width="500">
      <el-form :model="form" label-width="120px">
        <component v-for="(i,k) in options.thTdMap.filter(e=>e.isUpdate)" :is="'hw-'+(i.type||'input')+'-view'"
                   :formData="form"
                   :options="{name:i.name,key:i.key}" />
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="tableUpdateFormVisible = false;form={}">关闭</el-button>
          <el-button type="primary" @click="onSubmit">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
import request from '@/utils/request';


defineOptions({
  name: 'hw-table-view'
});

const props = defineProps({
  options: Object
});

const cs = [
  { a: 1 },
  { a: 2 }
];

const { options } = toRefs(props);
const globalFormData = inject('globalFormData');
const tableUpdateFormVisible = ref(false);
const tableAddFormVisible = ref(false);
const form = ref({});
const addForm = ref({});
const formDataOperation = inject('formDataOperation');
const localData = ref({});
const SelectionList = ref([]);

const tableSelectionChange = (e) => {
  SelectionList.value = e;
  console.log(SelectionList.value);
};
const addBtn = () => {
  tableAddFormVisible.value = true;
  addForm.value = {};
};
const addSubmit = async () => {
  tableAddFormVisible.value = false;
  try {
    const fun = () => {
      return `return async ()=>{
        ${options.value.updateFunction}
      }`;
    };
    const addFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
    await addFunction(addForm.value, request, formDataOperation, localData.value)();
    tableAddFormVisible.value = false;
  } catch (e) {
    console.log(e);
  }
};
const operateUpdateBtn = () => {
  form.value = SelectionList.value?.[0] || {};
  tableUpdateFormVisible.value = true;
};
const operateDelBtn = () => {
  ElMessageBox.confirm(
    '确定删除这些数据吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      beforeClose: async (action, instance, done) => {
        try {
          const fun = () => {
            return `return async ()=>{
        ${options.value.deleteFunction}
      }`;
          };
          const deleteFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
          await deleteFunction({ [options.value.delField]: SelectionList.value.map(v => v[options.value.delField]) }, request, formDataOperation, localData.value)();
          done();
        } catch (e) {
          console.log(e);
        }
      }
    }
  )
    .then(async () => {
      ElMessage({
        type: 'success',
        message: '删除完成'
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      });
    });
};
const updateBtn = (scope) => {
  form.value = scope.row;
  tableUpdateFormVisible.value = true;
};
const onSubmit = async () => {
  try {
    const fun = () => {
      return `return async ()=>{
        ${options.value.updateFunction}
      }`;
    };
    const updateFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
    await updateFunction(form.value, request, formDataOperation, localData.value)();
    tableUpdateFormVisible.value = false;
    console.log();
  } catch (e) {
    console.log(e);
  }
};

const delBtn = async (scope) => {
  try {
    const fun = () => {
      return `return async ()=>{
        ${options.value.deleteFunction}
      }`;
    };
    const deleteFunction = new Function('formData', 'request', 'formDataOperation', 'localData', fun());
    await deleteFunction({ [options.value.delField]: scope.row[options.value.delField] }, request, formDataOperation, localData.value)();
  } catch (e) {
    console.log(e);
  }
};
</script>
<style scoped lang="less">
</style>