增加主题色

pyt

2025-04-10 a58f6ff40e9944da72ae9f20d2aea30b0844c1b9

增加主题色

 src/styles/element-variables.less

New file
@@ -0,0 +1,101 @@
/* Element UI 主题色变量 */
@theme-color: #009688;

/* Element UI 组件主题色覆盖 */
.el-button--primary {
  background-color: @theme-color;
  border-color: @theme-color;

  &:hover,
  &:focus {
    background-color: mix(#fff, @theme-color, 20%);
    border-color: mix(#fff, @theme-color, 20%);
  }

  &:active {
    background-color: darken(@theme-color, 10%);
    border-color: darken(@theme-color, 10%);
  }
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: @theme-color;
  border-color: @theme-color;
}

.el-radio__input.is-checked + .el-radio__label {
  color: @theme-color;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: @theme-color;
  border-color: @theme-color;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: @theme-color;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: @theme-color;
}

.el-select .el-input__inner:focus {
  border-color: @theme-color;
}

.el-select .el-input.is-focus .el-input__inner {
  border-color: @theme-color;
}

.el-select-dropdown__item.selected {
  color: @theme-color;
}

.el-switch.is-checked .el-switch__core {
  border-color: @theme-color;
  background-color: @theme-color;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: @theme-color;
}

.el-menu-item.is-active {
  color: @theme-color;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: @theme-color;
}

.el-tabs__item.is-active {
  color: @theme-color;
}

.el-tabs__active-bar {
  background-color: @theme-color;
}

/* 表单验证状态 */
.el-form-item.is-success .el-input__inner,
.el-form-item.is-success .el-textarea__inner,
.el-form-item.is-success .el-input__inner:focus,
.el-form-item.is-success .el-textarea__inner:focus {
  border-color: @theme-color;
}

/* 链接和文字选中颜色 */
.el-link.el-link--primary {
  color: @theme-color;
  
  &:hover {
    color: mix(#fff, @theme-color, 20%);
  }
}

::selection {
  background: fade(@theme-color, 20%);
} 

 src/views/dataManagement/confirmation-sheet/components/add-test-item.vue

New file
@@ -0,0 +1,169 @@
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" @close="$emit('close')" title="新增检测项" width="50%">
      <el-form ref="form" :model="form" :rules="rules" label-position="top" class="test-item-form">
        <div class="form-row">
          <el-form-item label="检测项编号" prop="testCode" class="form-item">
            <el-input v-model="form.testCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="检测项名称" prop="testName" class="form-item">
            <el-input v-model="form.testName" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="定性/定量" prop="testType" class="form-item">
            <el-radio-group v-model="form.testType">
              <el-radio :label="1">定性</el-radio>
              <el-radio :label="2">定量</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="检测方法编号" prop="methodCode" class="form-item">
            <el-input v-model="form.methodCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="检测方法" prop="methodName" class="form-item">
            <el-input v-model="form.methodName" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="收样要求" prop="requirements" class="form-item">
          <el-input
            type="textarea"
            v-model="form.requirements"
            :rows="4"
            placeholder="请输入收样要求..."
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer select-member-footer">
        <el-button type="primary" @click="submitForm">确认新增</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddTestItem',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        testCode: '',
        testName: '',
        testType: 1,
        methodCode: '',
        methodName: '',
        requirements: ''
      },
      rules: {
        testCode: [
          { required: true, message: '请输入检测项编号', trigger: 'blur' }
        ],
        testName: [
          { required: true, message: '请输入检测项名称', trigger: 'blur' }
        ],
        testType: [
          { required: true, message: '请选择定性/定量', trigger: 'change' }
        ],
        methodCode: [
          { required: true, message: '请输入检测方法编号', trigger: 'blur' }
        ],
        methodName: [
          { required: true, message: '请输入检测方法', trigger: 'blur' }
        ],
        requirements: [
          { required: true, message: '请输入收样要求', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('confirm', this.form)
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.test-item-form {
  padding: 20px 40px;

  .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    width: 100%;

    .form-item {
      flex: 1;
      min-width: 0; // 防止flex子项溢出
    }
  }

  .form-item {
    width: 100%;
    margin-bottom: 22px;

    :deep(.el-form-item__label) {
      padding-bottom: 8px;
      line-height: 1.5;
      font-size: 14px;
      color: #606266;
    }

    :deep(.el-form-item__content) {
      width: 100%;
      
      .el-input,
      .el-radio-group {
        width: 100%;
      }
    }
  }
}

:deep(.el-dialog__body) {
  padding: 0;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

:deep(.el-dialog__footer) {
  padding: 20px 40px;
  text-align: right;
  box-sizing: border-box;
  border-top: 1px solid #E4E7ED;
}

:deep(.el-textarea__inner) {
  min-height: 120px !important;
}

// 响应式布局
@media screen and (max-width: 768px) {
  .test-item-form {
    padding: 15px 20px;

    .form-row {
      flex-direction: column;
      gap: 0;
    }
  }
}
</style> 

 src/views/dataManagement/confirmation-sheet/components/add.vue

@@ -21,7 +21,7 @@
    <div class="header-title-left" style="margin-top: 60px;">
      <img src="@/assets/public/headercard.png" />
      <div>检测明细</div>
      <el-button  type="primary" class="el-icon-plus">
      <el-button @click="showAddTestItem" type="primary" class="el-icon-plus">
        新增检测项</el-button>
      <span>【注意：这里有多少个检测项 系统就会自动创建对应数量的《检测项的检验方法及数据记录》】</span>
    </div>
@@ -43,15 +43,23 @@

    </div>
    <experimentalScheduling :show="showScheduling"/>
    <add-test-item
      :dialogVisible="testItemDialogVisible"
      @close="handleTestItemDialogClose"
      @confirm="handleTestItemConfirm"
    />
  </Card>
</template>

<script>
import experimentalScheduling from './experimental-scheduling.vue';
import AddTestItem from './add-test-item.vue'

export default {
  name: 'AddConfirmationSheet',
  components: {
    experimentalScheduling
    experimentalScheduling,
    AddTestItem
  },
  props: {},
  data() {
@@ -69,6 +77,7 @@
        ],
      },
      menu: [],
      testItemDialogVisible: false
    };
  },
  computed: {
@@ -209,6 +218,18 @@
        }
        return { ...item }
      })
    },
    showAddTestItem() {
      this.testItemDialogVisible = true
    },
    handleTestItemDialogClose() {
      this.testItemDialogVisible = false
    },
    handleTestItemConfirm(formData) {
      console.log('新增检测项数据：', formData)
      // TODO: 处理新增检测项的逻辑
      this.testItemDialogVisible = false
      this.$message.success('添加成功')
    }
  },
};

 src/views/dataManagement/confirmation-sheet/components/experimental-scheduling.vue

@@ -1,6 +1,6 @@
<template>
    <div>
        <el-dialog title="选择项目组" :visible.sync="show" width="80%">
        <el-dialog title="选择实验调度" :visible.sync="show" width="80%">
            <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null">
                <template #search>
                    <el-form :model="form" label-width="140px" inline>