Merge pull request 'feat:完成了个人中心的样式调整，修复了工单界面一些显示错误' (#22) from wxy into master

Reviewed-on: http://git.feashow.cn/feashow/SmartOpsWeb/pulls/22

src/views/auth/index.vue

@@ -1,133 +1,133 @@
 <template>
-  <div class="my">
-    <el-row :gutter="20">
-      <el-col :span="10" :xs="24">
-        <el-card class="box-card1">
-          <!-- 标题 -->
-          <template #header>
-            <div class="card-header">
-              <div>个人信息</div>
-            </div>
-          </template>
-          <div class="userDetail">
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <User/>
-                </el-icon>
-                用户名:
+  <div class="my" style="margin-top:7vh ;">
+    <el-row :gutter="10">
+      <div class="mybox">
+        <el-col :span="infoWidth" :xs="24">
+          <el-card class="box-card1">
+            <!-- 标题 -->
+            <template #header>
+              <div class="card-header">
+                <div v-if="isShowDiv"></div>
+                <div style="font-weight: bold">个人信息 <span v-if="isShowPassword">:</span></div>
+                <el-button v-if="isShowDiv" @click="changePassword" type="primary" plain size="small">修改密码</el-button>
               </div>
-              <div>{{ userParams.userName }}</div>
-            </div>
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <User/>
-                </el-icon>
-                用户名称:
+
+            </template>
+            <div class="userDetail">
+              <div class="userInfo_item">
+                <div style="display: flex;align-items: center" class="userInfo_label">
+                  <el-icon size="18" style="margin-right: 5px">
+                    <User />
+                  </el-icon>
+                  <strong>工号 :</strong>
+
+
+                </div>
+                <div>{{ userParams.userNumber }}</div>
               </div>
-              <div>{{ userParams.nickName }}</div>
-            </div>
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <Notification/>
-                </el-icon>
-                工号:
+              <div class="userInfo_item">
+                <div style="display: flex;align-items: center" class="userInfo_label">
+                  <el-icon size="18" style="margin-right: 5px">
+                    <Notification />
+                  </el-icon>
+                  <strong>邮箱 :</strong>
+
+                </div>
+                <div>{{ userParams.email }}</div>
               </div>
-              <div>{{ userParams.workCode }}</div>
-            </div>
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <Phone/>
-                </el-icon>
-                电话号码:
+              <div class="userInfo_item">
+                <div style="display: flex;align-items: center" class="userInfo_label">
+                  <el-icon size="18" style="margin-right: 5px">
+                    <Notification />
+                  </el-icon><strong>登录账号 :</strong>
+
+                </div>
+                <div>{{ userParams.loginAccount }}</div>
               </div>
-              <div>{{ userParams.mobile }}</div>
-            </div>
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <House/>
-                </el-icon>
-                所属公司:
+              <div class="userInfo_item">
+                <div style="display: flex;align-items: center" class="userInfo_label">
+                  <el-icon size="18" style="margin-right: 5px">
+                    <Folder />
+                  </el-icon>
+                  <strong>用户名称 :</strong>
+
+                </div>
+                <div>{{ userParams.userName }}</div>
               </div>
-              <div>{{ userParams.subCompanyName }}</div>
-            </div>
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <FolderOpened/>
-                </el-icon>
-                所属部门:
+              <div class="userInfo_item">
+                <div style="display: flex;align-items: center" class="userInfo_label">
+                  <el-icon size="18" style="margin-right: 5px">
+                    <Folder />
+                  </el-icon>
+                  <strong>手机号码 :</strong>
+
+                </div>
+                <div>{{ userParams.userPhone }}</div>
               </div>
-              <div>{{ userParams.departmentName }}</div>
-            </div>
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <Folder/>
-                </el-icon>
-                岗位:
+              <div class="userInfo_item">
+                <div style="display: flex;align-items: center" class="userInfo_label">
+                  <el-icon size="18" style="margin-right: 5px">
+                    <Folder />
+                  </el-icon>
+                  <strong>账号类型 :</strong>
+
+                </div>
+                <div>{{ userParams.accountType }}</div>
               </div>
-              <div>{{ userParams.jobActivityDesc }}</div>
+
             </div>
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <Wallet/>
-                </el-icon>
-                账号类型:
+          </el-card>
+        </el-col>
+        <div class="line" v-if="isShowPassword"></div>
+        <el-col :span="10" :xs="24" v-if="isShowPassword">
+          <el-card class="box-card">
+            <!-- 标题 -->
+            <template #header>
+              <div class="card-header">
+                <div style="font-weight: bold">{{ isInitPassword ? '修改密码 :' : '初始化密码 :' }}</div>
               </div>
-              <div>{{ userParams.accountType === '0' ? '主账号' : '次账号' }}</div>
+            </template>
+            <div class="card-body">
+              <el-form label-width="120px" ref="passwordRef" :model="userPassword" :rules="rules">
+                <el-form-item label="旧密码" prop="oldPassword" :required="true" style="text-align:left;margin: 7vh 0;"
+                  v-if="isInitPassword">
+                  <el-input placeholder="请输入旧密码" v-model="userPassword.oldPassword" type="password" :prefix-icon="Lock"
+                    show-password="true" />
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword" :required="true" style="text-align:left;margin: 7vh 0">
+                  <el-input placeholder="请输入新密码" v-model="userPassword.newPassword" type="password" :prefix-icon="Lock"
+                    show-password="true" />
+                </el-form-item>
+                <el-form-item label="确认密码" prop="confirmPassword" :required="true"
+                  style="text-align:left;margin-top: 7vh;margin-bottom: 5vh">
+                  <el-input placeholder="请确认新密码" v-model="userPassword.confirmPassword" type="password"
+                    :prefix-icon="Lock" show-password="true" />
+                </el-form-item>
+                <el-form-item>
+                  <div class="button-word">
+                    <el-button color="#409eff" @click="handleSubmit" style="color: white">提交</el-button>
+                    <el-button color="#409eff" @click="close" style="color: white">关闭</el-button>
+                  </div>
+                </el-form-item>
+              </el-form>
             </div>
-            <div class="userInfo_item">
-              <div style="display: flex;align-items: center">
-                <el-icon size="18" style="margin-right: 5px">
-                  <User/>
-                </el-icon>
-                所属角色:
-              </div>
-              <div>{{ belongToRole(userParams.roles) }}</div>
-            </div>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :span="14" :xs="24">
-        <el-card class="box-card">
-          <!-- 标题 -->
-          <template #header>
-            <div class="card-header">
-              <div>{{ isInitPassword ? '修改密码' : '初始化密码' }}</div>
-            </div>
-          </template>
-          <el-form label-width="120px" ref="passwordRef" :model="userPassword" :rules="rules">
-            <el-form-item label="旧密码" prop="oldPassword" :required="true" style="text-align:left" v-if="isInitPassword">
-              <el-input placeholder="请输入旧密码" v-model="userPassword.oldPassword" type="password"/>
-            </el-form-item>
-            <el-form-item label="新密码" prop="newPassword" :required="true" style="text-align:left">
-              <el-input placeholder="请输入新密码" v-model="userPassword.newPassword" type="password"/>
-            </el-form-item>
-            <el-form-item label="确认密码" prop="confirmPassword" :required="true" style="text-align:left">
-              <el-input placeholder="请确认新密码" v-model="userPassword.confirmPassword" type="password"/>
-            </el-form-item>
-            <el-form-item>
-              <el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
-              <el-button @click="close">关闭</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </el-col>
+          </el-card>
+        </el-col>
+      </div>
     </el-row>
   </div>
 </template>
 <script setup>
-import {ElNotification} from 'element-plus'
-import {useTagsView} from '@/stores/tagsview.js'
-import {editPassword} from "@/api/auth/auth";
+import { ElNotification } from 'element-plus'
+import { useTagsView } from '@/stores/tagsview.js'
+import { editPassword } from "@/api/auth/auth";
+import { Lock } from '@element-plus/icons-vue'
+import { ref } from 'vue';
 
-const isInitPassword = ref(false);
+const infoWidth = ref(22)
+const isShowDiv = ref(true)
+const isShowPassword = ref(false);
+const isInitPassword = ref(true);
 const userParams = ref({});
 const passwordRef = ref();
 const router = useRouter()
@@ -137,6 +137,7 @@ const userPassword = ref({
   confirmPassword: ''
 });
 const tagsViewStore = useTagsView()
+
 const validatePasswordComplexity = (rule, value, callback) => {
   const reg = /^(?=.*[a-zA-Z])(?=.*\d).{1,9}$/; //密码必须是至少包含字母、数字，1-9位
   if (!reg.test(value)) {
@@ -156,10 +157,10 @@ const validatePasswordEquality = (rule, value, callback) => {
 }
 const rules = reactive({
   oldPassword: [
-    {required: true, message: "旧密码不能为空", trigger: ["change", "blur"]},
+    { required: true, message: "旧密码不能为空", trigger: ["change", "blur"] },
   ],
   newPassword: [
-    {required: true, message: "新密码不能为空", trigger: ["change", "blur"]},
+    { required: true, message: "新密码不能为空", trigger: ["change", "blur"] },
     {
       required: true,
       trigger: ["change", "blur"],
@@ -167,7 +168,7 @@ const rules = reactive({
     }
   ],
   confirmPassword: [
-    {required: true, message: "确认密码不能为空", trigger: ["change", "blur"]},
+    { required: true, message: "确认密码不能为空", trigger: ["change", "blur"] },
     {
       required: true,
       trigger: ["change", "blur"],
@@ -190,30 +191,58 @@ const belongToRole = (roles) => {
 
 // 修改密码
 const handleSubmit = async () => {
-    editPassword({
-      ...userPassword.value
-    }).then(res => {
-      ElNotification({
-        title: '提示',
-        message: res.msg,
-        type: res.code === 1000 ? 'success' : 'error'
-      })
-      if (res.code === 1000) {
-        passwordRef.value.resetFields()
-      }
+  ElMessageBox.confirm(
+    '提交成功',
+    {
+      confirmButtonText: '关闭',
+      dangerouslyUseHTMLString: true,
+      // type: 'warning',
+      center: true,
+      showCancelButton: false,
+      'show-close': false,
+      customStyle: {
+        'max-width': '15%',
+        height: '40%'
+      },
+      message: `<svg t="1726160648055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2671" data-spm-anchor-id="a313x.search_index.0.i2.2bb23a81IdR6cV" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#67c23a" p-id="2672" data-spm-anchor-id="a313x.search_index.0.i3.2bb23a81IdR6cV" class=""></path></svg>
+      <br><br><div style="font-size: 18px;text-align:center"> 提交成功</div><br><br>`
+
+    }
+  )
+  editPassword({
+    ...userPassword.value
+  }).then(res => {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
     })
+    if (res.code === 1000) {
+      passwordRef.value.resetFields()
+    }
+  })
 }
 // 关闭
 const close = () => {
-  tagsViewStore.delVisitedViews(router.currentRoute.value.path)
-  router.push('/')
+  // tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+  // router.push('/')
+  isShowPassword.value = false
+  isShowDiv.value = true
+  infoWidth.value = 22
+}
+
+const changePassword = () => {
+  isShowPassword.value = true
+  isShowDiv.value = false
+  infoWidth.value = 10
 }
 // onMounted(() => {
 //   getInfo()
 // })
 </script>
 <style lang="scss">
-body, div {
+body,
+div {
   margin: 0;
   padding: 0;
 }
@@ -222,6 +251,41 @@ body, div {
   margin: 0 auto;
   margin-top: 20px;
 
+  .mybox {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+
+
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between
+  }
+
+  .box-card {
+    height: 100%;
+    // width: 100%;
+    // background-color: blue;
+
+  }
+
+  .card-body {
+    width: 90%;
+    // display: flex;
+    height: 45vh;
+    // background-color: red;
+
+    // justify-content: space-around;
+    // flex-direction: column;
+  }
+
+  .line {
+
+    border-left: 1px solid #000;
+  }
+
   .userDetail {
     .userImg {
       height: 170px;
@@ -239,21 +303,37 @@ body, div {
   }
 
   .userInfo_item {
-    display: flex;align-items: center;
+    display: flex;
+    align-items: center;
     justify-content: space-between;
-    height: 40px;
-    border-bottom-style: solid;
-    border-color: #daddd2;
-    border-width: 1px;
+    // height: 70px;
+    height: 9vh;
+    // border-bottom-style: solid;
+    // border-color: #daddd2;
+    // border-width: 1px;
     //text-align: left;
     //line-height: 40px;
 
   }
 
+  .userInfo_label {
+    width: 100%;
+    border-bottom-style: solid;
+    border-color: #daddd2;
+    border-width: 2px;
+  }
+
   //
   //.userInfo_item > div {
   //  float: right;
   //}
-}
 
+  .button-word {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+
+}
 </style>

src/views/task-management/all-work-order/index.vue

@@ -1,6 +1,5 @@
 <template>
   <fvSearchForm :searchConfig="searchConfig" @search="search">
-    <FvSelect></FvSelect>
   </fvSearchForm>
   <fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
   <WorkDialog ref="workDialogRef"></WorkDialog>
@@ -59,7 +58,6 @@ const searchConfig = reactive([
       cacheKey: 'work_order_status',
       clearable: true,
       filterable: true,
-      filterable: true,
     },
     component: shallowRef(fvSelect),
   }, {
@@ -83,7 +81,7 @@ const searchConfig = reactive([
   },
   {
     label: '创建日期',
-    prop: 'requirementName',
+    prop: 'requirementDate',
     props: {
       placeholder: '请选择',
       clearable: true,
@@ -92,7 +90,7 @@ const searchConfig = reactive([
     component: 'el-date-picker',
   }, {
     label: '处理时间',
-    prop: 'requirementName',
+    prop: 'requirementDate',
     props: {
       placeholder: '请选择',
       clearable: true,
@@ -101,7 +99,7 @@ const searchConfig = reactive([
     component: 'el-date-picker',
   }, {
     label: '完成时间',
-    prop: 'requirementName',
+    prop: 'requirementDate',
     props: {
       placeholder: '请选择',
       clearable: true,
@@ -245,8 +243,8 @@ const handleClose = (row) => {
     '确定要关单吗?',
     '温馨提示',
     {
-      confirmButtonText: 'OK',
-      cancelButtonText: 'Cancel',
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
       type: 'warning',
     }
   )
@@ -269,8 +267,8 @@ const handleDelete = (row) => {
     '确定要删除吗?',
     '温馨提示',
     {
-      confirmButtonText: 'OK',
-      cancelButtonText: 'Cancel',
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
       type: 'warning',
     }
   )