用户增加角色

配方新填写再保存
配方增加保存时的字数限制

src/components/formula/FormulaConfig.vue

@@ -4,7 +4,7 @@ import SelectModal from 'components/common/SelectModal/index.vue'
 import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
 import { formulaNameMap } from 'libs/constant'
 import { cloneDeep } from 'lodash'
-import { inject, onMounted, ref, watch, watchEffect } from 'vue'
+import { inject, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 
 import { FtMessage } from '@/libs/message'
 import { compareJSON, convertValuesToInt, convertValuesToString } from '@/libs/utils'
@@ -134,7 +134,6 @@ watchEffect(() => {
   isFlip.value = formulaStore.flip
   // 后端给的数据类型是字符串型，前端需要的是int型，后端开发说（赵贺）后端不好转换，由前端进行转换.
   formData.value = convertValuesToInt(formData.value)
-  options.value = formulaStore.logLevelOptions
 })
 
 /**
@@ -177,6 +176,7 @@ watch(formData, (newValue) => {
     inputValue.value = newValue[focusedInput.value].toString()
   }
 }, { deep: true })
+const formRef = ref(null)
 
 /**
  * 处理表单提交
@@ -187,7 +187,11 @@ const handleSubmit = () => {
     FtMessage.warning('请输入配方名称')
     return
   }
-
+  // 表单验证
+  if (formData.value.name && formData.value.name.length > 20) {
+    FtMessage.warning('配方名称1-20字符')
+    return
+  }
   // 配方管理的【确定】
   if (props.type === 'formula') {
     onSaveFormula()
@@ -359,21 +363,41 @@ const handleLogCancel = () => {
 const openKeyboardType = (labelName: string) => {
   keyboardType.value = labelName === 'name' ? 'text' : 'number'
 }
+const size = 'default'
+// 新增配方方法
+const addFormula = async () => {
+  const formulaInfo = cloneDeep(formulaStore.defaultFormulaInfo)
+  console.log(formulaInfo)
+  formData.value = formulaInfo
+  await nextTick() // 等待DOM更新
+  // 移除左侧列表的选中
+  formData.value.name = ''
+  formData.value.formula_id = null
+  console.log('子组件方法被调用')
+}
+
+// 暴露方法给父组件
+defineExpose({
+  addFormula,
+})
 </script>
 
 <template>
   <transition name="slide-right">
     <div v-if="isFlip" class="formula-form">
-      <el-form :model="formData" label-width="auto" label-position="right" class="formulaFormItem" inline>
-        <el-form-item v-if="type !== 'setting'" label="配方名称" style="margin-top:20px">
+      <el-form ref="formRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
+        <el-form-item v-if="type !== 'setting'" label="配方名称" style="width: 100%;">
           <el-input
             v-model="formData.name"
             v-prevent-keyboard
+            :rules="[
+              { required: true, message: '配方名称必填', trigger: 'blur' },
+              { min: '1', max: '20', message: '配方名称1-20个字符', trigger: 'blur' },
+            ]"
             name="name"
+            prop="name"
             placeholder="配方名称"
-            maxlength="10"
             :disabled="type === 'home'"
-            class="formdata-input-home"
             @focus="openKeyboard"
           />
         </el-form-item>
@@ -381,7 +405,7 @@ const openKeyboardType = (labelName: string) => {
           v-for="(item) in formulaConfigList"
           :key="item.setting_id"
           :label="formulaNameMap[item.setting_id]"
-          style="margin-top:20px"
+          style="width: 50%;"
         >
           <template v-if="item.val_type === 'int'">
             <el-input
@@ -390,7 +414,6 @@ const openKeyboardType = (labelName: string) => {
               type="number"
               :name="item.setting_id"
               :controls="false"
-              class="formdata-input-home"
               :disabled="!item.is_visible_in_setting_page"
               @focus="(e) => openKeyboard(e, item)"
             >
@@ -404,7 +427,6 @@ const openKeyboardType = (labelName: string) => {
               v-model="formData[item.setting_id]"
               v-prevent-keyboard
               placeholder="请选择"
-              class="formdata-input-home"
               readonly
               @focus="openModal"
             >
@@ -416,7 +438,6 @@ const openKeyboardType = (labelName: string) => {
           <template v-else-if="item.val_type === 'boolean'">
             <el-radio-group
               v-model="formData[item.setting_id]"
-              class="formdata-input-home"
               :disabled="!item.is_visible_in_setting_page"
             >
               <el-radio :label="true">
@@ -429,7 +450,7 @@ const openKeyboardType = (labelName: string) => {
           </template>
         </el-form-item>
       </el-form>
-      <div v-if="type !== 'home'" class="formula-form-btn" :style="{ marginLeft: '33%' }">
+      <div v-if="type !== 'home'" :style="{ marginLeft: '33%' }">
         <slot name="formulaBtn">
           <div class="default-btn">
             <el-button v-if="type === 'setting'" class="config-btn" @click="handleResetDefault">
@@ -473,13 +494,11 @@ const openKeyboardType = (labelName: string) => {
     font-size: 20px !important;
     padding: 5px;
     padding-left: 15px;
+     align-items: center;
     //height: 81vh;
-    overflow: auto;
     .formulaFormItem{
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-    }
-    .formula-form-btn{
+     // display: grid;
+     // grid-template-columns: 1fr 1fr;
     }
     .default-btn{
       margin-top: 1rem;
@@ -490,10 +509,6 @@ const openKeyboardType = (labelName: string) => {
     }
   }
 
-  .formdata-input-home{
-    width: 15vw;
-  }
-
   .formula-form-item{
     display: grid;
     grid-template-columns: 1fr 1fr;

src/components/formula/FormulaTable.vue

@@ -13,6 +13,17 @@ const selectedIndex = ref<number | null>(null)
 const recipes = ref<Formula.FormulaItem[]>([])
 const currectFormula = ref<Formula.FormulaItem>()
 
+// 移除列表的选中
+const selectedIndexRest = async () => {
+  selectedIndex.value = null
+  console.log('子组件方法被调用')
+}
+
+// 暴露方法给父组件
+defineExpose({
+  selectedIndexRest,
+})
+
 onMounted(() => {
   initFormulaList()
 })
@@ -141,9 +152,9 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
   padding: 0;
   margin: 0;
   .formula-name{
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     color: var(--el-text-color-regular);
-    width: 8rem;
+    width: 10rem;
   }
 }
 
@@ -174,6 +185,7 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
 }
 
 .view-button, .delete-button {
+  font-size: 1rem;
   border: none;
   padding: 4px 8px;
   border-radius: 3px;
@@ -203,7 +215,7 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
 }
 
 .selected-icon {
-  color: #1890ff;
+  color: #0681f5;
   /* margin-left: 8px; */
 }
 </style>

