检查管理-检查项目(未完善)

src/views/service-management/medical-record-management/check-item.vue

@@ -9,17 +9,298 @@
         color: #333333;"
       >检查项目</span>
     </div>
+    <el-form ref="form" label-width="110px" :model="form" :rules="rules">
+      <!-- 检查项目可以添加n个，所以for循环 -->
+      <div
+        v-for="(item, index) in form.settingList"
+        :key="index"
+        class="card"
+      >
+        <div class="formTop">
+          <div class="title">班次{{ convertToChineseNumeral( index+ 1) }}</div>
+          <div>
+            <el-button
+              v-if="(!item.id) || (item.id && item.status === '1' && item.isDelete === '1')"
+              icon="el-icon-delete"
+              size="mini"
+              class="delBtn"
+              @click="handleDel(item, index)"
+            >删除项目</el-button>
+          </div>
+        </div>
+        <!-- 第一行:项目名称、检查类型、项目单价 -->
+        <el-row :gutter="41">
+          <el-col :span="8">
+            <el-form-item
+              :ref="'settingList.'+index+'.name' "
+              label="项目名称:"
+              :prop="'settingList.'+index+'.name' "
+              :rules="[
+                { required: true, message: '请选择班次名称', trigger: 'blur' }
+              ]"
+            >
+              <el-input
+                v-model="item.name"
+                :disabled="item.isUpdate === '1'"
+                maxlength="10"
+                show-word-limit
+                placeholder="请输入项目名称"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :ref="'settingList.'+index+'.type' "
+              label="检查类型:"
+              :prop="'settingList.'+index+'.type' "
+              :rules="[
+                { required: true, message: '请选择检查类型', trigger: 'change' }
+              ]"
+            >
+              <el-select
+                v-model="item.type"
+                style="width: 100%"
+                placeholder="请选择检查类型"
+              >
+                <el-option
+                  v-for="items in statusOptions"
+                  :key="items.value"
+                  :label="items.label"
+                  :value="items.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :ref="'settingList.'+index+'.price' "
+              label="项目单价:"
+              :prop="'settingList.'+index+'.price' "
+            >
+              <el-input
+                v-model="item.price"
+                :disabled="item.isUpdate === '1'"
+                maxlength="10"
+                show-word-limit
+                placeholder="请输入班次名称"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- 第二行:支持保险支付、权重、状态  -->
+        <el-row :gutter="41">
+          <el-col :span="8">
+            <el-form-item
+              :ref="'settingList.'+index+'.supportInsure' "
+              label="支持保险支付:"
+              :prop="'settingList.'+index+'.supportInsure' "
+              :rules="[
+                { required: true, message: '请选择保险支付', trigger: 'blur' }
+              ]"
+            >
+              <el-input
+                v-model="item.suportInsure"
+                :disabled="item.isUpdate === '1'"
+                maxlength="10"
+                show-word-limit
+                placeholder="请输入项目名称"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :ref="'settingList.'+index+'.sort' "
+              label="权重:"
+              :prop="'settingList.'+index+'.sort' "
+              :rules="[
+                { required: true, message: '请输入权重', trigger: 'change' }
+              ]"
+            >
+              <el-select
+                v-model="item.sort"
+                style="width: 100%"
+                placeholder="请选择检查类型"
+              >
+                <el-option
+                  v-for="items in statusOptions"
+                  :key="items.value"
+                  :label="items.label"
+                  :value="items.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item
+              :ref="'settingList.'+index+'.status' "
+              label="状态:"
+              :prop="'settingList.'+index+'.status' "
+            >
+              <el-select
+                v-model="item.status"
+                style="width: 100%"
+                placeholder="请选择状态"
+              >
+                <el-option
+                  v-for="items in statusOptions"
+                  :key="items.value"
+                  :label="items.label"
+                  :value="items.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <div>
+      <el-button class="fourWordsBtn" type="primary" size="mini" @click="handleAddItem">新增项目</el-button>
+      <el-button class="queryBtn" type="primary" size="mini" @click="handleSubmit">提交</el-button>
+      <el-button class="resetBtn" size="mini" @click="handleGoBack">返回</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+
 export default {
-  name: 'CheckItem'
+  name: 'CheckItem',
+  data() {
+    return {
+      // 表单内容
+      form: {
+        settingList: [{}]
+      },
+      // 表单规则
+      rules: '',
+      // 检查类型
+      statusOptions: [{
+        value: '1',
+        label: '啊啊啊'
+      }]
+    }
+  },
+  methods: {
+    /** 将阿拉伯数字转成汉字（如:1变成一）*/
+    convertToChineseNumeral(num) {
+      // eslint-disable-next-line no-undef
+      if (num === 10) {
+        return '十'
+        // eslint-disable-next-line no-undef
+      } else if (num === 1) {
+        return '一'
+      }
+      const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+      const units = ['', '十', '百', '千', '万']
+      let result = ''
+      // eslint-disable-next-line no-undef
+      const numStr = num.toString()
+      for (let i = 0; i < numStr.length; i++) {
+        const digit = parseInt(numStr.charAt(i))
+        const unit = units[numStr.length - i - 1]
+        if (digit === 0) {
+          // 当前数字为0时不需要输出汉字，但需要考虑上一个数字是否为0，避免出现连续的零
+          if (result.charAt(result.length - 1) !== '零') {
+            result += '零'
+          }
+        } else {
+          result += digits[digit] + unit
+        }
+      }
+      // 对于一些特殊的数字，如10、100等，需要在最前面加上“一”
+      if (result.charAt(0) === '一') {
+        result = result.substr(1, result.length)
+      } else if (result.charAt(0) === '百') {
+        result = '一' + result
+      } else if (result.charAt(0) === '千') {
+        result = '一' + result
+      }
+      return result
+    },
+    /** 删除项目 */
+    handleDel(item, index) {
+      // 有创建时间的走接口删除，没有的说明还没有新增上去，前端自己过滤
+      if (item.id) {
+        this.$confirm('是否确认删除该班次', '提示', {
+          type: 'warning',
+          customClass: 'box-logout',
+          cancelButtonClass: 'resetBtn',
+          confirmButtonClass: 'queryBtn'
+        }).then(function() {
+          return 1
+        }).then(() => {
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
+        }).catch(() => {})
+      } else {
+        this.$confirm('是否确认删除该班次', '提示', {
+          type: 'warning',
+          customClass: 'box-logout',
+          cancelButtonClass: 'resetBtn',
+          confirmButtonClass: 'queryBtn'
+        }).then(function() {
+        }).then(() => {
+          this.form.settingList.splice(index, 1)
+          this.$modal.msgSuccess('删除成功')
+        }).catch(() => {})
+      }
+    },
+    // 新增项目
+    handleAddItem() {
+      if (this.form.settingList.length < 10) {
+        this.form.settingList.push({})
+      }
+    },
+    // 提交
+    handleSubmit() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          console.log('成功通过....')
+        }
+      })
+    },
+    // 返回
+    handleGoBack() {
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
 .app-container {
   background-color: #FFFFFF;
+  padding: 40px 48px 50px 49px;
+  .formTop{
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 20px
+  }
+  .el-form-item{
+    margin-bottom: 24px!important;
+  }
+  .card{
+    padding-bottom: 18px;
+  }
+  .title{
+    font-size: 16px;
+    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+    font-weight: bold;
+    color: #333333;
+    height: 24px;
+    flex: 1;
+    position: relative;
+    margin-bottom: 5px;
+    &::before {
+      content: '';
+      display: block;
+      background-color: #5FB54B;
+      border-radius: 10px 10px 10px 10px;
+      position: absolute;
+      left: -17px;
+      top: -2px;
+      bottom: 1px;
+      width: 3px;
+    }
+  }
 }
 </style>