动态表单前端初步设计

src/mock/index.js

@@ -81,6 +81,30 @@ const menusList = [
     sort: 1,
     name: 'OfficeSop',
   },
+  {
+    id: 11,
+    title: '研究生SOP管理',
+    parentId: 9,
+    url: '/sop/sop-manage/student-sop',
+    sort: 2,
+    name: 'StudentSop',
+  },
+  {
+    id: 12,
+    title: '研究生SOP管理',
+    parentId: 9,
+    url: '/sop/sop-manage/device-out-in',
+    sort: 3,
+    name: 'DeviceOutIn',
+  },
+  {
+    id: 14,
+    title: '项目计划变更报备',
+    parentId: 9,
+    url: '/sop/sop-manage/project-change-report',
+    sort: 4,
+    name: 'ProjectChangeReport',
+  },
 ];
 
 export const menusApi = Mock.mock('/api/getMenus', 'get', () => {

src/router/modules/sop.js

@@ -15,7 +15,7 @@ export default {
       meta: {
         title: 'SOP管理',
         sort: 1,
-        icon: '',
+        icon: 'layers',
       },
       children: [
         {
@@ -28,6 +28,45 @@ export default {
             sort: 1,
           },
         },
+        {
+          name: 'SopFlow',
+          path: '/sop/sop-manage/sop-flow',
+          component: () => import('@/views/sop/sop-manage/sop-flow/index.vue'),
+          meta: {
+            title: 'SOP流程',
+            bind: 'OfficeSop',
+          },
+        },
+        {
+          name: 'StudentSop',
+          path: '/sop/sop-manage/student-sop',
+          component: () =>
+            import('@/views/sop/sop-manage/student-sop/index.vue'),
+          meta: {
+            title: '研究生SOP管理',
+            sort: 2,
+          },
+        },
+        {
+          name: 'DeviceOutIn',
+          path: '/sop/sop-manage/device-out-in',
+          component: () =>
+            import('@/views/sop/sop-manage/device-out-in/index.vue'),
+          meta: {
+            title: '设备出入库登记',
+            sort: 3,
+          },
+        },
+        {
+          name: 'ProjectChangeReport',
+          path: '/sop/sop-manage/project-change-report',
+          component: () =>
+            import('@/views/sop/sop-manage/project-change-report/index.vue'),
+          meta: {
+            title: '项目计划变更报备',
+            sort: 4,
+          },
+        },
       ],
     },
   ],

src/style/tdesign-reset.less

@@ -30,3 +30,7 @@
     min-height: 40px;
   }
 }
+
+.t-head-menu__inner .t-menu:first-child {
+  margin-left: 0;
+}

src/views/sop/components/TEXT.vue

@@ -0,0 +1,12 @@
+<template>
+  <t-input v-model="value" @input="onInput"></t-input>
+</template>
+<script setup name="TEXT">
+import { ref } from 'vue';
+const { config, onChange } = defineProps(['config', 'onChange']);
+const value = ref('');
+const onInput = () => {
+  onChange({ prop: config.binding, value: value.value });
+};
+</script>
+<style></style>

src/views/sop/components/my-form-item.vue

@@ -0,0 +1,26 @@
+<template>
+  <RenderTest></RenderTest>
+</template>
+<script setup lang="jsx" name="MyFormItem">
+import { defineComponent } from 'vue';
+import TEXT from './TEXT.vue';
+const { config } = defineProps(['config']);
+console.log('config:', config);
+const onChange = (obj) => {
+  console.log('obj', obj);
+};
+const RenderTest = defineComponent({
+  render() {
+    if (!config) {
+      return <div>你不传config我怎么玩</div>;
+    }
+    switch (config.code) {
+      case 'TEXT':
+        return <TEXT config={config} onChange={onChange}></TEXT>;
+      default:
+        return <div>你给的code是什么破玩意</div>;
+    }
+  },
+});
+</script>
+<style></style>

