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

<script lang="ts">
import hwInputView from './hw-input-view.vue';

export default {
  name: 'hw-table-view',
  components: {
    hwInputView
  }
};
</script>
<template>
  <div>
    <div style="margin-bottom: 12px;" v-if="options.isOperate">
      <el-button :icon="Plus" type="primary" disabled @click="addBtn">新增</el-button>
      <el-button :icon="Edit" type="success" disabled>编辑</el-button>
      <el-button :icon="Delete" type="danger" disabled>删除</el-button>
    </div>
    <el-table :data="cs || globalFormData.pageVariable[options.dataKey]"
              style="width: 100%"
              @selection-change="tableSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column :prop="i.keyName" :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="tableUpdateFormVisible" title="修改表格信息" width="500">
      <el-form :model="form" label-width="120px">
        <component v-for="(i,k) in options.thTdMap" :is="'hw-'+i.type+'-view'" :formData="form"
                   :options="{name:i.name,key:i.keyName}" />
      </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 form = ref({});
const formDataOperation = inject('formDataOperation');
const localData = ref({});
const SelectionList = ref([]);

const tableSelectionChange = (e) => {
  SelectionList.value = e;
  console.log(SelectionList.value);
};
const addBtn = () => {

};
const updateBtn = (scope) => {
  console.log(scope);
  console.log(options.value.thTdMap);
  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)();
    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(scope.row, request, formDataOperation, localData.value)();
  } catch (e) {
    console.log(e);
  }
};
</script>
<style scoped lang="less">
</style>