Respuestas de referencia a preguntas del proyecto.

Funciones comerciales del proyecto:

• Este sistema incluye principalmente 7 secciones principales. Los módulos funcionales incluyen principalmente estación de trabajo para médicos ambulatorios, gestión de departamentos, equipos médicos, departamento de tecnología médica, gestión de hospitalización, farmacia de biblioteca de medicamentos, contabilidad financiera y otros módulos. En el departamento ambulatorio, registro en el sitio, Se pueden realizar cargos y reembolsos. Una vez completados el registro y el pago, el médico puede realizar consultas y recetar medicamentos. Al mismo tiempo, el médico ambulatorio puede emitir elementos de inspección. Sólo después de emitir los elementos de inspección puede el técnico médico realizar la inspección. Él o ella también puede decidir si realiza la inspección de acuerdo con la condición del paciente. Hospitalizado y en espera, I主要负责部门管理，药库药房，系统管理的研发，参与项目v1.0到v2.0的迭代

1 Complete el módulo de gestión del departamento (que incluye aproximadamente el departamento de farmacia, el departamento de diagnóstico y tratamiento, el departamento de enfermería y el departamento de logística),

• Encapsulé la función de árbol de datos, convertí los datos de la lista en una estructura de árbol mediante recursividad y la usé con el componente Árbol de element-UI para implementar la gestión de departamentos.

let data = [
  {
    
     id: 0, pId: null, name: '生物' },
  {
    
     id: 1, pId: 0, name: '动物' },
  {
    
     id: 2, pId: 0, name: '植物' },
  {
    
     id: 3, pId: 0, name: '微生物' },
  {
    
     id: 4, pId: 1, name: '哺乳动物' },
  {
    
     id: 5, pId: 1, name: '卵生动物' },
  {
    
     id: 6, pId: 2, name: '种子植物' },
  {
    
     id: 7, pId: 2, name: '蕨类植物' },
]

• La identificación es única en cada objeto, pero el pId de diferentes objetos puede ser el mismo y su elemento principal se puede encontrar en función del pId.

export const arrayTwotree = (data, pid = '') => {
    
    
  
   // filter 过滤，查找子对象
  const tree = data.filter(item => item. === pid)
  tree.forEach(item => {
    
    
       //如果id与pid相同说明带有pid的对象是id这个对象的children 进行递归处理
    item.children = arrayTwotree(data, item.id)
  })
  return tree
}

2. En el módulo de búsqueda de medicamentos, de acuerdo con las necesidades del negocio, encapsulé expresiones regulares para implementar funciones de búsqueda difusa y herramienta anti-vibración, reduciendo las solicitudes y optimizando el proyecto.

• Explicación detallada de anti-vibración _.debounce(getUsername(),1000) , - anti-vibración de escritura a mano

// 防抖的关键在于定时器的开始与清零
		function debounce(callback,delaytime){
    
    
			// 定义计时器
			let timer=null
			return function(){
    
    
				//如果定时器不是null 则需要重新计时
				if (timer!=null) {
    
    
					clearTimeout(timer)
					
				}
				//如果定时器还是空 ,则开始倒计时
				timer=setTimeout(()=>{
    
    
					callback&&callback()
				}, delaytime)

			}
		}

• Acelerador_.throttle(getusername(),1000)

