update：代码格式化

.editorconfig

+root = true
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 120

.prettierrc.js

+/**
+ * 优先级高于.editorconfig
+ * https://prettier.io/docs/en/options.html
+ * 单引号，双引号，末尾是否逗号，是否需要分号根据团队需要配置
+ * 但是prettier对vue template的格式化能力有限，建议多观察是否满足需要，最佳实践还是要结合eslint进行风格统一
+ */
+module.exports = {
+  arrowParens: "always",
+  bracketSameLine: true, // https://prettier.io/docs/en/options.html#bracket-line
+  bracketSpacing: true,
+  embeddedLanguageFormatting: "auto",
+  htmlWhitespaceSensitivity: "css",
+  insertPragma: false,
+  jsxSingleQuote: false,
+  printWidth: 120, // 如果属性过多需要换行，减少该值
+  proseWrap: "preserve",
+  quoteProps: "as-needed",
+  requirePragma: false,
+  semi: true,
+  singleAttributePerLine: false,
+  singleQuote: false, // 双引号
+  tabWidth: 2, // 缩进
+  trailingComma: "es5",
+  useTabs: false, // 不要用tab缩进
+  vueIndentScriptAndStyle: false,
+  endOfLine: "lf",
+};

src/bg-ui/bg-upload-image.vue

@@ -7,7 +7,7 @@
     :action="action"
     :data="{
       directory: 'image',
-      uniqueCode: false
+      uniqueCode: false,
     }"
     :auto-upload="autoUpload"
     :list-type="listType"
@@ -17,8 +17,7 @@
     :on-success="handleSuccess"
     :on-remove="handleRemove"
     :on-preview="handlePreview"
-    :multiple="multiple"
-  >
+    :multiple="multiple">
     <template v-slot:trigger>
       <el-icon v-if="listType === 'picture-card'"><Plus /></el-icon>
       <!-- <i class="el-icon-plus" v-if="listType === 'picture-card'"></i> -->
@@ -28,36 +27,29 @@
     </template>
 
     <template v-if="!autoUpload">
-      <el-button
-        type="success"
-        icon="el-icon-position"
-        @click="submitUpload"
-        style="margin-left: 16px"
-      >
+      <el-button type="success" icon="el-icon-position" @click="submitUpload" style="margin-left: 16px">
         上传到服务器
       </el-button>
     </template>
 
     <template v-slot:tip v-if="showTips && tips">
-      <div class="el-upload__tip" style="color:#909bb6;">
-        {{ customTips||tips }}
+      <div class="el-upload__tip" style="color: #909bb6">
+        {{ customTips || tips }}
       </div>
     </template>
   </el-upload>
 
-  <el-dialog title="图片预览" v-model="dialogVisible" custom-class="bg-upload-image-dialog">
-    <img style="margin:30px 0;width: 600px;" :src="dialogImageUrl" alt="Preview Image" />
+  <el-dialog title="图片预览" v-model="dialogVisible" class="bg-upload-image-dialog">
+    <img style="margin: 30px 0; width: 600px" :src="dialogImageUrl" alt="Preview Image" />
   </el-dialog>
 </template>
 
 <script>
