add: 新增form相关组件封装

2022/aiot-evaluate/src/components/form/IpuCascader.vue

@@ -0,0 +1,7 @@
<template>
  <el-cascader class="ipu-cascader"></el-cascader>
</template>
<script setup></script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/form/IpuCheckBox.vue

@@ -0,0 +1,7 @@
<template>
  <el-checkbox class="ipu-checkbox"></el-checkbox>
</template>
<script setup></script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/form/IpuDatePicker.vue

@@ -0,0 +1,7 @@
<template>
  <el-date-picker class="ipu-date-picker"></el-date-picker>
</template>
<script setup></script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/form/IpuForm.vue

@@ -0,0 +1,86 @@
<template>
  <el-form>
    <template v-for="(form, index) in forms" :key="form?.name || index">
      <el-form-item
        :prop="form?.name || ''"
        :label="form?.label || ''"
        :rules="form?.rules || []"
      >
        <!-- input --->
        <ipu-input
          v-if="form?.type === 'input'"
          v-model="form.value"
          :width="form?.width"
          v-bind="form?.attrs"
        >
        </ipu-input>
        <!-- select --->
        <ipu-select
          v-if="form?.type === 'select'"
          v-model="form.value"
          :width="form?.width"
          v-bind="form?.attrs"
        >
        </ipu-select>
        <!-- radio --->
        <ipu-radio
          v-if="form?.type === 'radio'"
          v-model="form.value"
          :width="form?.width"
          v-bind="form?.attrs"
        ></ipu-radio>
        <!-- cascader --->
        <ipu-cascader
          v-if="form?.type === 'cascader'"
          v-model="form.value"
          :width="form?.width"
          v-bind="form?.attrs"
        ></ipu-cascader>
        <!-- switch --->
        <ipu-switch
          v-if="form?.type === 'switch'"
          v-model="form.value"
          :width="form?.width"
          v-bind="form?.attrs"
        ></ipu-switch>
        <!-- checkbox --->
        <ipu-checkbox
          v-if="form?.type === 'checkbox'"
          v-model="form.value"
          :width="form?.width"
          v-bind="form?.attrs"
        ></ipu-checkbox>
        <!-- date-picker --->
        <ipu-date-picker
          v-if="form?.type === 'date-picker'"
          v-model="form.value"
          :width="form?.width"
          v-bind="form?.attrs"
        ></ipu-date-picker>
      </el-form-item>
    </template>
    <el-form-item>
      <slot name="btns"></slot>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  forms: {
    type: Array,
    default: () => []
  }
});
// 校验规则
</script>
<style lang="scss" scoped></style>

2022/aiot-evaluate/src/components/form/IpuInput.vue

@@ -0,0 +1,7 @@
<template>
  <el-input class="ipu-input" v-bind="$attrs"></el-input>
</template>
<script setup></script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/form/IpuRadio.vue

@@ -0,0 +1,7 @@
<template>
  <el-radio class="ipu-radio"></el-radio>
</template>
<script setup></script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/form/IpuSelect.vue

@@ -0,0 +1,21 @@
<template>
  <el-select class="ipu-select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script setup>
const props = defineProps({
  options: {
    type: Array,
    default: () => []
  }
});
</script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/form/IpuSwitch.vue

@@ -0,0 +1,7 @@
<template>
  <el-switch class="ipu-switch"> </el-switch>
</template>
<script setup></script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/form/IpuUpload.vue

@@ -0,0 +1,7 @@
<template>
  <el-upload class="ipu-upload"></el-upload>
</template>
<script setup></script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/index.js