// 节流固定的时间进行触发
		inputEl.oninput = throttle(inputChange, 2000)
		// 封装节流  :关键在于: 节流阀 以及时间间隔
		//1 如果不触发函数则节流阀关闭状态
		// 当你触发这个函数时先把节流阀关闭 然后在默认的时间间隔中打开
		function throttle(callback, delaytime) {
    
    
			let state=true   //节流阀打开
			return function(){
    
    
				if (!state) {
    
      //当节流阀关闭,则直接退出该函数
					return;         //callback不执行
				}else{
    
    
					//如果节流阀打开先把节流阀关闭
					//然后设置时间间隔后在自动打开
					state = false       
					setTimeout(() => {
    
    
						callback && callback()
						state = true
					}, delaytime)
				}
			}

3. Importación y exportación de Excel.

• Importar: es para fileReaderconvertir el archivo a ArrayBuffer, antes de llamar xlsx第三方包read()方法转成workbook, dado que fileReader es una función asincrónica, use promesa.all para procesar y leer múltiples archivos.

Importar respuestas detalladas

1. Encapsulé un componente uploadExcelglobal
2. En este componente, combino el-uploadel componente de carga de archivos en la biblioteca de componentes element-ui para el procesamiento secundario.

<el-upload
  action=‘’
  accept=“xlsx/.xls”  // 指定文件类型
  on-change          //文件状态的改变
</el-upload>

3. Cuando el estado del archivo cambia y se va a importar, fileReaderse llama a un método para convertir el archivo en datos binarios (aquí se encapsula una función asincrónica de Promise y el archivo se leerá solo cuando se resuelva (con éxito))
4. Llame al xlsx integrado read方法y especifique el tipo para leer los datos del archivo
5. Utilice el método integrado sheet_to_jsonen xlsx para convertir el formato de datos (convertir al formato de datos JSON)

Función de exportación,
1. Llame al evento en la tabla @selection-changepara obtener los datos seleccionados, 2. Cambie
los datos seleccionados entre chino e inglés 3. Llame al método integrado para convertir los datos al formato 4. Cree una nueva tabla para usar el método creación 5. Usar métodos para insertar datos en la tabla 6. Llamar a métodos para escribir datos en el archivo actualmap
xlsxsheet
xlsx里面内置的utils。book_new()
book_append_sheet
writeFile

4. Módulo de inicio de sesión

• Incluyendo la recopilación y verificación de datos antes de iniciar sesión,
• 1. Haga clic en el botón de inicio de sesión para llamar a las acciones en vuex a través del envío para enviar una solicitud de aixos al servidor. El fondo devuelve un código de estado de respuesta para determinar si fue exitoso. Si falla, se le preguntará al usuario.
• 2. Si tiene éxito, el token en los datos devueltos persistirá y se sincronizará con Vuex;
• 3. Las interfaces posteriores que necesitan transportar tokens se procesan de manera uniforme en el interceptor de solicitudes; en el caso de la expiración del token, cooperé con el backend para crear un mecanismo de procesamiento de actualización no sensible para mejorar la experiencia del usuario al usar el sitio web; combinado con el protección de enrutamiento y navegación, combiné las protecciones de enrutamiento y navegación para manejar los casos a los que solo se puede acceder después de iniciar sesión. La página interna implementa la función de control de acceso a la interfaz

5 Implementación de actualización sin sentido

• Obtenga dos tokens, uno responsable de la autenticación token：access_tokeny otro responsable de la actualización token:refresh_token.
• Estos dos tokens se traen con cada solicitud y luego el interceptor de back-end determina si el token de autenticación es válido.
• Si es válido, acceda a él. Si no es válido, juzgará si el token de actualización es válido. Si es válido, devolverá el código de estado especificado.
• Luego, permítame llamar a la interfaz del token de actualización según el código de estado. Si el token de actualización falla, se me pedirá que vuelva a intentarlo.
  

6Gestión de permisos

• Primero, habrá un superadministrador para asignar permisos de roles.
• Cuando el usuario inicia sesión y salta a la página de inicio, en la guardia previa de enrutamiento, determine si el token se transporta y llame al despacho para enviar la solicitud de información del usuario en acciones y guardarla en vuex.
• Obtenga la matriz de información de permisos de usuario en vuex y filtre el identificador de nombre en la configuración de enrutamiento.
• Ya sea en la matriz de información del usuario actual y luego agregue rutas dinámicamente a través de agregar enrutador para mostrar las páginas de menú accesibles

Permisos de 7 botones.

• Solución uno:

  • 1. Defina un método global e impleméntelo con v-if
  • Idea: después de que el usuario inicie sesión correctamente, obtenga los permisos del botón del usuario (formato de matriz), guárdelos en la tienda, luego defina una función pública en la clase de herramienta, llame a la función en el botón y combine las palabras clave entrantes con las de la tienda. permisos hasIsEditdel botón hasIsEdit()Comparar para ver si existe, mostrarlo si existe, ocultarlo si no existe

• Solución 2

  ① Defina una instrucción personalizada global: los permisos a nivel de botón solo necesitan encapsular una instrucción o método global en main.js. Este método solo hace una cosa: recibir la identificación devuelta por el backend, que es el nivel de botón propiedad del usuario. Matriz de permisos.
  ②Después de obtener el logotipo, determine internamente si el logotipo está en la matriz y, de lo contrario, oculte la configuración de estilo del botón.
  ③ Se llama cuando se requieren permisos de botón: el valor es el identificador de permiso acordado con el backend.

// 控制页面中按钮的级别
Vue.directive('allow', {
    
       // binding是个形参，接收调用自定义指令的标识进行判断
  inserted: function(el, binding) {
    
    
    // 1. 首先需要获取到vuex中用户按钮级别的权限信息
    console.log(binding, 'bindingbinding')
    const points = store.state.user.userInfo.roles.points
    // 2. 根据使用指令传过来的权限标识, 判断用户拥有按钮级别的权限
    if (!points.includes(binding.value)) {
    
    
      el.style.display = 'none'
    }
  }
})
<button v-allow="'import_excel'">删除用户信息</button>
//import_excel 是和后端约定的按钮权限标识

División de 8 módulos

1. La división del módulo se divide principalmente enproduction：生产环境
2. desarrollo:开发环境
3. recurso publico

3.	公共资源  主要放置loader与resolve: {
    
    
4.	        extensions: ['.js', '.vue', '.json'],
5.	        alias: {
    
    
6.	            'vue$': 'vue/dist/vue.esm.js',
7.	            '@': path.join(__dirname, '../src')
8.	        }
9.	    },

10. Entorno de desarrollo: principalmente lugares que merecen agentes entre dominios
11. Entorno de producción: coloque principalmente compresión css y compresión js

// css压缩
optimize-css-assets-webpack-plugin

 //dist压缩包
 "zip-webpack-plugin": "^4.0.1"

//生产环境 copy静态资源
 "copy-webpack-plugin": "^11.0.0"

Referencia específica

9. Cómo procesar los datos del segundo flujo de archivos devueltos por el backend

1. Primero crea y paga dinero por un

10 el-table genera grandes cantidades de datos provocando problemas de retraso

1. Solución 1: use pl-table para resolver el problema de que la cantidad de datos en el-tree y el-table es demasiado grande (método de lista larga)
2. Use u-table para resolver el problema