-import {
-  UploadFilled
-} from '@element-plus/icons-vue'
+import { UploadFilled } from "@element-plus/icons-vue";
 export default {
   name: "BgUploadImage",
   props: {
-    modelValue:{
+    modelValue: {
       type: Array,
       default: () => [],
     },
@@ -99,12 +91,12 @@ export default {
       type: Boolean,
       default: false,
     }, // 显示提示
-    customTips:{
+    customTips: {
       type: String,
       default: "",
-    },// 自定义提示内容 
+    }, // 自定义提示内容
   },
-  emits: ['update:modelValue',"change"],
+  emits: ["update:modelValue", "change"],
   computed: {
     acceptTypes() {
       if (Array.isArray(this.accept)) {
@@ -146,34 +138,34 @@ export default {
     return {
       fileList: [],
       UploadFilled,
-      dialogImageUrl:'',
-      dialogVisible:false
+      dialogImageUrl: "",
+      dialogVisible: false,
     };
   },
   watch: {
     modelValue() {
       let newStr = this.modelValue.map((v) => v.url).join(",");
-      let oldStr = this.fileList
-        .map((v) => (v.response && v.response.data) || v.url)
-        .join(",");
+      let oldStr = this.fileList.map((v) => (v.response && v.response.data) || v.url).join(",");
 
       if (newStr !== oldStr) {
         this.fileList = [...this.modelValue];
       }
       this.$nextTick().then(() => {
-        this.checkLimit(this.modelValue)
+        this.checkLimit(this.modelValue);
       });
     },
   },
   methods: {
     checkLimit(filelist) {
-      const limit = this.limit
-      const uploadDom = this.$refs['upload']
-      const length = uploadDom.$el.children[0].children.length
+      const limit = this.limit;
+      const uploadDom = this.$refs["upload"];
+      const length = uploadDom.$el.children[0].children.length;
       if (filelist.length === limit) {
-        uploadDom.$el.children[0].children[length-1].style.display = 'none'
+        uploadDom.$el.children[0].children[length - 1].style.display = "none";
       } else {
-        uploadDom.$el.children[0].children[length-1]?uploadDom.$el.children[0].children[length-1].style.display = '':''
+        uploadDom.$el.children[0].children[length - 1]
+          ? (uploadDom.$el.children[0].children[length - 1].style.display = "")
+          : "";
       }
     },
     handleBeforeUpload(file) {
@@ -184,12 +176,9 @@ export default {
       };
       let temp = file.name.split(".");
       let type = "." + temp[temp.length - 1].toLocaleLowerCase();
-      let fileTypeIsOk =
-        this.types.length === 0 || this.types.indexOf(type) > -1;
+      let fileTypeIsOk = this.types.length === 0 || this.types.indexOf(type) > -1;
       let fileSizeIsOk =
-        this.fileSize === 0 ||
-        this.fileSize === undefined ||
-        file.size / units[this.fileSizeUnit] <= this.fileSize;
+        this.fileSize === 0 || this.fileSize === undefined || file.size / units[this.fileSizeUnit] <= this.fileSize;
       let checked = fileTypeIsOk && fileSizeIsOk;
 
       if (!checked) {
@@ -200,15 +189,15 @@ export default {
     },
     handleSuccess(response, file, fileList) {
       this.updateFileList(fileList);
-      this.checkLimit(fileList)
+      this.checkLimit(fileList);
     },
     handleRemove(file, fileList) {
       this.updateFileList(fileList);
-      this.checkLimit(fileList)
+      this.checkLimit(fileList);
     },
     handlePreview({ name, url }) {
-      this.dialogImageUrl = url
-      this.dialogVisible = true
+      this.dialogImageUrl = url;
+      this.dialogVisible = true;
       // let a = document.createElement("a"); // 生成一个a元素
       // let event = new MouseEvent("click"); // 创建一个单击事件
 
@@ -229,7 +218,7 @@ export default {
       console.log(values);
 
       this.$emit("update:modelValue", values);
-      this.$emit("change",values);
+      this.$emit("change", values);
     },
     submitUpload() {
       this.$refs.upload.submit();

src/page/main/develop/account/add/contact-form.vue

@@ -5,8 +5,7 @@
     :model="contactForm"
     :rules="contactFormRules"
     ref="contactRef"
-    style="max-width: 66%"
-  >
+    style="max-width: 66%">
     <el-form-item label="联系人姓名" prop="contact_name">
       <el-input v-model="contactForm.contact_name" />
     </el-form-item>
@@ -14,24 +13,22 @@
       <el-input v-model="contactForm.contact_phone" />
     </el-form-item>
     <el-form-item label="联系人邮箱" prop="contact_email">
-      <el-input v-model="contactForm.contact_email"/>
+      <el-input v-model="contactForm.contact_email" />
     </el-form-item>
-     <el-form-item label="备注" prop="remark">
-      <el-input type="textarea" :rows="3" v-model="contactForm.remark" show-word-limit maxlength="300"/>
+    <el-form-item label="备注" prop="remark">
+      <el-input type="textarea" :rows="3" v-model="contactForm.remark" show-word-limit maxlength="300" />
     </el-form-item>
   </el-form>
 </template>
 
 <script setup>
-import { reactive, ref, onMounted,getCurrentInstance } from 'vue'
-const { proxy } = getCurrentInstance()
-const { $axios,$message } = proxy
+import { reactive, ref, onMounted } from "vue";
 const contactForm = reactive({
-  contact_name: '',
-  contact_phone: '',
-  contact_email: '',
-  remark: '',
-})
+  contact_name: "",
+  contact_phone: "",
+  contact_email: "",
+  remark: "",
+});
 const props = defineProps({
   formType: {
     type: Boolean,
@@ -39,14 +36,14 @@ const props = defineProps({
   },
   id: {
     type: String,
-    default: '', 
-  }
+    default: "",
+  },
 });
 
 const checkPhone = (rule, value, callback) => {
   var phone_ruler = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
   setTimeout(() => {
-    if (!phone_ruler.test(value)&&value.length!==0) {
+    if (!phone_ruler.test(value) && value.length !== 0) {
       callback(new Error("请输入正确的手机号码"));
     } else {
       callback();
@@ -72,55 +69,53 @@ const checkPhone = (rule, value, callback) => {
 // }
 
 const checkName = (rule, value, callback) => {
-  var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/
+  var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/;
   if (!reg.test(value)) {
-    callback(new Error("只能输入字母、数字和汉字"))
-  }else {
-    callback()
+    callback(new Error("只能输入字母、数字和汉字"));
+  } else {
+    callback();
   }
-}
+};
 
 const contactFormRules = reactive({
   contact_name: [
-    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
-    { max: 50, message: "联系人姓名最大长度为50个字符", trigger: "blur"},
-    { validator: checkName, trigger: 'blur' },
+    { required: true, message: "请输入联系人姓名", trigger: "blur" },
+    { max: 50, message: "联系人姓名最大长度为50个字符", trigger: "blur" },
+    { validator: checkName, trigger: "blur" },
   ],
   contact_phone: [
-    { required: true, message: '请输入联系人手机号', trigger: 'blur' },
-    { validator: checkPhone, trigger: 'blur' },
+    { required: true, message: "请输入联系人手机号", trigger: "blur" },
+    { validator: checkPhone, trigger: "blur" },
     // { validator: checkPhoneRepet, trigger: 'blur' }
   ],
   contact_email: [
-    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' },
-    { max: 100, message: "邮箱最大长度为100个字符", trigger: "blur"},
-  ]
-})
-const contactRef = ref(null)
-const emit = defineEmits(['action'])
+    { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
+    { max: 100, message: "邮箱最大长度为100个字符", trigger: "blur" },
+  ],
+});
+const contactRef = ref(null);
+const emit = defineEmits(["action"]);
 
 const submitForm = async () => {
-  if (!contactRef) return
+  if (!contactRef) return;
   await contactRef.value.validate((valid, fields) => {
     if (valid) {
-      emit('action', contactForm)
+      emit("action", contactForm);
     } else {
-      emit('action',null)
+      emit("action", null);
     }
-  })
-}
+  });
+};
 const clearForm = () => {
-  if (!contactRef) return
-  contactRef.value.resetFields()
-} 
+  if (!contactRef) return;
+  contactRef.value.resetFields();
+};
 
 const setForm = (data) => {
-   Object.assign(contactForm, data);
-}
+  Object.assign(contactForm, data);
+};
 
-onMounted(() => {
-   
-})
+onMounted(() => {});
 
-defineExpose({ submitForm, clearForm, setForm })
-</script>
\ No newline at end of file
+defineExpose({ submitForm, clearForm, setForm });
+</script>

src/page/main/home-config/banner/edit/banner-form.vue

 <template>
-  <el-form
-    :model="formData"
-    :rules="formRules"
-    ref="form"
-    style="max-width: 1048px"
-    class="form"
-  >
+  <el-form :model="formData" :rules="formRules" ref="form" style="max-width: 1048px" class="form">
     <el-form-item label="banner名称" prop="banner_name">
       <el-input v-model="formData.banner_name" />
     </el-form-item>
@@ -13,75 +7,70 @@
       <el-input v-model="formData.link_address" />
     </el-form-item>
     <el-form-item label="上传banner图片" prop="banner_image">
-       <bg-upload-image v-model="formData.banner_image" :fileSize="1" :showTips="true" customTips="请选择图片上传：大小1920 * 560像素支持jpg、png等格式，图片需小于1MB" :limit="1" listType="picture-card" :accept="['.jpg','.jpeg','.png']"></bg-upload-image>
+      <bg-upload-image
+        v-model="formData.banner_image"
+        :fileSize="1"
+        :showTips="true"
+        customTips="请选择图片上传：大小1920 * 560像素支持jpg、png等格式，图片需小于1MB"
+        :limit="1"
+        listType="picture-card"
+        :accept="['.jpg', '.jpeg', '.png']"></bg-upload-image>
     </el-form-item>
     <el-form-item label="是否启用" prop="state" class="state_form_item">
-      <bg-switch :labels="['否','是']" :values="[0,1]" v-model="formData.state"></bg-switch>
+      <bg-switch :labels="['否', '是']" :values="[0, 1]" v-model="formData.state"></bg-switch>
     </el-form-item>
   </el-form>
 </template>
 
 <script setup>
-import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
-import axios from '../../../../../request/http.js'
-import { ElMessage } from 'element-plus'
-import { useRoute, useRouter } from 'vue-router'
-const router = useRouter()
-const route = useRoute()
-const form = ref(null)
+import { reactive, toRefs, ref, onBeforeMount, nextTick } from "vue";
+import axios from "../../../../../request/http.js";
+import { ElMessage } from "element-plus";
+import { useRoute, useRouter } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const form = ref(null);
 const state = reactive({
   formData: {
     banner_name: "",
     link_address: "",
     banner_image: [],
-    state: 1
+    state: 1,
   },
   formRules: {
-    banner_name: [
-      { required: true, message: '请输入banner名称', trigger: 'blur' },
-    ],
-    banner_image: [
-      { required: true, message: '请上传banner图', trigger: 'change' },
-    ],
-    state: [
-      { required: true, message: '请选择启用状态', trigger: 'change' },
-    ],
-  }
-})
+    banner_name: [{ required: true, message: "请输入banner名称", trigger: "blur" }],
+    banner_image: [{ required: true, message: "请上传banner图", trigger: "change" }],
+    state: [{ required: true, message: "请选择启用状态", trigger: "change" }],
+  },
+});
 
-const emit = defineEmits(['action'])
+const emit = defineEmits(["action"]);
 
 const submitForm = async () => {
-  if (!form) return
+  if (!form) return;
   await form.value.validate((valid, fields) => {
     if (valid) {
-      emit('action', state.formData)
+      emit("action", state.formData);
     } else {
-      emit('action',null)
+      emit("action", null);
     }
-  })
-}
+  });
+};
 
 const clearForm = () => {
-  if (!form) return
-  form.value.resetFields()
-
-} 
+  if (!form) return;
+  form.value.resetFields();
+};
 
 const setForm = (data) => {
   Object.assign(state.formData, data);
-}
+};
+
+onBeforeMount(() => {});
 