@@ -1,4 +1,13 @@
import IpuTable from './table/index.vue';
import IpuInput from './form/IpuInput.vue';
import IpuSelect from './form/IpuSelect.vue';
import IpuRadio from './form/IpuRadio.vue';
import IpuCascader from './form/IpuCascader.vue';
import IpuSwitch from './form/IpuSwitch.vue';
import IpuCheckBox from './form/IpuCheckBox.vue';
import IpuDatePicker from './form/IpuDatePicker.vue';
import IpuForm from './form/IpuForm.vue';
import IpuSearch from './search-params/index.vue';
/**
 * 注册全局组件
@@ -7,4 +16,15 @@ import IpuTable from './table/index.vue';
export function setupGlobalComponents(app) {
  // 通用普通表格
  app.component('ipu-table', IpuTable);
  // 表单元素
  app.component('ipu-input', IpuInput);
  app.component('ipu-select', IpuSelect);
  app.component('ipu-radio', IpuRadio);
  app.component('ipu-cascader', IpuCascader);
  app.component('ipu-switch', IpuSwitch);
  app.component('ipu-checkbox', IpuCheckBox);
  app.component('ipu-date-picker', IpuDatePicker);
  app.component('ipu-form', IpuForm);
  // 搜索模块
  app.component('ipu-search', IpuSearch);
}

2022/aiot-evaluate/src/components/search-params/index.vue

@@ -0,0 +1,118 @@
<template>
  <div class="search-params">
    <ipu-form :inline="true" :model="formValues" :forms="searchParams">
      <template v-slot:btns>
        <div class="btns">
          <el-button @click.stop="search" type="primary">搜索</el-button>
          <el-button @click.stop="clearSearch">清除</el-button>
        </div>
      </template>
    </ipu-form>
    <div class=""></div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const emits = defineEmits(['search', 'clearSearch']);
const props = defineProps({
  searchParams: {
    type: Array,
    default: () => []
  },
  formValues: {
    type: Object,
    default: () => {}
  }
});
// 处理 input
const parseInput = (param) => {
  if (param?.type === 'input') {
    return { [param?.name]: param.value };
  }
};
// 处理 select
const parseSelect = (param) => {
  if (param?.type === 'select') {
    return { [param?.name]: param.value };
  }
};
// 处理 radio
const parseRadio = (param) => {
  if (param?.type === 'radio') {
    return { [param?.name]: param.value };
  }
};
// 处理 cascader
const parseCascader = (param) => {
  if (param?.type === 'cascader') {
    return { [param?.name]: param.value };
  }
};
// 处理 switch
const parseSwitch = (param) => {
  if (param?.type === 'switch') {
    return { [param?.name]: param.value };
  }
};
// 处理 checkbox
const parseCheckbox = (param) => {
  if (param?.type === 'switch') {
    return { [param?.name]: param.value };
  }
};
const parseParam = (param, isClear = false) => {
  // console.log(parseInput(param));
  return (
    parseInput(param, isClear) ||
    parseSelect(param, isClear) ||
    parseRadio(param, isClear) ||
    parseCascader(param, isClear) ||
    parseSwitch(param, isClear) ||
    parseCheckbox(param, isClear)
  );
};
// 处理date-picker
// 搜搜项处理
const parseSearch = () => {
  const params = JSON.parse(JSON.stringify(props?.searchParams));
  let obj = {};
  if (params?.length) {
    params.forEach((param) => {
      obj = { ...obj, ...parseParam(param) };
    });
  }
  return obj;
};
// 清除搜索
const clearSearch = () => {
  props?.searchParams.map((param) => {
    const dataType = Object.prototype.toString.call(param.value);
    switch (dataType) {
    case '[object String]':
      param.value = '';
      break;
    case '[object Array]':
      param.value = [];
      break;
    case '[object Object]':
      param.value = {};
      break;
    default:
      param.value = undefined;
      break;
    }
  });
  emits('clearSearch', parseSearch());
};
// 搜索
const search = () => {
  emits('search', parseSearch());
};
</script>
<style scoped lang="scss"></style>

2022/aiot-evaluate/src/components/table-module/index.vue

@@ -0,0 +1,13 @@
<template>
  <div class="table-module">
  </div>
</template>
<script setup>
</script>
<style scoped lang="scss">
</style>

2022/aiot-evaluate/src/utils/verification.js

@@ -0,0 +1,14 @@
const verifications = {
  input: {
    tel: '/^((0d{2,3}-d{7,8})|(1[34578]d{9}))$/',
    ID: '/(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/',
    email: '/^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/',
    int: '/^-?[1-9]d*$/',
    pos_int: '/^[1-9]d*$/',
    low_letters: '/^[a-z]+$/',
    upper_letters: '/^[A-Z]+$/',
    letters: '/^[A-Za-z]+$/',
    chinese: '/^[\u0391-\uFFE5A-Za-z]+$/',
    letters_num: '/^[a-zA-Z0-9]+$/'
  }
};

2022/aiot-evaluate/src/views/demos/ApiResourceManagement.vue

@@ -11,35 +11,18 @@
  <!-- 表体 -->
  <div class="form-body">
    <!-- 搜索 -->
    <el-row class="search">
      <el-col :span="7">
        <span>资源名称：</span>
        <el-input v-model="inputSearch" placeholder="请输入" />
      </el-col>
      <el-col :span="7">
        <span>所属应用：</span>
        <el-select v-model="ruleForm.role" placeholder="请选择">
          <el-option label="终端柜管理角色" value="终端柜管理角色" />
          <el-option label="告警管理角色" value="告警管理角色" />
          <el-option label="边缘管理角色" value="边缘管理角色" />
          <el-option label="设备管理角色" value="设备管理角色" />
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </el-col>
    </el-row>
    <ipu-search
      :searchParams="searchParams"
      :formValues="formValues"
      @search="search"
      @clearSearch="clearSearch"
    ></ipu-search>
    <!-- 表格 -->
    <ipu-table
      :tableHeader="tableHeader"
      :tableData="tableData"
    ></ipu-table>
    <ipu-table :tableHeader="tableHeader" :tableData="tableData"></ipu-table>
    <!-- 分页器 -->
    <el-row class="demo-pagination-block">
      <!-- currentPage-初始当前页面；pageSize-初始一页数据数；page-count-分页器最大页码按钮数，超过该数会折叠 -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
@@ -75,20 +58,11 @@
<script setup>
import { ref, reactive } from 'vue';
// import { ElMessage, ElMessageBox } from "element-plus";
import CreateApplication from '@/components/dialog/CreateApplication';
import EditApplication from '@/components/dialog/EditApplication';
import DeleteData from '@/components/dialog/DeleteData';
// --------查询资源----------
const inputSearch = ref('');
const ruleForm = reactive({
  resourceId: '',
  resourceName: '',
  belongApplication: '',
  resourceType: '',
  role: ''
});
const tableHeader = ref([
  {
    label: '资源名称',
@@ -126,7 +100,94 @@ const tableHeader = ref([
    width: '217'
  }
]);
const formValues = {
  resourceName: '',
  sourceType: [],
  resourceName1: ''
};
// 搜索项
const searchParams = ref([{
  name: 'resourceName',
  type: 'input',
  label: '资源名称',
  value: '',
  styles: {
    width: 200
  },
  attrs: {
    clearable: true
  },
  rules: [{
    required: true,
    message: 'Please input email address',
    trigger: 'blur'
  },
  {
    type: 'email',
    message: 'Please input correct email address',
    trigger: ['blur', 'change']
  }]
},
{
  name: 'sourceType',
  label: '资源类型',
  type: 'select',
  attrs: {
    clearable: true,
    disabled: false,
    multiple: true,
    options: [
      {
        label: '资源1',
        value: 'label'
      },
      {
        label: '资源2',
        value: 'label2'
      },
      {
        label: '资源3',
        value: 'labe3'
      },
      {
        label: '资源4',
        value: 'label4'
      },
      {
        label: '资源5',
        value: 'label5'
      },
      {
        label: '资源6',
        value: 'label6'
      }
    ]
  },
  width: 200,
  value: []
},
{
  name: 'resourceName1',
  type: 'input',
  width: 200,
  attrs: {
    disabled: true,
    clearable: true
  },
  label: '资源名称1',
  value: ''
}]);
// 搜索
const search = (data) => {
  console.log(data);
  console.log('开始搜索');
};
// 清除搜索
const clearSearch = (data) => {
  console.log('清除');
  search(data);
};
// -------分页器---------
const pageSize = ref(10);
const currentPage = ref(1);
@@ -285,10 +346,12 @@ const rowIndex = ref(null);
function dataOperation(val, operation) {
  // val<boolean>：控制弹窗显隐；   operation<number>：0 - 取消删除；  1- 确认删除
  visibleDel.value = val;
  if (operation === 1) { tableData.splice(rowIndex, 1); }
  if (operation === 1) {
    tableData.splice(rowIndex, 1);
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/index.scss";
@import '@/assets/styles/index.scss';
</style>