admin-web/src/views/departmentitem/itemdis/disDetails/edit.vue
@@ -1,111 +1,267 @@
<template>
  <win-sm :title="setting.title" @close="close" :width="'800px'">
    <el-form ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm" label-width="100px">
      <el-form-item label="编号" prop="code">
        <el-input disabled v-model="formData.code" clearable maxlength="20" show-word-limit style="width: 100%"/>
      </el-form-item>
      <el-form-item label="仓库名称" prop="name">
        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
      </el-form-item>
      <el-form-item label="地址" >
        <el-input v-model="formData.adss" clearable maxlength="20" show-word-limit style="width: 100%"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="formData.status"
          active-color="#0d997c"
          inactive-color="#C0CCDA">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" align="center" class="dialog-footer">
      <my-button name="取消" site="form" @click="close"/>
      <my-button name="保存" site="form" @click="save"/>
  <el-dialog
    width="1000px"
    :visible="true"
    :top="'15vh'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="close"
  >
    <div slot="title" align="left" class="dialog-title">
      <div
        class="tab-item"
        :class="tabIndex == index ? 'active' : ''"
        v-for="(item, index) in tabs"
        :key="index"
        @click="tabIndex = index"
      >
        {{ item }}
      </div>
    </div>
  </win-sm>
    <el-form v-show="tabIndex == 0" ref="ruleForm" :model="formData" :rules="rules" class="demo-ruleForm">
      <div v-for="(item, index) in formData.list" :key="index">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="规格型号:">
              {{ item.modelName }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位:">
              {{ item.unit }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-for="(childItem, childIndex) in item.list" :key="childIndex">
          <el-col :span="6">
            <el-form-item label="分发数量:">
              {{ childItem.count }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用人:">
              {{ childItem.user }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:">
              <el-input v-if="childItem.isEdit" v-model="childItem.phone" style="width: 120px"></el-input>
              <span v-else>{{ childItem.phone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="!childItem.isEdit">
            <el-form-item>
              <span class="edit-text" @click="handleEditItem(index, childIndex, childItem.isEdit)">修改</span>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-form
      v-show="tabIndex == 1"
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      class="demo-ruleForm"
      style="width: 96%"
    >
      <div v-for="(item, index) in formData.list" :key="index">
        <el-row :gutter="20" class="item-header">
          <el-col :span="6">
            <el-form-item label="修改时间:">
              {{ item.time }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改人:">
              {{ item.userName }}
            </el-form-item>
          </el-col>
        </el-row>
        <div class="line"></div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="规格型号:">
              {{ item.modelName }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位:">
              {{ item.unit }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-for="(childItem, childIndex) in item.list" :key="childIndex">
          <el-col :span="6">
            <el-form-item label="分发数量:">
              {{ childItem.count }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用人:">
              {{ childItem.user }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:">
              <span>{{ childItem.phone }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="line"></div>
      </div>
    </el-form>
    <div v-if="tabIndex == 0" slot="footer" align="center" class="dialog-footer">
      <my-button name="取消" site="form" @click="close" />
      <my-button name="保存" site="form" @click="save" />
    </div>
  </el-dialog>
</template>
<script>
import winSm from '@/components/win/win-sm'
import myButton from '@/components/myButton/myButton'
import * as finsystenant from '@/api/baseSetting/finsystenant'
import myButton from '@/components/myButton/myButton';
import * as finsystenant from '@/api/baseSetting/finsystenant';
export default {
  components: {winSm, myButton},
  components: { myButton },
  props: {
    setting: {
      type: Object,
      default: () => {
      }
    }
      default: () => {},
    },
  },
  data() {
    return {
      checkAll: false,
      tabs: ['修改使用人', '使用记录'],
      tabIndex: 0,
      checkedList: [],
      formData: {
        code: '',
        name: '',
        status: true,
        summary: '',
        list: [
          {
            modelName: '型号111111',
            unit: '套',
            time: '2023-08-08 10:23:34',
            userName: '管理员',
            list: [
              {
                count: 1,
                user: '张三',
                phone: '18500000001',
                isEdit: false,
              },
            ],
          },
          {
            modelName: '型号222222',
            unit: '套',
            list: [
              {
                count: 1,
                user: '张三',
                phone: '18500000001',
                isEdit: false,
              },
            ],
          },
        ],
      },
      rules: {
        code: [
          {required: true, message: '请输入机构编号', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入机构名称', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ]
      }
    }
        code: [{ required: true, message: '请输入机构编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
      },
    };
  },
  created() {
    if(this.setting.info){
      this.formData = Object.assign({},JSON.parse(this.setting.info))
    }
  },
  created() {},
  methods: {
    getEditInfo(id){
    getEditInfo(id) {},
    handleEditItem(index, childIndex) {
      this.formData.list[index].list[childIndex].isEdit = true;
    },
    close() {
      this.$emit('close')
      this.$emit('close');
    },
    save() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.formData)
          if(this.setting.id){
          const params = Object.assign({}, this.formData);
          if (this.setting.id) {
            // 编辑接口
            finsystenant.edit(params).then(res => {
            finsystenant.edit(params).then((res) => {
              if (res) {
                this.$message.success('保存成功!')
                this.close()
                this.$emit('search')
                this.$message.success('保存成功!');
                this.close();
                this.$emit('search');
              } else {
                this.$message.error('保存失败')
                this.$message.error('保存失败');
              }
            })
          }else{
            params.orgId = this.setting.orgId
            finsystenant.add(params).then(res => {
            });
          } else {
            params.orgId = this.setting.orgId;
            finsystenant.add(params).then((res) => {
              if (res) {
                this.$message.success('保存成功!')
                this.close()
                this.$emit('search')
                this.$message.success('保存成功!');
                this.close();
                this.$emit('search');
              } else {
                this.$message.error('保存失败')
                this.$message.error('保存失败');
              }
            })
            });
          }
        } else {
          this.$message.error('校验未通过,请检查。')
          this.$message.error('校验未通过,请检查。');
        }
      })
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-title {
  display: flex;
  align-items: center;
  .tab-item {
    color: #3d3d3d;
    font-size: 16px;
    font-style: normal;
    padding: 0 10px;
    position: relative;
    cursor: pointer;
    &.active::after {
      content: '';
      width: 100%;
      height: 2px;
      background: #409eff;
      position: absolute;
      bottom: -10px;
      left: 0;
    }
  }
}
</script>
.edit-text {
  color: #409eff;
  cursor: pointer;
}
.item-header {
  ::v-deep {
    .el-form-item__label,
    .el-form-item__content {
      font-weight: 700;
    }
  }
}
::v-deep {
  .el-form-item {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.line {
  width: 100%;
  height: 1px;
  margin: 10px 0;
  background: rgba($color: #dcdfe6, $alpha: 0.45);
}
</style>