-onBeforeMount(() => {
-  
-})
-    
-const {
-  formData,
-  formRules,
-} = toRefs(state)
+const { formData, formRules } = toRefs(state);
 
-defineExpose({ submitForm, clearForm, setForm })
+defineExpose({ submitForm, clearForm, setForm });
 </script>
 
 <style lang="scss" scoped>
@@ -104,4 +93,4 @@ defineExpose({ submitForm, clearForm, setForm })
     }
   }
 }
-</style>
\ No newline at end of file
+</style>

src/page/main/system/organization/org-user/org-person-form.vue

@@ -5,83 +5,82 @@
     :model="orgPersonForm"
     :rules="orgPersonFormRules"
     ref="orgPersonFormRef"
-    style="max-width: 66%"
-  >
+    style="max-width: 66%">
     <el-form-item label="联系人姓名" prop="contact_name">
       <el-input v-model="orgPersonForm.contact_name" />
     </el-form-item>
     <el-form-item label="证件类型" prop="document_type">
       <el-select v-model="orgPersonForm.document_type" placeholder="请选择证件类型" style="width: 100%">
-        <el-option
-          v-for="item in documentTypeList"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
+        <el-option v-for="item in documentTypeList" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
     </el-form-item>
     <el-form-item label="证件号" prop="document_number">
       <el-input v-model="orgPersonForm.document_number" />
     </el-form-item>
     <el-form-item label="联系人邮箱" prop="contact_email">