src/views/sop/sop-manage/device-out-in/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="office-sop flex flex-col">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success">新增</t-button>
+        <t-button theme="success">作废</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+        :selected-row-keys="selectedRowKeys"
+        select-on-row-click
+        @select-change="selectChange"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="DeviceOutIn">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+const selectedRowKeys = ref([]);
+const selectChange = (value, { selectedRowData }) => {
+  selectedRowKeys.value = value;
+};
+const columns = [
+  {
+    colKey: 'row-select',
+    type: 'multiple',
+    width: 50,
+    fixed: 'left',
+  },
+  { colKey: 'a', title: '服务单元' },
+  { colKey: 'b', title: '出/入库时间' },
+  { colKey: 'c', title: '登记人' },
+  { colKey: 'd', title: '客户名称' },
+  { colKey: 'e', title: '出库/入库' },
+  { colKey: 'f', title: '设备编号' },
+  { colKey: 'g', title: '发往地' },
+];
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 5,
+  },
+  {
+    prop: 'b',
+    label: '出/入库时间',
+    type: 'daterange',
+    labelWidth: '100px',
+    colSpan: 10,
+  },
+  {
+    prop: 'c',
+    label: '客户名称',
+    labelWidth: '100px',
+    colSpan: 5,
+  },
+  {
+    type: 'buttons',
+    colSpan: 2,
+    children: [{ type: 'button', text: '查询' }],
+  },
+  {
+    prop: 'd',
+    label: '设备编号',
+    labelWidth: '100px',
+    colSpan: 5,
+  },
+  {
+    prop: 'e',
+    label: '发往地',
+    labelWidth: '100px',
+    colSpan: 5,
+  },
+]);
+const params = reactive({
+  a: '',
+  b: [],
+  c: '',
+  d: '',
+  e: '',
+});
+
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+</script>
+
+<style></style>

src/views/sop/sop-manage/office-sop/index.vue

@@ -1,7 +1,126 @@
 <template>
-  <div class="office-sop">教务处SOP</div>
+  <div class="office-sop flex flex-col">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success">批量作废</t-button>
+        <t-button theme="success">项目计划变更</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+        :selected-row-keys="selectedRowKeys"
+        select-on-row-click
+        @select-change="selectChange"
+      >
+      </t-table>
+    </div>
+  </div>
 </template>
 
-<script setup name="OfficeSop"></script>
+<script setup lang="jsx" name="OfficeSop">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+import { useRouter } from 'vue-router';
+const selectedRowKeys = ref([]);
+const selectChange = (value, { selectedRowData }) => {
+  selectedRowKeys.value = value;
+};
+
+const router = useRouter();
+const columns = [
+  {
+    colKey: 'row-select',
+    type: 'multiple',
+    width: 50,
+    fixed: 'left',
+  },
+  { colKey: 'a', title: '服务单元' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 300,
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+              enterSopFlow(row);
+            }}
+          >
+            填报
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            新增SOP
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            新增违规
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            上报质量问题
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: '80px',
+    colSpan: 5,
+  },
+]);
+const params = reactive({
+  a: '',
+});
+
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+
+const enterSopFlow = (row) => {
+  router.push({ name: 'SopFlow' });
+};
+</script>
 
 <style></style>

src/views/sop/sop-manage/project-change-report/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="office-sop flex flex-col">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success">新增</t-button>
+        <t-button theme="success">作废</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+        :selected-row-keys="selectedRowKeys"
+        select-on-row-click
+        @select-change="selectChange"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="ProjectChangeReport">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+const selectedRowKeys = ref([]);
+const selectChange = (value, { selectedRowData }) => {
+  selectedRowKeys.value = value;
+};
+const columns = [
+  {
+    colKey: 'row-select',
+    type: 'multiple',
+    width: 50,
+    fixed: 'left',
+  },
+  { colKey: 'a', title: '变更申请编号' },
+  { colKey: 'b', title: '服务单元' },
+  { colKey: 'c', title: '客户类型' },
+  { colKey: 'd', title: '客户名称' },
+  { colKey: 'e', title: '项目单号' },
+  { colKey: 'f', title: '项目名称' },
+  { colKey: 'g', title: '变更原因' },
+  { colKey: 'h', title: '变更类型' },
+  { colKey: 'i', title: '变更字段(多行)' },
+  { colKey: 'j', title: '变更后内容(多行)' },
+  { colKey: 'k', title: '提交人' },
+  { colKey: 'l', title: '提交时间' },
+  { colKey: 'm', title: '流程状态' },
+  { colKey: 'n', title: '当前节点' },
+  { colKey: 'o', title: '节点负责人' },
+];
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4,
+  },
+  {
+    prop: 'b',
+    label: '提交人',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4,
+  },
+  {
+    prop: 'c',
+    label: '变更类型',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4,
+  },
+  {
+    prop: 'd',
+    label: '客户类型',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4,
+  },
+  {
+    prop: 'e',
+    label: '流程状态',
+    type: 'select',
+    labelWidth: '100px',
+    colSpan: 4,
+  },
+  {
+    type: 'buttons',
+    colSpan: 2,
+    children: [{ type: 'button', text: '查询' }],
+  },
+  {
+    prop: 'f',
+    label: '客户名称',
+    labelWidth: '100px',
+    colSpan: 4,
+  },
+  {
+    prop: 'g',
+    label: '变更申请编号',
+    labelWidth: '100px',
+    colSpan: 4,
+  },
+  {
+    prop: 'h',
+    label: '提交时间',
+    type: 'daterange',
+    labelWidth: '100px',
+    colSpan: 8,
+  },
+]);
+const params = reactive({
+  a: '',
+  b: '',
+  c: '',
+  d: '',
+  e: '',
+  f: '',
+  g: '',
+  h: [],
+});
+
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+</script>
+
+<style></style>