src/components/home/config.vue

@@ -151,7 +151,7 @@ const onDefaultFormula = () => {
 <style lang="scss" scoped>
   .main-content{
     overflow: hidden;
-    height: auto;
+    //height: auto;
     //background: $gradient-color;
     padding: 15px;
     .formula-config{

src/components/setting/User.vue

@@ -96,6 +96,14 @@ const handleSelectionChange = (users: User.UserItem[]) => {
     <div class="user-table">
       <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
         <el-table-column prop="name" label="用户名" />
+        <el-table-column prop="roleType" label="角色">
+          <template #default="{ row }">
+            <span v-if="row.roleType === 'admin'">
+              管理员
+            </span>
+            <span v-else>普通用户</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="detail" label="操作" width="250" align="center">
           <template #default="scoped">
             <div class="user-opera">

src/libs/utils.ts

@@ -104,7 +104,7 @@ function isNumber(str: string | number) {
 export const convertValuesToInt = (jsonObj: Record<string, any>) => {
   const result: Record<string, any> = {}
   for (const [key, value] of Object.entries(jsonObj)) {
-    if (isNumber(value)) {
+    if (key !== 'name' && isNumber(value)) {
       result[key] = Number(value)
     }
     else {

src/views/formula/index.vue

@@ -1,26 +1,21 @@
 <script lang="ts" setup>
-import { syncSendCmd } from 'apis/system'
 import FormulaConfig from 'components/formula/FormulaConfig.vue'
 import FormulaTable from 'components/formula/FormulaTable.vue'
-import { FtMessage } from 'libs/message'
+import { ref } from 'vue'
 
-import { useFormulaStore } from '@/stores/formulaStore'
-
-const formulaStore = useFormulaStore()
+// 新增配方 修改为先填充默认配置 点击确定提交
+const formRef = ref(null)
 const onAddFormula = () => {
-  const params = {
-    className: 'SettingMgrService',
-    fnName: 'addNewFormula',
+  selectedIndexRest()
+  if (formRef.value) {
+    formRef.value.addFormula() // 调用子组件方法
+  }
+}
+const tableRef = ref(null)
+const selectedIndexRest = () => {
+  if (tableRef.value) {
+    tableRef.value.selectedIndexRest() // 调用子组件方法
   }
-  formulaStore.updateFlip(false)
-  syncSendCmd(params).then((res) => {
-    if (res.ackcode === 0) {
-      FtMessage.success('新增成功')
-      formulaStore.updateSelectedIndex(0)
-      formulaStore.initFormulaList()
-      formulaStore.updateFlip(true)
-    }
-  })
 }
 </script>
 
@@ -44,11 +39,11 @@ const onAddFormula = () => {
           </bt-button>
         </div>
         <div class="formula-list">
-          <FormulaTable />
+          <FormulaTable ref="tableRef" />
         </div>
       </div>
       <div class="formula-right">
-        <FormulaConfig type="formula" />
+        <FormulaConfig ref="formRef" type="formula" />
       </div>
     </main>
   </div>