-      <el-input v-model="orgPersonForm.contact_email"/>
+      <el-input v-model="orgPersonForm.contact_email" />
     </el-form-item>
-     <el-form-item label="备注" prop="remark">
+    <el-form-item label="备注" prop="remark">
       <el-input type="textarea" :rows="3" v-model="orgPersonForm.remark" />
     </el-form-item>
   </el-form>
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted } from "vue";
 
 const orgPersonForm = reactive({
-  contact_name: '',
-  document_type: '',
-  document_number: '',
-  contact_email: '',
-  remark: '',
-})
+  contact_name: "",
+  document_type: "",
+  document_number: "",
+  contact_email: "",
+  remark: "",
+});
 
-const documentTypeList = ref([{
-  label: '身份证',
-  value: 1
-}])
+const documentTypeList = ref([
+  {
+    label: "身份证",
+    value: 1,
+  },
+]);
 
 const orgPersonFormRules = reactive({
   contact_email: [
     // { required: true, message: '请输入手机号', trigger: 'blur' },
-    { type: 'email',message: '请输入正确的邮箱', trigger: 'blur' }
+    { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
   ],
   document_number: [
-    { pattern:  /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/,  message: '请输入正确的身份证号', trigger: 'blur' }
-  ]
-})
-const orgPersonFormRef = ref(null)
-const emit = defineEmits(['action'])
+    {
+      pattern:
+        /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/,
+      message: "请输入正确的身份证号",
+      trigger: "blur",
+    },
+  ],
+});
+const orgPersonFormRef = ref(null);
+const emit = defineEmits(["action"]);
 
 const submitForm = async () => {
-  if (!orgPersonFormRef) return
+  if (!orgPersonFormRef) return;
   await orgPersonFormRef.value.validate((valid, fields) => {
     if (valid) {
-      emit('action', orgPersonForm)
+      emit("action", orgPersonForm);
     } else {
-      emit('action',null)
+      emit("action", null);
     }
-  })
-}
+  });
+};
 const clearForm = () => {
-  if (!orgPersonFormRef) return
-  orgPersonFormRef.value.resetFields()
-} 
+  if (!orgPersonFormRef) return;
+  orgPersonFormRef.value.resetFields();
+};
 
 const setForm = (data) => {
   Object.assign(orgPersonForm, data);
-}
+};
 
-onMounted(() => {
-   
-})
+onMounted(() => {});
 
-defineExpose({ submitForm, clearForm, setForm })
-</script>
\ No newline at end of file
+defineExpose({ submitForm, clearForm, setForm });
+</script>