src/views/sop/sop-manage/sop-flow/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="sop-flow">
+    <div class="page-wrap">
+      <MyFormItem :config="config"></MyFormItem>
+    </div>
+  </div>
+</template>
+
+<script setup name="SopFlow">
+import { ref } from 'vue';
+import MyFormItem from '../../components/my-form-item.vue';
+const config = ref({
+  id: '1',
+  code: 'TEXT', //编码，TEXT：文本，TEXTAREA：文本域，SELECT：下拉框，RADIO：单选框，CHECKBOX：复选框，DATE：日期，BUTTON：按钮，IMG：图片，VIDEO：视频，AUDIO：音频，FILE：文件，POP_SELECT：弹出选择框，LABEL：标签，TABLE：表格，SIGN：签名，OTHER：其它
+  type: 'FORM', //类型，FORM：表单，TABLE：表格，OTHER：其它
+  formId: 'crm_child_no', //表单控件id(实际会带上流程key，如：f_usertask_start|crm_child_no)
+  formName: 'crm_child_no', //表单控件名称
+  title: '项目子单编号', //表单控件标题
+  inputType: 'STRING', //输入类型，STRING：字符串，INT：整型，LONG：长整型，DOUBLE：浮点型，ENUM：枚举，DATE：日期，BOOL：布尔，BIGDECIMAL：精确浮点
+  required: false, //是否必填，false：非必填，true：必填
+  readable: true, //是否只读，false：非只读，true：只读
+  writable: false, //是否可写，false：非可写，true：可写
+  visable: true, //是否可见，false：不可见，true：可见
+  binding: 'crm_child_no', //绑定的数据字段
+  name: '文本', //名称
+});
+</script>
+
+<style></style>

src/views/sop/sop-manage/student-sop/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="student-sop flex flex-col">
+    <SearchForm :fields="fields" :params="params"></SearchForm>
+
+    <div class="flex-1 page-wrap">
+      <div class="btn-group">
+        <t-button theme="success">批量作废</t-button>
+        <t-button theme="success">项目计划变更</t-button>
+      </div>
+      <t-table
+        size="small"
+        row-key="id"
+        :columns="columns"
+        :data="tableData"
+        bordered
+        :pagination="{
+          defaultCurrent: 1,
+          defaultPageSize: 10,
+          onChange,
+          total: pagination.total,
+        }"
+        :selected-row-keys="selectedRowKeys"
+        select-on-row-click
+        @select-change="selectChange"
+      >
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx" name="StudentSop">
+import { ref, reactive } from 'vue';
+import { getTableData } from '@/api/test';
+import useFetchTable from '@/hooks/useFetchTable';
+const selectedRowKeys = ref([]);
+const selectChange = (value, { selectedRowData }) => {
+  selectedRowKeys.value = value;
+};
+const columns = [
+  {
+    colKey: 'row-select',
+    type: 'multiple',
+    width: 50,
+    fixed: 'left',
+  },
+  { colKey: 'a', title: '服务单元' },
+  {
+    title: '操作',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 240,
+    cell: (h, { row }) => {
+      return (
+        <div class="table-operations">
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            填报
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            新增违规
+          </t-link>
+          <t-link
+            theme="primary"
+            hover="color"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            上报质量问题
+          </t-link>
+        </div>
+      );
+    },
+  },
+];
+const fields = ref([
+  {
+    prop: 'a',
+    label: '服务单元',
+    type: 'select',
+    labelWidth: '80px',
+    colSpan: 5,
+  },
+]);
+const params = reactive({
+  a: '',
+});
+
+const {
+  loading: tableLoading,
+  pagination,
+  tableData,
+  fetchData,
+  onChange,
+} = useFetchTable(getTableData);
+</script>
+
+<style></style>