Merge branch 'iteration-20240417-subject' into online

dev-dist/sw.js

@@ -67,7 +67,7 @@ if (!self.define) {
     });
   };
 }
-define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
+define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
 
   self.skipWaiting();
   workbox.clientsClaim();
@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.siufbk958rg"
+    "revision": "0.6i8p590kut8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

dev-dist/workbox-b5f7729d.js

@@ -0,0 +1,3391 @@
+define(['exports'], (function (exports) { 'use strict';
+
+    // @ts-ignore
+    try {
+      self['workbox:core:7.0.0'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Claim any currently available clients once the service worker
+     * becomes active. This is normally used in conjunction with `skipWaiting()`.
+     *
+     * @memberof workbox-core
+     */
+    function clientsClaim() {
+      self.addEventListener('activate', () => self.clients.claim());
+    }
+
+    /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const logger = (() => {
+      // Don't overwrite this value if it's already set.
+      // See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923
+      if (!('__WB_DISABLE_DEV_LOGS' in globalThis)) {
+        self.__WB_DISABLE_DEV_LOGS = false;
+      }
+      let inGroup = false;
+      const methodToColorMap = {
+        debug: `#7f8c8d`,
+        log: `#2ecc71`,
+        warn: `#f39c12`,
+        error: `#c0392b`,
+        groupCollapsed: `#3498db`,
+        groupEnd: null // No colored prefix on groupEnd
+      };
+      const print = function (method, args) {
+        if (self.__WB_DISABLE_DEV_LOGS) {
+          return;
+        }
+        if (method === 'groupCollapsed') {
+          // Safari doesn't print all console.groupCollapsed() arguments:
+          // https://bugs.webkit.org/show_bug.cgi?id=182754
+          if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+            console[method](...args);
+            return;
+          }
+        }
+        const styles = [`background: ${methodToColorMap[method]}`, `border-radius: 0.5em`, `color: white`, `font-weight: bold`, `padding: 2px 0.5em`];
+        // When in a group, the workbox prefix is not displayed.
+        const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')];
+        console[method](...logPrefix, ...args);
+        if (method === 'groupCollapsed') {
+          inGroup = true;
+        }
+        if (method === 'groupEnd') {
+          inGroup = false;
+        }
+      };
+      // eslint-disable-next-line @typescript-eslint/ban-types
+      const api = {};
+      const loggerMethods = Object.keys(methodToColorMap);
+      for (const key of loggerMethods) {
+        const method = key;
+        api[method] = (...args) => {
+          print(method, args);
+        };
+      }
+      return api;
+    })();
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const messages = {
+      'invalid-value': ({
+        paramName,
+        validValueDescription,
+        value
+      }) => {
+        if (!paramName || !validValueDescription) {
+          throw new Error(`Unexpected input to 'invalid-value' error.`);
+        }
+        return `The '${paramName}' parameter was given a value with an ` + `unexpected value. ${validValueDescription} Received a value of ` + `${JSON.stringify(value)}.`;
+      },
+      'not-an-array': ({
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        if (!moduleName || !className || !funcName || !paramName) {
+          throw new Error(`Unexpected input to 'not-an-array' error.`);
+        }
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${className}.${funcName}()' must be an array.`;
+      },
+      'incorrect-type': ({
+        expectedType,
+        paramName,
+        moduleName,
+        className,
+        funcName
+      }) => {
+        if (!expectedType || !paramName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'incorrect-type' error.`);
+        }
+        const classNameStr = className ? `${className}.` : '';
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${classNameStr}` + `${funcName}()' must be of type ${expectedType}.`;
+      },
+      'incorrect-class': ({
+        expectedClassName,
+        paramName,
+        moduleName,
+        className,
+        funcName,
+        isReturnValueProblem
+      }) => {
+        if (!expectedClassName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'incorrect-class' error.`);
+        }
+        const classNameStr = className ? `${className}.` : '';
+        if (isReturnValueProblem) {
+          return `The return value from ` + `'${moduleName}.${classNameStr}${funcName}()' ` + `must be an instance of class ${expectedClassName}.`;
+        }
+        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${classNameStr}${funcName}()' ` + `must be an instance of class ${expectedClassName}.`;
+      },
+      'missing-a-method': ({
+        expectedMethod,
+        paramName,
+        moduleName,
+        className,
+        funcName
+      }) => {
+        if (!expectedMethod || !paramName || !moduleName || !className || !funcName) {
+          throw new Error(`Unexpected input to 'missing-a-method' error.`);
+        }
+        return `${moduleName}.${className}.${funcName}() expected the ` + `'${paramName}' parameter to expose a '${expectedMethod}' method.`;
+      },
+      'add-to-cache-list-unexpected-type': ({
+        entry
+      }) => {
+        return `An unexpected entry was passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' The entry ` + `'${JSON.stringify(entry)}' isn't supported. You must supply an array of ` + `strings with one or more characters, objects with a url property or ` + `Request objects.`;
+      },
+      'add-to-cache-list-conflicting-entries': ({
+        firstEntry,
+        secondEntry
+      }) => {
+        if (!firstEntry || !secondEntry) {
+          throw new Error(`Unexpected input to ` + `'add-to-cache-list-duplicate-entries' error.`);
+        }
+        return `Two of the entries passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` + `${firstEntry} but different revision details. Workbox is ` + `unable to cache and version the asset correctly. Please remove one ` + `of the entries.`;
+      },
+      'plugin-error-request-will-fetch': ({
+        thrownErrorMessage
+      }) => {
+        if (!thrownErrorMessage) {
+          throw new Error(`Unexpected input to ` + `'plugin-error-request-will-fetch', error.`);
+        }
+        return `An error was thrown by a plugins 'requestWillFetch()' method. ` + `The thrown error message was: '${thrownErrorMessage}'.`;
+      },
+      'invalid-cache-name': ({
+        cacheNameId,
+        value
+      }) => {
+        if (!cacheNameId) {
+          throw new Error(`Expected a 'cacheNameId' for error 'invalid-cache-name'`);
+        }
+        return `You must provide a name containing at least one character for ` + `setCacheDetails({${cacheNameId}: '...'}). Received a value of ` + `'${JSON.stringify(value)}'`;
+      },
+      'unregister-route-but-not-found-with-method': ({
+        method
+      }) => {
+        if (!method) {
+          throw new Error(`Unexpected input to ` + `'unregister-route-but-not-found-with-method' error.`);
+        }
+        return `The route you're trying to unregister was not  previously ` + `registered for the method type '${method}'.`;
+      },
+      'unregister-route-route-not-registered': () => {
+        return `The route you're trying to unregister was not previously ` + `registered.`;
+      },
+      'queue-replay-failed': ({
+        name
+      }) => {
+        return `Replaying the background sync queue '${name}' failed.`;
+      },
+      'duplicate-queue-name': ({
+        name
+      }) => {
+        return `The Queue name '${name}' is already being used. ` + `All instances of backgroundSync.Queue must be given unique names.`;
+      },
+      'expired-test-without-max-age': ({
+        methodName,
+        paramName
+      }) => {
+        return `The '${methodName}()' method can only be used when the ` + `'${paramName}' is used in the constructor.`;
+      },
+      'unsupported-route-type': ({
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        return `The supplied '${paramName}' parameter was an unsupported type. ` + `Please check the docs for ${moduleName}.${className}.${funcName} for ` + `valid input types.`;
+      },
+      'not-array-of-class': ({
+        value,
+        expectedClass,
+        moduleName,
+        className,
+        funcName,
+        paramName
+      }) => {
+        return `The supplied '${paramName}' parameter must be an array of ` + `'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` + `Please check the call to ${moduleName}.${className}.${funcName}() ` + `to fix the issue.`;
+      },
+      'max-entries-or-age-required': ({
+        moduleName,
+        className,
+        funcName
+      }) => {
+        return `You must define either config.maxEntries or config.maxAgeSeconds` + `in ${moduleName}.${className}.${funcName}`;
+      },
+      'statuses-or-headers-required': ({
+        moduleName,
+        className,
+        funcName
+      }) => {
+        return `You must define either config.statuses or config.headers` + `in ${moduleName}.${className}.${funcName}`;
+      },
+      'invalid-string': ({
+        moduleName,
+        funcName,
+        paramName
+      }) => {
+        if (!paramName || !moduleName || !funcName) {
+          throw new Error(`Unexpected input to 'invalid-string' error.`);
+        }
+        return `When using strings, the '${paramName}' parameter must start with ` + `'http' (for cross-origin matches) or '/' (for same-origin matches). ` + `Please see the docs for ${moduleName}.${funcName}() for ` + `more info.`;
+      },
+      'channel-name-required': () => {
+        return `You must provide a channelName to construct a ` + `BroadcastCacheUpdate instance.`;
+      },
+      'invalid-responses-are-same-args': () => {
+        return `The arguments passed into responsesAreSame() appear to be ` + `invalid. Please ensure valid Responses are used.`;
+      },
+      'expire-custom-caches-only': () => {
+        return `You must provide a 'cacheName' property when using the ` + `expiration plugin with a runtime caching strategy.`;
+      },
+      'unit-must-be-bytes': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);
+        }
+        return `The 'unit' portion of the Range header must be set to 'bytes'. ` + `The Range header provided was "${normalizedRangeHeader}"`;
+      },
+      'single-range-only': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'single-range-only' error.`);
+        }
+        return `Multiple ranges are not supported. Please use a  single start ` + `value, and optional end value. The Range header provided was ` + `"${normalizedRangeHeader}"`;
+      },
+      'invalid-range-values': ({
+        normalizedRangeHeader
+      }) => {
+        if (!normalizedRangeHeader) {
+          throw new Error(`Unexpected input to 'invalid-range-values' error.`);
+        }
+        return `The Range header is missing both start and end values. At least ` + `one of those values is needed. The Range header provided was ` + `"${normalizedRangeHeader}"`;
+      },
+      'no-range-header': () => {
+        return `No Range header was found in the Request provided.`;
+      },
+      'range-not-satisfiable': ({
+        size,
+        start,
+        end
+      }) => {
+        return `The start (${start}) and end (${end}) values in the Range are ` + `not satisfiable by the cached response, which is ${size} bytes.`;
+      },
+      'attempt-to-cache-non-get-request': ({
+        url,
+        method
+      }) => {
+        return `Unable to cache '${url}' because it is a '${method}' request and ` + `only 'GET' requests can be cached.`;
+      },
+      'cache-put-with-no-response': ({
+        url
+      }) => {
+        return `There was an attempt to cache '${url}' but the response was not ` + `defined.`;
+      },
+      'no-response': ({
+        url,
+        error
+      }) => {
+        let message = `The strategy could not generate a response for '${url}'.`;
+        if (error) {
+          message += ` The underlying error is ${error}.`;
+        }
+        return message;
+      },
+      'bad-precaching-response': ({
+        url,
+        status
+      }) => {
+        return `The precaching request for '${url}' failed` + (status ? ` with an HTTP status of ${status}.` : `.`);
+      },
+      'non-precached-url': ({
+        url
+      }) => {
+        return `createHandlerBoundToURL('${url}') was called, but that URL is ` + `not precached. Please pass in a URL that is precached instead.`;
+      },
+      'add-to-cache-list-conflicting-integrities': ({
+        url
+      }) => {
+        return `Two of the entries passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` + `${url} with different integrity values. Please remove one of them.`;
+      },
+      'missing-precache-entry': ({
+        cacheName,
+        url
+      }) => {
+        return `Unable to find a precached response in ${cacheName} for ${url}.`;
+      },
+      'cross-origin-copy-response': ({
+        origin
+      }) => {
+        return `workbox-core.copyResponse() can only be used with same-origin ` + `responses. It was passed a response with origin ${origin}.`;
+      },
+      'opaque-streams-source': ({
+        type
+      }) => {
+        const message = `One of the workbox-streams sources resulted in an ` + `'${type}' response.`;
+        if (type === 'opaqueredirect') {
+          return `${message} Please do not use a navigation request that results ` + `in a redirect as a source.`;
+        }
+        return `${message} Please ensure your sources are CORS-enabled.`;
+      }
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const generatorFunction = (code, details = {}) => {
+      const message = messages[code];
+      if (!message) {
+        throw new Error(`Unable to find message for code '${code}'.`);
+      }
+      return message(details);
+    };
+    const messageGenerator = generatorFunction;
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Workbox errors should be thrown with this class.
+     * This allows use to ensure the type easily in tests,
+     * helps developers identify errors from workbox
+     * easily and allows use to optimise error
+     * messages correctly.
+     *
+     * @private
+     */
+    class WorkboxError extends Error {
+      /**
+       *
+       * @param {string} errorCode The error code that
+       * identifies this particular error.
+       * @param {Object=} details Any relevant arguments
+       * that will help developers identify issues should
+       * be added as a key on the context object.
+       */
+      constructor(errorCode, details) {
+        const message = messageGenerator(errorCode, details);
+        super(message);
+        this.name = errorCode;
+        this.details = details;
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /*
+     * This method throws if the supplied value is not an array.
+     * The destructed values are required to produce a meaningful error for users.
+     * The destructed and restructured object is so it's clear what is
+     * needed.
+     */
+    const isArray = (value, details) => {
+      if (!Array.isArray(value)) {
+        throw new WorkboxError('not-an-array', details);
+      }
+    };
+    const hasMethod = (object, expectedMethod, details) => {
+      const type = typeof object[expectedMethod];
+      if (type !== 'function') {
+        details['expectedMethod'] = expectedMethod;
+        throw new WorkboxError('missing-a-method', details);
+      }
+    };
+    const isType = (object, expectedType, details) => {
+      if (typeof object !== expectedType) {
+        details['expectedType'] = expectedType;
+        throw new WorkboxError('incorrect-type', details);
+      }
+    };
+    const isInstance = (object,
+    // Need the general type to do the check later.
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    expectedClass, details) => {
+      if (!(object instanceof expectedClass)) {
+        details['expectedClassName'] = expectedClass.name;
+        throw new WorkboxError('incorrect-class', details);
+      }
+    };
+    const isOneOf = (value, validValues, details) => {
+      if (!validValues.includes(value)) {
+        details['validValueDescription'] = `Valid values are ${JSON.stringify(validValues)}.`;
+        throw new WorkboxError('invalid-value', details);
+      }
+    };
+    const isArrayOfClass = (value,
+    // Need general type to do check later.
+    expectedClass,
+    // eslint-disable-line
+    details) => {
+      const error = new WorkboxError('not-array-of-class', details);
+      if (!Array.isArray(value)) {
+        throw error;
+      }
+      for (const item of value) {
+        if (!(item instanceof expectedClass)) {
+          throw error;
+        }
+      }
+    };
+    const finalAssertExports = {
+      hasMethod,
+      isArray,
+      isInstance,
+      isOneOf,
+      isType,
+      isArrayOfClass
+    };
+
+    // @ts-ignore
+    try {
+      self['workbox:routing:7.0.0'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The default HTTP method, 'GET', used when there's no specific method
+     * configured for a route.
+     *
+     * @type {string}
+     *
+     * @private
+     */
+    const defaultMethod = 'GET';
+    /**
+     * The list of valid HTTP methods associated with requests that could be routed.
+     *
+     * @type {Array<string>}
+     *
+     * @private
+     */
+    const validMethods = ['DELETE', 'GET', 'HEAD', 'PATCH', 'POST', 'PUT'];
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * @param {function()|Object} handler Either a function, or an object with a
+     * 'handle' method.
+     * @return {Object} An object with a handle method.
+     *
+     * @private
+     */
+    const normalizeHandler = handler => {
+      if (handler && typeof handler === 'object') {
+        {
+          finalAssertExports.hasMethod(handler, 'handle', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'handler'
+          });
+        }
+        return handler;
+      } else {
+        {
+          finalAssertExports.isType(handler, 'function', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'handler'
+          });
+        }
+        return {
+          handle: handler
+        };
+      }
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A `Route` consists of a pair of callback functions, "match" and "handler".
+     * The "match" callback determine if a route should be used to "handle" a
+     * request by returning a non-falsy value if it can. The "handler" callback
+     * is called when there is a match and should return a Promise that resolves
+     * to a `Response`.
+     *
+     * @memberof workbox-routing
+     */
+    class Route {
+      /**
+       * Constructor for Route class.
+       *
+       * @param {workbox-routing~matchCallback} match
+       * A callback function that determines whether the route matches a given
+       * `fetch` event by returning a non-falsy value.
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resolving to a Response.
+       * @param {string} [method='GET'] The HTTP method to match the Route
+       * against.
+       */
+      constructor(match, handler, method = defaultMethod) {
+        {
+          finalAssertExports.isType(match, 'function', {
+            moduleName: 'workbox-routing',
+            className: 'Route',
+            funcName: 'constructor',
+            paramName: 'match'
+          });
+          if (method) {
+            finalAssertExports.isOneOf(method, validMethods, {
+              paramName: 'method'
+            });
+          }
+        }
+        // These values are referenced directly by Router so cannot be
+        // altered by minificaton.
+        this.handler = normalizeHandler(handler);
+        this.match = match;
+        this.method = method;
+      }
+      /**
+       *
+       * @param {workbox-routing-handlerCallback} handler A callback
+       * function that returns a Promise resolving to a Response
+       */
+      setCatchHandler(handler) {
+        this.catchHandler = normalizeHandler(handler);
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * RegExpRoute makes it easy to create a regular expression based
+     * {@link workbox-routing.Route}.
+     *
+     * For same-origin requests the RegExp only needs to match part of the URL. For
+     * requests against third-party servers, you must define a RegExp that matches
+     * the start of the URL.
+     *
+     * @memberof workbox-routing
+     * @extends workbox-routing.Route
+     */
+    class RegExpRoute extends Route {
+      /**
+       * If the regular expression contains
+       * [capture groups]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references},
+       * the captured values will be passed to the
+       * {@link workbox-routing~handlerCallback} `params`
+       * argument.
+       *
+       * @param {RegExp} regExp The regular expression to match against URLs.
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       * @param {string} [method='GET'] The HTTP method to match the Route
+       * against.
+       */
+      constructor(regExp, handler, method) {
+        {
+          finalAssertExports.isInstance(regExp, RegExp, {
+            moduleName: 'workbox-routing',
+            className: 'RegExpRoute',
+            funcName: 'constructor',
+            paramName: 'pattern'
+          });
+        }
+        const match = ({
+          url
+        }) => {
+          const result = regExp.exec(url.href);
+          // Return immediately if there's no match.
+          if (!result) {
+            return;
+          }
+          // Require that the match start at the first character in the URL string
+          // if it's a cross-origin request.
+          // See https://github.com/GoogleChrome/workbox/issues/281 for the context
+          // behind this behavior.
+          if (url.origin !== location.origin && result.index !== 0) {
+            {
+              logger.debug(`The regular expression '${regExp.toString()}' only partially matched ` + `against the cross-origin URL '${url.toString()}'. RegExpRoute's will only ` + `handle cross-origin requests if they match the entire URL.`);
+            }
+            return;
+          }
+          // If the route matches, but there aren't any capture groups defined, then
+          // this will return [], which is truthy and therefore sufficient to
+          // indicate a match.
+          // If there are capture groups, then it will return their values.
+          return result.slice(1);
+        };
+        super(match, handler, method);
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const getFriendlyURL = url => {
+      const urlObj = new URL(String(url), location.href);
+      // See https://github.com/GoogleChrome/workbox/issues/2323
+      // We want to include everything, except for the origin if it's same-origin.
+      return urlObj.href.replace(new RegExp(`^${location.origin}`), '');
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The Router can be used to process a `FetchEvent` using one or more
+     * {@link workbox-routing.Route}, responding with a `Response` if
+     * a matching route exists.
+     *
+     * If no route matches a given a request, the Router will use a "default"
+     * handler if one is defined.
+     *
+     * Should the matching Route throw an error, the Router will use a "catch"
+     * handler if one is defined to gracefully deal with issues and respond with a
+     * Request.
+     *
+     * If a request matches multiple routes, the **earliest** registered route will
+     * be used to respond to the request.
+     *
+     * @memberof workbox-routing
+     */
+    class Router {
+      /**
+       * Initializes a new Router.
+       */
+      constructor() {
+        this._routes = new Map();
+        this._defaultHandlerMap = new Map();
+      }
+      /**
+       * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP
+       * method name ('GET', etc.) to an array of all the corresponding `Route`
+       * instances that are registered.
+       */
+      get routes() {
+        return this._routes;
+      }
+      /**
+       * Adds a fetch event listener to respond to events when a route matches
+       * the event's request.
+       */
+      addFetchListener() {
+        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+        self.addEventListener('fetch', event => {
+          const {
+            request
+          } = event;
+          const responsePromise = this.handleRequest({
+            request,
+            event
+          });
+          if (responsePromise) {
+            event.respondWith(responsePromise);
+          }
+        });
+      }
+      /**
+       * Adds a message event listener for URLs to cache from the window.
+       * This is useful to cache resources loaded on the page prior to when the
+       * service worker started controlling it.
+       *
+       * The format of the message data sent from the window should be as follows.
+       * Where the `urlsToCache` array may consist of URL strings or an array of
+       * URL string + `requestInit` object (the same as you'd pass to `fetch()`).
+       *
+       * ```
+       * {
+       *   type: 'CACHE_URLS',
+       *   payload: {
+       *     urlsToCache: [
+       *       './script1.js',
+       *       './script2.js',
+       *       ['./script3.js', {mode: 'no-cors'}],
+       *     ],
+       *   },
+       * }
+       * ```
+       */
+      addCacheListener() {
+        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+        self.addEventListener('message', event => {
+          // event.data is type 'any'
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          if (event.data && event.data.type === 'CACHE_URLS') {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const {
+              payload
+            } = event.data;
+            {
+              logger.debug(`Caching URLs from the window`, payload.urlsToCache);
+            }
+            const requestPromises = Promise.all(payload.urlsToCache.map(entry => {
+              if (typeof entry === 'string') {
+                entry = [entry];
+              }
+              const request = new Request(...entry);
+              return this.handleRequest({
+                request,
+                event
+              });
+              // TODO(philipwalton): TypeScript errors without this typecast for
+              // some reason (probably a bug). The real type here should work but
+              // doesn't: `Array<Promise<Response> | undefined>`.
+            })); // TypeScript
+            event.waitUntil(requestPromises);
+            // If a MessageChannel was used, reply to the message on success.
+            if (event.ports && event.ports[0]) {
+              void requestPromises.then(() => event.ports[0].postMessage(true));
+            }
+          }
+        });
+      }
+      /**
+       * Apply the routing rules to a FetchEvent object to get a Response from an
+       * appropriate Route's handler.
+       *
+       * @param {Object} options
+       * @param {Request} options.request The request to handle.
+       * @param {ExtendableEvent} options.event The event that triggered the
+       *     request.
+       * @return {Promise<Response>|undefined} A promise is returned if a
+       *     registered route can handle the request. If there is no matching
+       *     route and there's no `defaultHandler`, `undefined` is returned.
+       */
+      handleRequest({
+        request,
+        event
+      }) {
+        {
+          finalAssertExports.isInstance(request, Request, {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'handleRequest',
+            paramName: 'options.request'
+          });
+        }
+        const url = new URL(request.url, location.href);
+        if (!url.protocol.startsWith('http')) {
+          {
+            logger.debug(`Workbox Router only supports URLs that start with 'http'.`);
+          }
+          return;
+        }
+        const sameOrigin = url.origin === location.origin;
+        const {
+          params,
+          route
+        } = this.findMatchingRoute({
+          event,
+          request,
+          sameOrigin,
+          url
+        });
+        let handler = route && route.handler;
+        const debugMessages = [];
+        {
+          if (handler) {
+            debugMessages.push([`Found a route to handle this request:`, route]);
+            if (params) {
+              debugMessages.push([`Passing the following params to the route's handler:`, params]);
+            }
+          }
+        }
+        // If we don't have a handler because there was no matching route, then
+        // fall back to defaultHandler if that's defined.
+        const method = request.method;
+        if (!handler && this._defaultHandlerMap.has(method)) {
+          {
+            debugMessages.push(`Failed to find a matching route. Falling ` + `back to the default handler for ${method}.`);
+          }
+          handler = this._defaultHandlerMap.get(method);
+        }
+        if (!handler) {
+          {
+            // No handler so Workbox will do nothing. If logs is set of debug
+            // i.e. verbose, we should print out this information.
+            logger.debug(`No route found for: ${getFriendlyURL(url)}`);
+          }
+          return;
+        }
+        {
+          // We have a handler, meaning Workbox is going to handle the route.
+          // print the routing details to the console.
+          logger.groupCollapsed(`Router is responding to: ${getFriendlyURL(url)}`);
+          debugMessages.forEach(msg => {
+            if (Array.isArray(msg)) {
+              logger.log(...msg);
+            } else {
+              logger.log(msg);
+            }
+          });
+          logger.groupEnd();
+        }
+        // Wrap in try and catch in case the handle method throws a synchronous
+        // error. It should still callback to the catch handler.
+        let responsePromise;
+        try {
+          responsePromise = handler.handle({
+            url,
+            request,
+            event,
+            params
+          });
+        } catch (err) {
+          responsePromise = Promise.reject(err);
+        }
+        // Get route's catch handler, if it exists
+        const catchHandler = route && route.catchHandler;
+        if (responsePromise instanceof Promise && (this._catchHandler || catchHandler)) {
+          responsePromise = responsePromise.catch(async err => {
+            // If there's a route catch handler, process that first
+            if (catchHandler) {
+              {
+                // Still include URL here as it will be async from the console group
+                // and may not make sense without the URL
+                logger.groupCollapsed(`Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`);
+                logger.error(`Error thrown by:`, route);
+                logger.error(err);
+                logger.groupEnd();
+              }
+              try {
+                return await catchHandler.handle({
+                  url,
+                  request,
+                  event,
+                  params
+                });
+              } catch (catchErr) {
+                if (catchErr instanceof Error) {
+                  err = catchErr;
+                }
+              }
+            }
+            if (this._catchHandler) {
+              {
+                // Still include URL here as it will be async from the console group
+                // and may not make sense without the URL
+                logger.groupCollapsed(`Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`);
+                logger.error(`Error thrown by:`, route);
+                logger.error(err);
+                logger.groupEnd();
+              }
+              return this._catchHandler.handle({
+                url,
+                request,
+                event
+              });
+            }
+            throw err;
+          });
+        }
+        return responsePromise;
+      }
+      /**
+       * Checks a request and URL (and optionally an event) against the list of
+       * registered routes, and if there's a match, returns the corresponding
+       * route along with any params generated by the match.
+       *
+       * @param {Object} options
+       * @param {URL} options.url
+       * @param {boolean} options.sameOrigin The result of comparing `url.origin`
+       *     against the current origin.
+       * @param {Request} options.request The request to match.
+       * @param {Event} options.event The corresponding event.
+       * @return {Object} An object with `route` and `params` properties.
+       *     They are populated if a matching route was found or `undefined`
+       *     otherwise.
+       */
+      findMatchingRoute({
+        url,
+        sameOrigin,
+        request,
+        event
+      }) {
+        const routes = this._routes.get(request.method) || [];
+        for (const route of routes) {
+          let params;
+          // route.match returns type any, not possible to change right now.
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const matchResult = route.match({
+            url,
+            sameOrigin,
+            request,
+            event
+          });
+          if (matchResult) {
+            {
+              // Warn developers that using an async matchCallback is almost always
+              // not the right thing to do.
+              if (matchResult instanceof Promise) {
+                logger.warn(`While routing ${getFriendlyURL(url)}, an async ` + `matchCallback function was used. Please convert the ` + `following route to use a synchronous matchCallback function:`, route);
+              }
+            }
+            // See https://github.com/GoogleChrome/workbox/issues/2079
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            params = matchResult;
+            if (Array.isArray(params) && params.length === 0) {
+              // Instead of passing an empty array in as params, use undefined.
+              params = undefined;
+            } else if (matchResult.constructor === Object &&
+            // eslint-disable-line
+            Object.keys(matchResult).length === 0) {
+              // Instead of passing an empty object in as params, use undefined.
+              params = undefined;
+            } else if (typeof matchResult === 'boolean') {
+              // For the boolean value true (rather than just something truth-y),
+              // don't set params.
+              // See https://github.com/GoogleChrome/workbox/pull/2134#issuecomment-513924353
+              params = undefined;
+            }
+            // Return early if have a match.
+            return {
+              route,
+              params
+            };
+          }
+        }
+        // If no match was found above, return and empty object.
+        return {};
+      }
+      /**
+       * Define a default `handler` that's called when no routes explicitly
+       * match the incoming request.
+       *
+       * Each HTTP method ('GET', 'POST', etc.) gets its own default handler.
+       *
+       * Without a default handler, unmatched requests will go against the
+       * network as if there were no service worker present.
+       *
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       * @param {string} [method='GET'] The HTTP method to associate with this
+       * default handler. Each method has its own default.
+       */
+      setDefaultHandler(handler, method = defaultMethod) {
+        this._defaultHandlerMap.set(method, normalizeHandler(handler));
+      }
+      /**
+       * If a Route throws an error while handling a request, this `handler`
+       * will be called and given a chance to provide a response.
+       *
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       */
+      setCatchHandler(handler) {
+        this._catchHandler = normalizeHandler(handler);
+      }
+      /**
+       * Registers a route with the router.
+       *
+       * @param {workbox-routing.Route} route The route to register.
+       */
+      registerRoute(route) {
+        {
+          finalAssertExports.isType(route, 'object', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.hasMethod(route, 'match', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.isType(route.handler, 'object', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route'
+          });
+          finalAssertExports.hasMethod(route.handler, 'handle', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route.handler'
+          });
+          finalAssertExports.isType(route.method, 'string', {
+            moduleName: 'workbox-routing',
+            className: 'Router',
+            funcName: 'registerRoute',
+            paramName: 'route.method'
+          });
+        }
+        if (!this._routes.has(route.method)) {
+          this._routes.set(route.method, []);
+        }
+        // Give precedence to all of the earlier routes by adding this additional
+        // route to the end of the array.
+        this._routes.get(route.method).push(route);
+      }
+      /**
+       * Unregisters a route with the router.
+       *
+       * @param {workbox-routing.Route} route The route to unregister.
+       */
+      unregisterRoute(route) {
+        if (!this._routes.has(route.method)) {
+          throw new WorkboxError('unregister-route-but-not-found-with-method', {
+            method: route.method
+          });
+        }
+        const routeIndex = this._routes.get(route.method).indexOf(route);
+        if (routeIndex > -1) {
+          this._routes.get(route.method).splice(routeIndex, 1);
+        } else {
+          throw new WorkboxError('unregister-route-route-not-registered');
+        }
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    let defaultRouter;
+    /**
+     * Creates a new, singleton Router instance if one does not exist. If one
+     * does already exist, that instance is returned.
+     *
+     * @private
+     * @return {Router}
+     */
+    const getOrCreateDefaultRouter = () => {
+      if (!defaultRouter) {
+        defaultRouter = new Router();
+        // The helpers that use the default Router assume these listeners exist.
+        defaultRouter.addFetchListener();
+        defaultRouter.addCacheListener();
+      }
+      return defaultRouter;
+    };
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Easily register a RegExp, string, or function with a caching
+     * strategy to a singleton Router instance.
+     *
+     * This method will generate a Route for you if needed and
+     * call {@link workbox-routing.Router#registerRoute}.
+     *
+     * @param {RegExp|string|workbox-routing.Route~matchCallback|workbox-routing.Route} capture
+     * If the capture param is a `Route`, all other arguments will be ignored.
+     * @param {workbox-routing~handlerCallback} [handler] A callback
+     * function that returns a Promise resulting in a Response. This parameter
+     * is required if `capture` is not a `Route` object.
+     * @param {string} [method='GET'] The HTTP method to match the Route
+     * against.
+     * @return {workbox-routing.Route} The generated `Route`.
+     *
+     * @memberof workbox-routing
+     */
+    function registerRoute(capture, handler, method) {
+      let route;
+      if (typeof capture === 'string') {
+        const captureUrl = new URL(capture, location.href);
+        {
+          if (!(capture.startsWith('/') || capture.startsWith('http'))) {
+            throw new WorkboxError('invalid-string', {
+              moduleName: 'workbox-routing',
+              funcName: 'registerRoute',
+              paramName: 'capture'
+            });
+          }
+          // We want to check if Express-style wildcards are in the pathname only.
+          // TODO: Remove this log message in v4.
+          const valueToCheck = capture.startsWith('http') ? captureUrl.pathname : capture;
+          // See https://github.com/pillarjs/path-to-regexp#parameters
+          const wildcards = '[*:?+]';
+          if (new RegExp(`${wildcards}`).exec(valueToCheck)) {
+            logger.debug(`The '$capture' parameter contains an Express-style wildcard ` + `character (${wildcards}). Strings are now always interpreted as ` + `exact matches; use a RegExp for partial or wildcard matches.`);
+          }
+        }
+        const matchCallback = ({
+          url
+        }) => {
+          {
+            if (url.pathname === captureUrl.pathname && url.origin !== captureUrl.origin) {
+              logger.debug(`${capture} only partially matches the cross-origin URL ` + `${url.toString()}. This route will only handle cross-origin requests ` + `if they match the entire URL.`);
+            }
+          }
+          return url.href === captureUrl.href;
+        };
+        // If `capture` is a string then `handler` and `method` must be present.
+        route = new Route(matchCallback, handler, method);
+      } else if (capture instanceof RegExp) {
+        // If `capture` is a `RegExp` then `handler` and `method` must be present.
+        route = new RegExpRoute(capture, handler, method);
+      } else if (typeof capture === 'function') {
+        // If `capture` is a function then `handler` and `method` must be present.
+        route = new Route(capture, handler, method);
+      } else if (capture instanceof Route) {
+        route = capture;
+      } else {
+        throw new WorkboxError('unsupported-route-type', {
+          moduleName: 'workbox-routing',
+          funcName: 'registerRoute',
+          paramName: 'capture'
+        });
+      }
+      const defaultRouter = getOrCreateDefaultRouter();
+      defaultRouter.registerRoute(route);
+      return route;
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const _cacheNameDetails = {
+      googleAnalytics: 'googleAnalytics',
+      precache: 'precache-v2',
+      prefix: 'workbox',
+      runtime: 'runtime',
+      suffix: typeof registration !== 'undefined' ? registration.scope : ''
+    };
+    const _createCacheName = cacheName => {
+      return [_cacheNameDetails.prefix, cacheName, _cacheNameDetails.suffix].filter(value => value && value.length > 0).join('-');
+    };
+    const eachCacheNameDetail = fn => {
+      for (const key of Object.keys(_cacheNameDetails)) {
+        fn(key);
+      }
+    };
+    const cacheNames = {
+      updateDetails: details => {
+        eachCacheNameDetail(key => {
+          if (typeof details[key] === 'string') {
+            _cacheNameDetails[key] = details[key];
+          }
+        });
+      },
+      getGoogleAnalyticsName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.googleAnalytics);
+      },
+      getPrecacheName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.precache);
+      },
+      getPrefix: () => {
+        return _cacheNameDetails.prefix;
+      },
+      getRuntimeName: userCacheName => {
+        return userCacheName || _createCacheName(_cacheNameDetails.runtime);
+      },
+      getSuffix: () => {
+        return _cacheNameDetails.suffix;
+      }
+    };
+
+    /*
+      Copyright 2020 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A utility method that makes it easier to use `event.waitUntil` with
+     * async functions and return the result.
+     *
+     * @param {ExtendableEvent} event
+     * @param {Function} asyncFn
+     * @return {Function}
+     * @private
+     */
+    function waitUntil(event, asyncFn) {
+      const returnPromise = asyncFn();
+      event.waitUntil(returnPromise);
+      return returnPromise;
+    }
+
+    // @ts-ignore
+    try {
+      self['workbox:precaching:7.0.0'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    // Name of the search parameter used to store revision info.
+    const REVISION_SEARCH_PARAM = '__WB_REVISION__';
+    /**
+     * Converts a manifest entry into a versioned URL suitable for precaching.
+     *
+     * @param {Object|string} entry
+     * @return {string} A URL with versioning info.
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function createCacheKey(entry) {
+      if (!entry) {
+        throw new WorkboxError('add-to-cache-list-unexpected-type', {
+          entry
+        });
+      }
+      // If a precache manifest entry is a string, it's assumed to be a versioned
+      // URL, like '/app.abcd1234.js'. Return as-is.
+      if (typeof entry === 'string') {
+        const urlObject = new URL(entry, location.href);
+        return {
+          cacheKey: urlObject.href,
+          url: urlObject.href
+        };
+      }
+      const {
+        revision,
+        url
+      } = entry;
+      if (!url) {
+        throw new WorkboxError('add-to-cache-list-unexpected-type', {
+          entry
+        });
+      }
+      // If there's just a URL and no revision, then it's also assumed to be a
+      // versioned URL.
+      if (!revision) {
+        const urlObject = new URL(url, location.href);
+        return {
+          cacheKey: urlObject.href,
+          url: urlObject.href
+        };
+      }
+      // Otherwise, construct a properly versioned URL using the custom Workbox
+      // search parameter along with the revision info.
+      const cacheKeyURL = new URL(url, location.href);
+      const originalURL = new URL(url, location.href);
+      cacheKeyURL.searchParams.set(REVISION_SEARCH_PARAM, revision);
+      return {
+        cacheKey: cacheKeyURL.href,
+        url: originalURL.href
+      };
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A plugin, designed to be used with PrecacheController, to determine the
+     * of assets that were updated (or not updated) during the install event.
+     *
+     * @private
+     */
+    class PrecacheInstallReportPlugin {
+      constructor() {
+        this.updatedURLs = [];
+        this.notUpdatedURLs = [];
+        this.handlerWillStart = async ({
+          request,
+          state
+        }) => {
+          // TODO: `state` should never be undefined...
+          if (state) {
+            state.originalRequest = request;
+          }
+        };
+        this.cachedResponseWillBeUsed = async ({
+          event,
+          state,
+          cachedResponse
+        }) => {
+          if (event.type === 'install') {
+            if (state && state.originalRequest && state.originalRequest instanceof Request) {
+              // TODO: `state` should never be undefined...
+              const url = state.originalRequest.url;
+              if (cachedResponse) {
+                this.notUpdatedURLs.push(url);
+              } else {
+                this.updatedURLs.push(url);
+              }
+            }
+          }
+          return cachedResponse;
+        };
+      }
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A plugin, designed to be used with PrecacheController, to translate URLs into
+     * the corresponding cache key, based on the current revision info.
+     *
+     * @private
+     */
+    class PrecacheCacheKeyPlugin {
+      constructor({
+        precacheController
+      }) {
+        this.cacheKeyWillBeUsed = async ({
+          request,
+          params
+        }) => {
+          // Params is type any, can't change right now.
+          /* eslint-disable */
+          const cacheKey = (params === null || params === void 0 ? void 0 : params.cacheKey) || this._precacheController.getCacheKeyForURL(request.url);
+          /* eslint-enable */
+          return cacheKey ? new Request(cacheKey, {
+            headers: request.headers
+          }) : request;
+        };
+        this._precacheController = precacheController;
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * @param {string} groupTitle
+     * @param {Array<string>} deletedURLs
+     *
+     * @private
+     */
+    const logGroup = (groupTitle, deletedURLs) => {
+      logger.groupCollapsed(groupTitle);
+      for (const url of deletedURLs) {
+        logger.log(url);
+      }
+      logger.groupEnd();
+    };
+    /**
+     * @param {Array<string>} deletedURLs
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function printCleanupDetails(deletedURLs) {
+      const deletionCount = deletedURLs.length;
+      if (deletionCount > 0) {
+        logger.groupCollapsed(`During precaching cleanup, ` + `${deletionCount} cached ` + `request${deletionCount === 1 ? ' was' : 's were'} deleted.`);
+        logGroup('Deleted Cache Requests', deletedURLs);
+        logger.groupEnd();
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * @param {string} groupTitle
+     * @param {Array<string>} urls
+     *
+     * @private
+     */
+    function _nestedGroup(groupTitle, urls) {
+      if (urls.length === 0) {
+        return;
+      }
+      logger.groupCollapsed(groupTitle);
+      for (const url of urls) {
+        logger.log(url);
+      }
+      logger.groupEnd();
+    }
+    /**
+     * @param {Array<string>} urlsToPrecache
+     * @param {Array<string>} urlsAlreadyPrecached
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function printInstallDetails(urlsToPrecache, urlsAlreadyPrecached) {
+      const precachedCount = urlsToPrecache.length;
+      const alreadyPrecachedCount = urlsAlreadyPrecached.length;
+      if (precachedCount || alreadyPrecachedCount) {
+        let message = `Precaching ${precachedCount} file${precachedCount === 1 ? '' : 's'}.`;
+        if (alreadyPrecachedCount > 0) {
+          message += ` ${alreadyPrecachedCount} ` + `file${alreadyPrecachedCount === 1 ? ' is' : 's are'} already cached.`;
+        }
+        logger.groupCollapsed(message);
+        _nestedGroup(`View newly precached URLs.`, urlsToPrecache);
+        _nestedGroup(`View previously precached URLs.`, urlsAlreadyPrecached);
+        logger.groupEnd();
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    let supportStatus;
+    /**
+     * A utility function that determines whether the current browser supports
+     * constructing a new `Response` from a `response.body` stream.
+     *
+     * @return {boolean} `true`, if the current browser can successfully
+     *     construct a `Response` from a `response.body` stream, `false` otherwise.
+     *
+     * @private
+     */
+    function canConstructResponseFromBodyStream() {
+      if (supportStatus === undefined) {
+        const testResponse = new Response('');
+        if ('body' in testResponse) {
+          try {
+            new Response(testResponse.body);
+            supportStatus = true;
+          } catch (error) {
+            supportStatus = false;
+          }
+        }
+        supportStatus = false;
+      }
+      return supportStatus;
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Allows developers to copy a response and modify its `headers`, `status`,
+     * or `statusText` values (the values settable via a
+     * [`ResponseInit`]{@link https://developer.mozilla.org/en-US/docs/Web/API/Response/Response#Syntax}
+     * object in the constructor).
+     * To modify these values, pass a function as the second argument. That
+     * function will be invoked with a single object with the response properties
+     * `{headers, status, statusText}`. The return value of this function will
+     * be used as the `ResponseInit` for the new `Response`. To change the values
+     * either modify the passed parameter(s) and return it, or return a totally
+     * new object.
+     *
+     * This method is intentionally limited to same-origin responses, regardless of
+     * whether CORS was used or not.
+     *
+     * @param {Response} response
+     * @param {Function} modifier
+     * @memberof workbox-core
+     */
+    async function copyResponse(response, modifier) {
+      let origin = null;
+      // If response.url isn't set, assume it's cross-origin and keep origin null.
+      if (response.url) {
+        const responseURL = new URL(response.url);
+        origin = responseURL.origin;
+      }
+      if (origin !== self.location.origin) {
+        throw new WorkboxError('cross-origin-copy-response', {
+          origin
+        });
+      }
+      const clonedResponse = response.clone();
+      // Create a fresh `ResponseInit` object by cloning the headers.
+      const responseInit = {
+        headers: new Headers(clonedResponse.headers),
+        status: clonedResponse.status,
+        statusText: clonedResponse.statusText
+      };
+      // Apply any user modifications.
+      const modifiedResponseInit = modifier ? modifier(responseInit) : responseInit;
+      // Create the new response from the body stream and `ResponseInit`
+      // modifications. Note: not all browsers support the Response.body stream,
+      // so fall back to reading the entire body into memory as a blob.
+      const body = canConstructResponseFromBodyStream() ? clonedResponse.body : await clonedResponse.blob();
+      return new Response(body, modifiedResponseInit);
+    }
+
+    /*
+      Copyright 2020 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    function stripParams(fullURL, ignoreParams) {
+      const strippedURL = new URL(fullURL);
+      for (const param of ignoreParams) {
+        strippedURL.searchParams.delete(param);
+      }
+      return strippedURL.href;
+    }
+    /**
+     * Matches an item in the cache, ignoring specific URL params. This is similar
+     * to the `ignoreSearch` option, but it allows you to ignore just specific
+     * params (while continuing to match on the others).
+     *
+     * @private
+     * @param {Cache} cache
+     * @param {Request} request
+     * @param {Object} matchOptions
+     * @param {Array<string>} ignoreParams
+     * @return {Promise<Response|undefined>}
+     */
+    async function cacheMatchIgnoreParams(cache, request, ignoreParams, matchOptions) {
+      const strippedRequestURL = stripParams(request.url, ignoreParams);
+      // If the request doesn't include any ignored params, match as normal.
+      if (request.url === strippedRequestURL) {
+        return cache.match(request, matchOptions);
+      }
+      // Otherwise, match by comparing keys
+      const keysOptions = Object.assign(Object.assign({}, matchOptions), {
+        ignoreSearch: true
+      });
+      const cacheKeys = await cache.keys(request, keysOptions);
+      for (const cacheKey of cacheKeys) {
+        const strippedCacheKeyURL = stripParams(cacheKey.url, ignoreParams);
+        if (strippedRequestURL === strippedCacheKeyURL) {
+          return cache.match(cacheKey, matchOptions);
+        }
+      }
+      return;
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * The Deferred class composes Promises in a way that allows for them to be
+     * resolved or rejected from outside the constructor. In most cases promises
+     * should be used directly, but Deferreds can be necessary when the logic to
+     * resolve a promise must be separate.
+     *
+     * @private
+     */
+    class Deferred {
+      /**
+       * Creates a promise and exposes its resolve and reject functions as methods.
+       */
+      constructor() {
+        this.promise = new Promise((resolve, reject) => {
+          this.resolve = resolve;
+          this.reject = reject;
+        });
+      }
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    // Callbacks to be executed whenever there's a quota error.
+    // Can't change Function type right now.
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const quotaErrorCallbacks = new Set();
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Runs all of the callback functions, one at a time sequentially, in the order
+     * in which they were registered.
+     *
+     * @memberof workbox-core
+     * @private
+     */
+    async function executeQuotaErrorCallbacks() {
+      {
+        logger.log(`About to run ${quotaErrorCallbacks.size} ` + `callbacks to clean up caches.`);
+      }
+      for (const callback of quotaErrorCallbacks) {
+        await callback();
+        {
+          logger.log(callback, 'is complete.');
+        }
+      }
+      {
+        logger.log('Finished running callbacks.');
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Returns a promise that resolves and the passed number of milliseconds.
+     * This utility is an async/await-friendly version of `setTimeout`.
+     *
+     * @param {number} ms
+     * @return {Promise}
+     * @private
+     */
+    function timeout(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    // @ts-ignore
+    try {
+      self['workbox:strategies:7.0.0'] && _();
+    } catch (e) {}
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    function toRequest(input) {
+      return typeof input === 'string' ? new Request(input) : input;
+    }
+    /**
+     * A class created every time a Strategy instance instance calls
+     * {@link workbox-strategies.Strategy~handle} or
+     * {@link workbox-strategies.Strategy~handleAll} that wraps all fetch and
+     * cache actions around plugin callbacks and keeps track of when the strategy
+     * is "done" (i.e. all added `event.waitUntil()` promises have resolved).
+     *
+     * @memberof workbox-strategies
+     */
+    class StrategyHandler {
+      /**
+       * Creates a new instance associated with the passed strategy and event
+       * that's handling the request.
+       *
+       * The constructor also initializes the state that will be passed to each of
+       * the plugins handling this request.
+       *
+       * @param {workbox-strategies.Strategy} strategy
+       * @param {Object} options
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params] The return value from the
+       *     {@link workbox-routing~matchCallback} (if applicable).
+       */
+      constructor(strategy, options) {
+        this._cacheKeys = {};
+        /**
+         * The request the strategy is performing (passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * @name request
+         * @instance
+         * @type {Request}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * The event associated with this request.
+         * @name event
+         * @instance
+         * @type {ExtendableEvent}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * A `URL` instance of `request.url` (if passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * Note: the `url` param will be present if the strategy was invoked
+         * from a workbox `Route` object.
+         * @name url
+         * @instance
+         * @type {URL|undefined}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        /**
+         * A `param` value (if passed to the strategy's
+         * `handle()` or `handleAll()` method).
+         * Note: the `param` param will be present if the strategy was invoked
+         * from a workbox `Route` object and the
+         * {@link workbox-routing~matchCallback} returned
+         * a truthy value (it will be that value).
+         * @name params
+         * @instance
+         * @type {*|undefined}
+         * @memberof workbox-strategies.StrategyHandler
+         */
+        {
+          finalAssertExports.isInstance(options.event, ExtendableEvent, {
+            moduleName: 'workbox-strategies',
+            className: 'StrategyHandler',
+            funcName: 'constructor',
+            paramName: 'options.event'
+          });
+        }
+        Object.assign(this, options);
+        this.event = options.event;
+        this._strategy = strategy;
+        this._handlerDeferred = new Deferred();
+        this._extendLifetimePromises = [];
+        // Copy the plugins list (since it's mutable on the strategy),
+        // so any mutations don't affect this handler instance.
+        this._plugins = [...strategy.plugins];
+        this._pluginStateMap = new Map();
+        for (const plugin of this._plugins) {
+          this._pluginStateMap.set(plugin, {});
+        }
+        this.event.waitUntil(this._handlerDeferred.promise);
+      }
+      /**
+       * Fetches a given request (and invokes any applicable plugin callback
+       * methods) using the `fetchOptions` (for non-navigation requests) and
+       * `plugins` defined on the `Strategy` object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - `requestWillFetch()`
+       * - `fetchDidSucceed()`
+       * - `fetchDidFail()`
+       *
+       * @param {Request|string} input The URL or request to fetch.
+       * @return {Promise<Response>}
+       */
+      async fetch(input) {
+        const {
+          event
+        } = this;
+        let request = toRequest(input);
+        if (request.mode === 'navigate' && event instanceof FetchEvent && event.preloadResponse) {
+          const possiblePreloadResponse = await event.preloadResponse;
+          if (possiblePreloadResponse) {
+            {
+              logger.log(`Using a preloaded navigation response for ` + `'${getFriendlyURL(request.url)}'`);
+            }
+            return possiblePreloadResponse;
+          }
+        }
+        // If there is a fetchDidFail plugin, we need to save a clone of the
+        // original request before it's either modified by a requestWillFetch
+        // plugin or before the original request's body is consumed via fetch().
+        const originalRequest = this.hasCallback('fetchDidFail') ? request.clone() : null;
+        try {
+          for (const cb of this.iterateCallbacks('requestWillFetch')) {
+            request = await cb({
+              request: request.clone(),
+              event
+            });
+          }
+        } catch (err) {
+          if (err instanceof Error) {
+            throw new WorkboxError('plugin-error-request-will-fetch', {
+              thrownErrorMessage: err.message
+            });
+          }
+        }
+        // The request can be altered by plugins with `requestWillFetch` making
+        // the original request (most likely from a `fetch` event) different
+        // from the Request we make. Pass both to `fetchDidFail` to aid debugging.
+        const pluginFilteredRequest = request.clone();
+        try {
+          let fetchResponse;
+          // See https://github.com/GoogleChrome/workbox/issues/1796
+          fetchResponse = await fetch(request, request.mode === 'navigate' ? undefined : this._strategy.fetchOptions);
+          if ("development" !== 'production') {
+            logger.debug(`Network request for ` + `'${getFriendlyURL(request.url)}' returned a response with ` + `status '${fetchResponse.status}'.`);
+          }
+          for (const callback of this.iterateCallbacks('fetchDidSucceed')) {
+            fetchResponse = await callback({
+              event,
+              request: pluginFilteredRequest,
+              response: fetchResponse
+            });
+          }
+          return fetchResponse;
+        } catch (error) {
+          {
+            logger.log(`Network request for ` + `'${getFriendlyURL(request.url)}' threw an error.`, error);
+          }
+          // `originalRequest` will only exist if a `fetchDidFail` callback
+          // is being used (see above).
+          if (originalRequest) {
+            await this.runCallbacks('fetchDidFail', {
+              error: error,
+              event,
+              originalRequest: originalRequest.clone(),
+              request: pluginFilteredRequest.clone()
+            });
+          }
+          throw error;
+        }
+      }
+      /**
+       * Calls `this.fetch()` and (in the background) runs `this.cachePut()` on
+       * the response generated by `this.fetch()`.
+       *
+       * The call to `this.cachePut()` automatically invokes `this.waitUntil()`,
+       * so you do not have to manually call `waitUntil()` on the event.
+       *
+       * @param {Request|string} input The request or URL to fetch and cache.
+       * @return {Promise<Response>}
+       */
+      async fetchAndCachePut(input) {
+        const response = await this.fetch(input);
+        const responseClone = response.clone();
+        void this.waitUntil(this.cachePut(input, responseClone));
+        return response;
+      }
+      /**
+       * Matches a request from the cache (and invokes any applicable plugin
+       * callback methods) using the `cacheName`, `matchOptions`, and `plugins`
+       * defined on the strategy object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - cacheKeyWillByUsed()
+       * - cachedResponseWillByUsed()
+       *
+       * @param {Request|string} key The Request or URL to use as the cache key.
+       * @return {Promise<Response|undefined>} A matching response, if found.
+       */
+      async cacheMatch(key) {
+        const request = toRequest(key);
+        let cachedResponse;
+        const {
+          cacheName,
+          matchOptions
+        } = this._strategy;
+        const effectiveRequest = await this.getCacheKey(request, 'read');
+        const multiMatchOptions = Object.assign(Object.assign({}, matchOptions), {
+          cacheName
+        });
+        cachedResponse = await caches.match(effectiveRequest, multiMatchOptions);
+        {
+          if (cachedResponse) {
+            logger.debug(`Found a cached response in '${cacheName}'.`);
+          } else {
+            logger.debug(`No cached response found in '${cacheName}'.`);
+          }
+        }
+        for (const callback of this.iterateCallbacks('cachedResponseWillBeUsed')) {
+          cachedResponse = (await callback({
+            cacheName,
+            matchOptions,
+            cachedResponse,
+            request: effectiveRequest,
+            event: this.event
+          })) || undefined;
+        }
+        return cachedResponse;
+      }
+      /**
+       * Puts a request/response pair in the cache (and invokes any applicable
+       * plugin callback methods) using the `cacheName` and `plugins` defined on
+       * the strategy object.
+       *
+       * The following plugin lifecycle methods are invoked when using this method:
+       * - cacheKeyWillByUsed()
+       * - cacheWillUpdate()
+       * - cacheDidUpdate()
+       *
+       * @param {Request|string} key The request or URL to use as the cache key.
+       * @param {Response} response The response to cache.
+       * @return {Promise<boolean>} `false` if a cacheWillUpdate caused the response
+       * not be cached, and `true` otherwise.
+       */
+      async cachePut(key, response) {
+        const request = toRequest(key);
+        // Run in the next task to avoid blocking other cache reads.
+        // https://github.com/w3c/ServiceWorker/issues/1397
+        await timeout(0);
+        const effectiveRequest = await this.getCacheKey(request, 'write');
+        {
+          if (effectiveRequest.method && effectiveRequest.method !== 'GET') {
+            throw new WorkboxError('attempt-to-cache-non-get-request', {
+              url: getFriendlyURL(effectiveRequest.url),
+              method: effectiveRequest.method
+            });
+          }
+          // See https://github.com/GoogleChrome/workbox/issues/2818
+          const vary = response.headers.get('Vary');
+          if (vary) {
+            logger.debug(`The response for ${getFriendlyURL(effectiveRequest.url)} ` + `has a 'Vary: ${vary}' header. ` + `Consider setting the {ignoreVary: true} option on your strategy ` + `to ensure cache matching and deletion works as expected.`);
+          }
+        }
+        if (!response) {
+          {
+            logger.error(`Cannot cache non-existent response for ` + `'${getFriendlyURL(effectiveRequest.url)}'.`);
+          }
+          throw new WorkboxError('cache-put-with-no-response', {
+            url: getFriendlyURL(effectiveRequest.url)
+          });
+        }
+        const responseToCache = await this._ensureResponseSafeToCache(response);
+        if (!responseToCache) {
+          {
+            logger.debug(`Response '${getFriendlyURL(effectiveRequest.url)}' ` + `will not be cached.`, responseToCache);
+          }
+          return false;
+        }
+        const {
+          cacheName,
+          matchOptions
+        } = this._strategy;
+        const cache = await self.caches.open(cacheName);
+        const hasCacheUpdateCallback = this.hasCallback('cacheDidUpdate');
+        const oldResponse = hasCacheUpdateCallback ? await cacheMatchIgnoreParams(
+        // TODO(philipwalton): the `__WB_REVISION__` param is a precaching
+        // feature. Consider into ways to only add this behavior if using
+        // precaching.
+        cache, effectiveRequest.clone(), ['__WB_REVISION__'], matchOptions) : null;
+        {
+          logger.debug(`Updating the '${cacheName}' cache with a new Response ` + `for ${getFriendlyURL(effectiveRequest.url)}.`);
+        }
+        try {
+          await cache.put(effectiveRequest, hasCacheUpdateCallback ? responseToCache.clone() : responseToCache);
+        } catch (error) {
+          if (error instanceof Error) {
+            // See https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-QuotaExceededError
+            if (error.name === 'QuotaExceededError') {
+              await executeQuotaErrorCallbacks();
+            }
+            throw error;
+          }
+        }
+        for (const callback of this.iterateCallbacks('cacheDidUpdate')) {
+          await callback({
+            cacheName,
+            oldResponse,
+            newResponse: responseToCache.clone(),
+            request: effectiveRequest,
+            event: this.event
+          });
+        }
+        return true;
+      }
+      /**
+       * Checks the list of plugins for the `cacheKeyWillBeUsed` callback, and
+       * executes any of those callbacks found in sequence. The final `Request`
+       * object returned by the last plugin is treated as the cache key for cache
+       * reads and/or writes. If no `cacheKeyWillBeUsed` plugin callbacks have
+       * been registered, the passed request is returned unmodified
+       *
+       * @param {Request} request
+       * @param {string} mode
+       * @return {Promise<Request>}
+       */
+      async getCacheKey(request, mode) {
+        const key = `${request.url} | ${mode}`;
+        if (!this._cacheKeys[key]) {
+          let effectiveRequest = request;
+          for (const callback of this.iterateCallbacks('cacheKeyWillBeUsed')) {
+            effectiveRequest = toRequest(await callback({
+              mode,
+              request: effectiveRequest,
+              event: this.event,
+              // params has a type any can't change right now.
+              params: this.params // eslint-disable-line
+            }));
+          }
+          this._cacheKeys[key] = effectiveRequest;
+        }
+        return this._cacheKeys[key];
+      }
+      /**
+       * Returns true if the strategy has at least one plugin with the given
+       * callback.
+       *
+       * @param {string} name The name of the callback to check for.
+       * @return {boolean}
+       */
+      hasCallback(name) {
+        for (const plugin of this._strategy.plugins) {
+          if (name in plugin) {
+            return true;
+          }
+        }
+        return false;
+      }
+      /**
+       * Runs all plugin callbacks matching the given name, in order, passing the
+       * given param object (merged ith the current plugin state) as the only
+       * argument.
+       *
+       * Note: since this method runs all plugins, it's not suitable for cases
+       * where the return value of a callback needs to be applied prior to calling
+       * the next callback. See
+       * {@link workbox-strategies.StrategyHandler#iterateCallbacks}
+       * below for how to handle that case.
+       *
+       * @param {string} name The name of the callback to run within each plugin.
+       * @param {Object} param The object to pass as the first (and only) param
+       *     when executing each callback. This object will be merged with the
+       *     current plugin state prior to callback execution.
+       */
+      async runCallbacks(name, param) {
+        for (const callback of this.iterateCallbacks(name)) {
+          // TODO(philipwalton): not sure why `any` is needed. It seems like
+          // this should work with `as WorkboxPluginCallbackParam[C]`.
+          await callback(param);
+        }
+      }
+      /**
+       * Accepts a callback and returns an iterable of matching plugin callbacks,
+       * where each callback is wrapped with the current handler state (i.e. when
+       * you call each callback, whatever object parameter you pass it will
+       * be merged with the plugin's current state).
+       *
+       * @param {string} name The name fo the callback to run
+       * @return {Array<Function>}
+       */
+      *iterateCallbacks(name) {
+        for (const plugin of this._strategy.plugins) {
+          if (typeof plugin[name] === 'function') {
+            const state = this._pluginStateMap.get(plugin);
+            const statefulCallback = param => {
+              const statefulParam = Object.assign(Object.assign({}, param), {
+                state
+              });
+              // TODO(philipwalton): not sure why `any` is needed. It seems like
+              // this should work with `as WorkboxPluginCallbackParam[C]`.
+              return plugin[name](statefulParam);
+            };
+            yield statefulCallback;
+          }
+        }
+      }
+      /**
+       * Adds a promise to the
+       * [extend lifetime promises]{@link https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises}
+       * of the event event associated with the request being handled (usually a
+       * `FetchEvent`).
+       *
+       * Note: you can await
+       * {@link workbox-strategies.StrategyHandler~doneWaiting}
+       * to know when all added promises have settled.
+       *
+       * @param {Promise} promise A promise to add to the extend lifetime promises
+       *     of the event that triggered the request.
+       */
+      waitUntil(promise) {
+        this._extendLifetimePromises.push(promise);
+        return promise;
+      }
+      /**
+       * Returns a promise that resolves once all promises passed to
+       * {@link workbox-strategies.StrategyHandler~waitUntil}
+       * have settled.
+       *
+       * Note: any work done after `doneWaiting()` settles should be manually
+       * passed to an event's `waitUntil()` method (not this handler's
+       * `waitUntil()` method), otherwise the service worker thread my be killed
+       * prior to your work completing.
+       */
+      async doneWaiting() {
+        let promise;
+        while (promise = this._extendLifetimePromises.shift()) {
+          await promise;
+        }
+      }
+      /**
+       * Stops running the strategy and immediately resolves any pending
+       * `waitUntil()` promises.
+       */
+      destroy() {
+        this._handlerDeferred.resolve(null);
+      }
+      /**
+       * This method will call cacheWillUpdate on the available plugins (or use
+       * status === 200) to determine if the Response is safe and valid to cache.
+       *
+       * @param {Request} options.request
+       * @param {Response} options.response
+       * @return {Promise<Response|undefined>}
+       *
+       * @private
+       */
+      async _ensureResponseSafeToCache(response) {
+        let responseToCache = response;
+        let pluginsUsed = false;
+        for (const callback of this.iterateCallbacks('cacheWillUpdate')) {
+          responseToCache = (await callback({
+            request: this.request,
+            response: responseToCache,
+            event: this.event
+          })) || undefined;
+          pluginsUsed = true;
+          if (!responseToCache) {
+            break;
+          }
+        }
+        if (!pluginsUsed) {
+          if (responseToCache && responseToCache.status !== 200) {
+            responseToCache = undefined;
+          }
+          {
+            if (responseToCache) {
+              if (responseToCache.status !== 200) {
+                if (responseToCache.status === 0) {
+                  logger.warn(`The response for '${this.request.url}' ` + `is an opaque response. The caching strategy that you're ` + `using will not cache opaque responses by default.`);
+                } else {
+                  logger.debug(`The response for '${this.request.url}' ` + `returned a status code of '${response.status}' and won't ` + `be cached as a result.`);
+                }
+              }
+            }
+          }
+        }
+        return responseToCache;
+      }
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * An abstract base class that all other strategy classes must extend from:
+     *
+     * @memberof workbox-strategies
+     */
+    class Strategy {
+      /**
+       * Creates a new instance of the strategy and sets all documented option
+       * properties as public instance properties.
+       *
+       * Note: if a custom strategy class extends the base Strategy class and does
+       * not need more than these properties, it does not need to define its own
+       * constructor.
+       *
+       * @param {Object} [options]
+       * @param {string} [options.cacheName] Cache name to store and retrieve
+       * requests. Defaults to the cache names provided by
+       * {@link workbox-core.cacheNames}.
+       * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+       * to use in conjunction with this caching strategy.
+       * @param {Object} [options.fetchOptions] Values passed along to the
+       * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+       * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+       * `fetch()` requests made by this strategy.
+       * @param {Object} [options.matchOptions] The
+       * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+       * for any `cache.match()` or `cache.put()` calls made by this strategy.
+       */
+      constructor(options = {}) {
+        /**
+         * Cache name to store and retrieve
+         * requests. Defaults to the cache names provided by
+         * {@link workbox-core.cacheNames}.
+         *
+         * @type {string}
+         */
+        this.cacheName = cacheNames.getRuntimeName(options.cacheName);
+        /**
+         * The list
+         * [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+         * used by this strategy.
+         *
+         * @type {Array<Object>}
+         */
+        this.plugins = options.plugins || [];
+        /**
+         * Values passed along to the
+         * [`init`]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters}
+         * of all fetch() requests made by this strategy.
+         *
+         * @type {Object}
+         */
+        this.fetchOptions = options.fetchOptions;
+        /**
+         * The
+         * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+         * for any `cache.match()` or `cache.put()` calls made by this strategy.
+         *
+         * @type {Object}
+         */
+        this.matchOptions = options.matchOptions;
+      }
+      /**
+       * Perform a request strategy and returns a `Promise` that will resolve with
+       * a `Response`, invoking all relevant plugin callbacks.
+       *
+       * When a strategy instance is registered with a Workbox
+       * {@link workbox-routing.Route}, this method is automatically
+       * called when the route matches.
+       *
+       * Alternatively, this method can be used in a standalone `FetchEvent`
+       * listener by passing it to `event.respondWith()`.
+       *
+       * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+       *     properties listed below.
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params]
+       */
+      handle(options) {
+        const [responseDone] = this.handleAll(options);
+        return responseDone;
+      }
+      /**
+       * Similar to {@link workbox-strategies.Strategy~handle}, but
+       * instead of just returning a `Promise` that resolves to a `Response` it
+       * it will return an tuple of `[response, done]` promises, where the former
+       * (`response`) is equivalent to what `handle()` returns, and the latter is a
+       * Promise that will resolve once any promises that were added to
+       * `event.waitUntil()` as part of performing the strategy have completed.
+       *
+       * You can await the `done` promise to ensure any extra work performed by
+       * the strategy (usually caching responses) completes successfully.
+       *
+       * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+       *     properties listed below.
+       * @param {Request|string} options.request A request to run this strategy for.
+       * @param {ExtendableEvent} options.event The event associated with the
+       *     request.
+       * @param {URL} [options.url]
+       * @param {*} [options.params]
+       * @return {Array<Promise>} A tuple of [response, done]
+       *     promises that can be used to determine when the response resolves as
+       *     well as when the handler has completed all its work.
+       */
+      handleAll(options) {
+        // Allow for flexible options to be passed.
+        if (options instanceof FetchEvent) {
+          options = {
+            event: options,
+            request: options.request
+          };
+        }
+        const event = options.event;
+        const request = typeof options.request === 'string' ? new Request(options.request) : options.request;
+        const params = 'params' in options ? options.params : undefined;
+        const handler = new StrategyHandler(this, {
+          event,
+          request,
+          params
+        });
+        const responseDone = this._getResponse(handler, request, event);
+        const handlerDone = this._awaitComplete(responseDone, handler, request, event);
+        // Return an array of promises, suitable for use with Promise.all().
+        return [responseDone, handlerDone];
+      }
+      async _getResponse(handler, request, event) {
+        await handler.runCallbacks('handlerWillStart', {
+          event,
+          request
+        });
+        let response = undefined;
+        try {
+          response = await this._handle(request, handler);
+          // The "official" Strategy subclasses all throw this error automatically,
+          // but in case a third-party Strategy doesn't, ensure that we have a
+          // consistent failure when there's no response or an error response.
+          if (!response || response.type === 'error') {
+            throw new WorkboxError('no-response', {
+              url: request.url
+            });
+          }
+        } catch (error) {
+          if (error instanceof Error) {
+            for (const callback of handler.iterateCallbacks('handlerDidError')) {
+              response = await callback({
+                error,
+                event,
+                request
+              });
+              if (response) {
+                break;
+              }
+            }
+          }
+          if (!response) {
+            throw error;
+          } else {
+            logger.log(`While responding to '${getFriendlyURL(request.url)}', ` + `an ${error instanceof Error ? error.toString() : ''} error occurred. Using a fallback response provided by ` + `a handlerDidError plugin.`);
+          }
+        }
+        for (const callback of handler.iterateCallbacks('handlerWillRespond')) {
+          response = await callback({
+            event,
+            request,
+            response
+          });
+        }
+        return response;
+      }
+      async _awaitComplete(responseDone, handler, request, event) {
+        let response;
+        let error;
+        try {
+          response = await responseDone;
+        } catch (error) {
+          // Ignore errors, as response errors should be caught via the `response`
+          // promise above. The `done` promise will only throw for errors in
+          // promises passed to `handler.waitUntil()`.
+        }
+        try {
+          await handler.runCallbacks('handlerDidRespond', {
+            event,
+            request,
+            response
+          });
+          await handler.doneWaiting();
+        } catch (waitUntilError) {
+          if (waitUntilError instanceof Error) {
+            error = waitUntilError;
+          }
+        }
+        await handler.runCallbacks('handlerDidComplete', {
+          event,
+          request,
+          response,
+          error: error
+        });
+        handler.destroy();
+        if (error) {
+          throw error;
+        }
+      }
+    }
+    /**
+     * Classes extending the `Strategy` based class should implement this method,
+     * and leverage the {@link workbox-strategies.StrategyHandler}
+     * arg to perform all fetching and cache logic, which will ensure all relevant
+     * cache, cache options, fetch options and plugins are used (per the current
+     * strategy instance).
+     *
+     * @name _handle
+     * @instance
+     * @abstract
+     * @function
+     * @param {Request} request
+     * @param {workbox-strategies.StrategyHandler} handler
+     * @return {Promise<Response>}
+     *
+     * @memberof workbox-strategies.Strategy
+     */
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A {@link workbox-strategies.Strategy} implementation
+     * specifically designed to work with
+     * {@link workbox-precaching.PrecacheController}
+     * to both cache and fetch precached assets.
+     *
+     * Note: an instance of this class is created automatically when creating a
+     * `PrecacheController`; it's generally not necessary to create this yourself.
+     *
+     * @extends workbox-strategies.Strategy
+     * @memberof workbox-precaching
+     */
+    class PrecacheStrategy extends Strategy {
+      /**
+       *
+       * @param {Object} [options]
+       * @param {string} [options.cacheName] Cache name to store and retrieve
+       * requests. Defaults to the cache names provided by
+       * {@link workbox-core.cacheNames}.
+       * @param {Array<Object>} [options.plugins] {@link https://developers.google.com/web/tools/workbox/guides/using-plugins|Plugins}
+       * to use in conjunction with this caching strategy.
+       * @param {Object} [options.fetchOptions] Values passed along to the
+       * {@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters|init}
+       * of all fetch() requests made by this strategy.
+       * @param {Object} [options.matchOptions] The
+       * {@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions|CacheQueryOptions}
+       * for any `cache.match()` or `cache.put()` calls made by this strategy.
+       * @param {boolean} [options.fallbackToNetwork=true] Whether to attempt to
+       * get the response from the network if there's a precache miss.
+       */
+      constructor(options = {}) {
+        options.cacheName = cacheNames.getPrecacheName(options.cacheName);
+        super(options);
+        this._fallbackToNetwork = options.fallbackToNetwork === false ? false : true;
+        // Redirected responses cannot be used to satisfy a navigation request, so
+        // any redirected response must be "copied" rather than cloned, so the new
+        // response doesn't contain the `redirected` flag. See:
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=669363&desc=2#c1
+        this.plugins.push(PrecacheStrategy.copyRedirectedCacheableResponsesPlugin);
+      }
+      /**
+       * @private
+       * @param {Request|string} request A request to run this strategy for.
+       * @param {workbox-strategies.StrategyHandler} handler The event that
+       *     triggered the request.
+       * @return {Promise<Response>}
+       */
+      async _handle(request, handler) {
+        const response = await handler.cacheMatch(request);
+        if (response) {
+          return response;
+        }
+        // If this is an `install` event for an entry that isn't already cached,
+        // then populate the cache.
+        if (handler.event && handler.event.type === 'install') {
+          return await this._handleInstall(request, handler);
+        }
+        // Getting here means something went wrong. An entry that should have been
+        // precached wasn't found in the cache.
+        return await this._handleFetch(request, handler);
+      }
+      async _handleFetch(request, handler) {
+        let response;
+        const params = handler.params || {};
+        // Fall back to the network if we're configured to do so.
+        if (this._fallbackToNetwork) {
+          {
+            logger.warn(`The precached response for ` + `${getFriendlyURL(request.url)} in ${this.cacheName} was not ` + `found. Falling back to the network.`);
+          }
+          const integrityInManifest = params.integrity;
+          const integrityInRequest = request.integrity;
+          const noIntegrityConflict = !integrityInRequest || integrityInRequest === integrityInManifest;
+          // Do not add integrity if the original request is no-cors
+          // See https://github.com/GoogleChrome/workbox/issues/3096
+          response = await handler.fetch(new Request(request, {
+            integrity: request.mode !== 'no-cors' ? integrityInRequest || integrityInManifest : undefined
+          }));
+          // It's only "safe" to repair the cache if we're using SRI to guarantee
+          // that the response matches the precache manifest's expectations,
+          // and there's either a) no integrity property in the incoming request
+          // or b) there is an integrity, and it matches the precache manifest.
+          // See https://github.com/GoogleChrome/workbox/issues/2858
+          // Also if the original request users no-cors we don't use integrity.
+          // See https://github.com/GoogleChrome/workbox/issues/3096
+          if (integrityInManifest && noIntegrityConflict && request.mode !== 'no-cors') {
+            this._useDefaultCacheabilityPluginIfNeeded();
+            const wasCached = await handler.cachePut(request, response.clone());
+            {
+              if (wasCached) {
+                logger.log(`A response for ${getFriendlyURL(request.url)} ` + `was used to "repair" the precache.`);
+              }
+            }
+          }
+        } else {
+          // This shouldn't normally happen, but there are edge cases:
+          // https://github.com/GoogleChrome/workbox/issues/1441
+          throw new WorkboxError('missing-precache-entry', {
+            cacheName: this.cacheName,
+            url: request.url
+          });
+        }
+        {
+          const cacheKey = params.cacheKey || (await handler.getCacheKey(request, 'read'));
+          // Workbox is going to handle the route.
+          // print the routing details to the console.
+          logger.groupCollapsed(`Precaching is responding to: ` + getFriendlyURL(request.url));
+          logger.log(`Serving the precached url: ${getFriendlyURL(cacheKey instanceof Request ? cacheKey.url : cacheKey)}`);
+          logger.groupCollapsed(`View request details here.`);
+          logger.log(request);
+          logger.groupEnd();
+          logger.groupCollapsed(`View response details here.`);
+          logger.log(response);
+          logger.groupEnd();
+          logger.groupEnd();
+        }
+        return response;
+      }
+      async _handleInstall(request, handler) {
+        this._useDefaultCacheabilityPluginIfNeeded();
+        const response = await handler.fetch(request);
+        // Make sure we defer cachePut() until after we know the response
+        // should be cached; see https://github.com/GoogleChrome/workbox/issues/2737
+        const wasCached = await handler.cachePut(request, response.clone());
+        if (!wasCached) {
+          // Throwing here will lead to the `install` handler failing, which
+          // we want to do if *any* of the responses aren't safe to cache.
+          throw new WorkboxError('bad-precaching-response', {
+            url: request.url,
+            status: response.status
+          });
+        }
+        return response;
+      }
+      /**
+       * This method is complex, as there a number of things to account for:
+       *
+       * The `plugins` array can be set at construction, and/or it might be added to
+       * to at any time before the strategy is used.
+       *
+       * At the time the strategy is used (i.e. during an `install` event), there
+       * needs to be at least one plugin that implements `cacheWillUpdate` in the
+       * array, other than `copyRedirectedCacheableResponsesPlugin`.
+       *
+       * - If this method is called and there are no suitable `cacheWillUpdate`
+       * plugins, we need to add `defaultPrecacheCacheabilityPlugin`.
+       *
+       * - If this method is called and there is exactly one `cacheWillUpdate`, then
+       * we don't have to do anything (this might be a previously added
+       * `defaultPrecacheCacheabilityPlugin`, or it might be a custom plugin).
+       *
+       * - If this method is called and there is more than one `cacheWillUpdate`,
+       * then we need to check if one is `defaultPrecacheCacheabilityPlugin`. If so,
+       * we need to remove it. (This situation is unlikely, but it could happen if
+       * the strategy is used multiple times, the first without a `cacheWillUpdate`,
+       * and then later on after manually adding a custom `cacheWillUpdate`.)
+       *
+       * See https://github.com/GoogleChrome/workbox/issues/2737 for more context.
+       *
+       * @private
+       */
+      _useDefaultCacheabilityPluginIfNeeded() {
+        let defaultPluginIndex = null;
+        let cacheWillUpdatePluginCount = 0;
+        for (const [index, plugin] of this.plugins.entries()) {
+          // Ignore the copy redirected plugin when determining what to do.
+          if (plugin === PrecacheStrategy.copyRedirectedCacheableResponsesPlugin) {
+            continue;
+          }
+          // Save the default plugin's index, in case it needs to be removed.
+          if (plugin === PrecacheStrategy.defaultPrecacheCacheabilityPlugin) {
+            defaultPluginIndex = index;
+          }
+          if (plugin.cacheWillUpdate) {
+            cacheWillUpdatePluginCount++;
+          }
+        }
+        if (cacheWillUpdatePluginCount === 0) {
+          this.plugins.push(PrecacheStrategy.defaultPrecacheCacheabilityPlugin);
+        } else if (cacheWillUpdatePluginCount > 1 && defaultPluginIndex !== null) {
+          // Only remove the default plugin; multiple custom plugins are allowed.
+          this.plugins.splice(defaultPluginIndex, 1);
+        }
+        // Nothing needs to be done if cacheWillUpdatePluginCount is 1
+      }
+    }
+    PrecacheStrategy.defaultPrecacheCacheabilityPlugin = {
+      async cacheWillUpdate({
+        response
+      }) {
+        if (!response || response.status >= 400) {
+          return null;
+        }
+        return response;
+      }
+    };
+    PrecacheStrategy.copyRedirectedCacheableResponsesPlugin = {
+      async cacheWillUpdate({
+        response
+      }) {
+        return response.redirected ? await copyResponse(response) : response;
+      }
+    };
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Performs efficient precaching of assets.
+     *
+     * @memberof workbox-precaching
+     */
+    class PrecacheController {
+      /**
+       * Create a new PrecacheController.
+       *
+       * @param {Object} [options]
+       * @param {string} [options.cacheName] The cache to use for precaching.
+       * @param {string} [options.plugins] Plugins to use when precaching as well
+       * as responding to fetch events for precached assets.
+       * @param {boolean} [options.fallbackToNetwork=true] Whether to attempt to
+       * get the response from the network if there's a precache miss.
+       */
+      constructor({
+        cacheName,
+        plugins = [],
+        fallbackToNetwork = true
+      } = {}) {
+        this._urlsToCacheKeys = new Map();
+        this._urlsToCacheModes = new Map();
+        this._cacheKeysToIntegrities = new Map();
+        this._strategy = new PrecacheStrategy({
+          cacheName: cacheNames.getPrecacheName(cacheName),
+          plugins: [...plugins, new PrecacheCacheKeyPlugin({
+            precacheController: this
+          })],
+          fallbackToNetwork
+        });
+        // Bind the install and activate methods to the instance.
+        this.install = this.install.bind(this);
+        this.activate = this.activate.bind(this);
+      }
+      /**
+       * @type {workbox-precaching.PrecacheStrategy} The strategy created by this controller and
+       * used to cache assets and respond to fetch events.
+       */
+      get strategy() {
+        return this._strategy;
+      }
+      /**
+       * Adds items to the precache list, removing any duplicates and
+       * stores the files in the
+       * {@link workbox-core.cacheNames|"precache cache"} when the service
+       * worker installs.
+       *
+       * This method can be called multiple times.
+       *
+       * @param {Array<Object|string>} [entries=[]] Array of entries to precache.
+       */
+      precache(entries) {
+        this.addToCacheList(entries);
+        if (!this._installAndActiveListenersAdded) {
+          self.addEventListener('install', this.install);
+          self.addEventListener('activate', this.activate);
+          this._installAndActiveListenersAdded = true;
+        }
+      }
+      /**
+       * This method will add items to the precache list, removing duplicates
+       * and ensuring the information is valid.
+       *
+       * @param {Array<workbox-precaching.PrecacheController.PrecacheEntry|string>} entries
+       *     Array of entries to precache.
+       */
+      addToCacheList(entries) {
+        {
+          finalAssertExports.isArray(entries, {
+            moduleName: 'workbox-precaching',
+            className: 'PrecacheController',
+            funcName: 'addToCacheList',
+            paramName: 'entries'
+          });
+        }
+        const urlsToWarnAbout = [];
+        for (const entry of entries) {
+          // See https://github.com/GoogleChrome/workbox/issues/2259
+          if (typeof entry === 'string') {
+            urlsToWarnAbout.push(entry);
+          } else if (entry && entry.revision === undefined) {
+            urlsToWarnAbout.push(entry.url);
+          }
+          const {
+            cacheKey,
+            url
+          } = createCacheKey(entry);
+          const cacheMode = typeof entry !== 'string' && entry.revision ? 'reload' : 'default';
+          if (this._urlsToCacheKeys.has(url) && this._urlsToCacheKeys.get(url) !== cacheKey) {
+            throw new WorkboxError('add-to-cache-list-conflicting-entries', {
+              firstEntry: this._urlsToCacheKeys.get(url),
+              secondEntry: cacheKey
+            });
+          }
+          if (typeof entry !== 'string' && entry.integrity) {
+            if (this._cacheKeysToIntegrities.has(cacheKey) && this._cacheKeysToIntegrities.get(cacheKey) !== entry.integrity) {
+              throw new WorkboxError('add-to-cache-list-conflicting-integrities', {
+                url
+              });
+            }
+            this._cacheKeysToIntegrities.set(cacheKey, entry.integrity);
+          }
+          this._urlsToCacheKeys.set(url, cacheKey);
+          this._urlsToCacheModes.set(url, cacheMode);
+          if (urlsToWarnAbout.length > 0) {
+            const warningMessage = `Workbox is precaching URLs without revision ` + `info: ${urlsToWarnAbout.join(', ')}\nThis is generally NOT safe. ` + `Learn more at https://bit.ly/wb-precache`;
+            {
+              logger.warn(warningMessage);
+            }
+          }
+        }
+      }
+      /**
+       * Precaches new and updated assets. Call this method from the service worker
+       * install event.
+       *
+       * Note: this method calls `event.waitUntil()` for you, so you do not need
+       * to call it yourself in your event handlers.
+       *
+       * @param {ExtendableEvent} event
+       * @return {Promise<workbox-precaching.InstallResult>}
+       */
+      install(event) {
+        // waitUntil returns Promise<any>
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return waitUntil(event, async () => {
+          const installReportPlugin = new PrecacheInstallReportPlugin();
+          this.strategy.plugins.push(installReportPlugin);
+          // Cache entries one at a time.
+          // See https://github.com/GoogleChrome/workbox/issues/2528
+          for (const [url, cacheKey] of this._urlsToCacheKeys) {
+            const integrity = this._cacheKeysToIntegrities.get(cacheKey);
+            const cacheMode = this._urlsToCacheModes.get(url);
+            const request = new Request(url, {
+              integrity,
+              cache: cacheMode,
+              credentials: 'same-origin'
+            });
+            await Promise.all(this.strategy.handleAll({
+              params: {
+                cacheKey
+              },
+              request,
+              event
+            }));
+          }
+          const {
+            updatedURLs,
+            notUpdatedURLs
+          } = installReportPlugin;
+          {
+            printInstallDetails(updatedURLs, notUpdatedURLs);
+          }
+          return {
+            updatedURLs,
+            notUpdatedURLs
+          };
+        });
+      }
+      /**
+       * Deletes assets that are no longer present in the current precache manifest.
+       * Call this method from the service worker activate event.
+       *
+       * Note: this method calls `event.waitUntil()` for you, so you do not need
+       * to call it yourself in your event handlers.
+       *
+       * @param {ExtendableEvent} event
+       * @return {Promise<workbox-precaching.CleanupResult>}
+       */
+      activate(event) {
+        // waitUntil returns Promise<any>
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+        return waitUntil(event, async () => {
+          const cache = await self.caches.open(this.strategy.cacheName);
+          const currentlyCachedRequests = await cache.keys();
+          const expectedCacheKeys = new Set(this._urlsToCacheKeys.values());
+          const deletedURLs = [];
+          for (const request of currentlyCachedRequests) {
+            if (!expectedCacheKeys.has(request.url)) {
+              await cache.delete(request);
+              deletedURLs.push(request.url);
+            }
+          }
+          {
+            printCleanupDetails(deletedURLs);
+          }
+          return {
+            deletedURLs
+          };
+        });
+      }
+      /**
+       * Returns a mapping of a precached URL to the corresponding cache key, taking
+       * into account the revision information for the URL.
+       *
+       * @return {Map<string, string>} A URL to cache key mapping.
+       */
+      getURLsToCacheKeys() {
+        return this._urlsToCacheKeys;
+      }
+      /**
+       * Returns a list of all the URLs that have been precached by the current
+       * service worker.
+       *
+       * @return {Array<string>} The precached URLs.
+       */
+      getCachedURLs() {
+        return [...this._urlsToCacheKeys.keys()];
+      }
+      /**
+       * Returns the cache key used for storing a given URL. If that URL is
+       * unversioned, like `/index.html', then the cache key will be the original
+       * URL with a search parameter appended to it.
+       *
+       * @param {string} url A URL whose cache key you want to look up.
+       * @return {string} The versioned URL that corresponds to a cache key
+       * for the original URL, or undefined if that URL isn't precached.
+       */
+      getCacheKeyForURL(url) {
+        const urlObject = new URL(url, location.href);
+        return this._urlsToCacheKeys.get(urlObject.href);
+      }
+      /**
+       * @param {string} url A cache key whose SRI you want to look up.
+       * @return {string} The subresource integrity associated with the cache key,
+       * or undefined if it's not set.
+       */
+      getIntegrityForCacheKey(cacheKey) {
+        return this._cacheKeysToIntegrities.get(cacheKey);
+      }
+      /**
+       * This acts as a drop-in replacement for
+       * [`cache.match()`](https://developer.mozilla.org/en-US/docs/Web/API/Cache/match)
+       * with the following differences:
+       *
+       * - It knows what the name of the precache is, and only checks in that cache.
+       * - It allows you to pass in an "original" URL without versioning parameters,
+       * and it will automatically look up the correct cache key for the currently
+       * active revision of that URL.
+       *
+       * E.g., `matchPrecache('index.html')` will find the correct precached
+       * response for the currently active service worker, even if the actual cache
+       * key is `'/index.html?__WB_REVISION__=1234abcd'`.
+       *
+       * @param {string|Request} request The key (without revisioning parameters)
+       * to look up in the precache.
+       * @return {Promise<Response|undefined>}
+       */
+      async matchPrecache(request) {
+        const url = request instanceof Request ? request.url : request;
+        const cacheKey = this.getCacheKeyForURL(url);
+        if (cacheKey) {
+          const cache = await self.caches.open(this.strategy.cacheName);
+          return cache.match(cacheKey);
+        }
+        return undefined;
+      }
+      /**
+       * Returns a function that looks up `url` in the precache (taking into
+       * account revision information), and returns the corresponding `Response`.
+       *
+       * @param {string} url The precached URL which will be used to lookup the
+       * `Response`.
+       * @return {workbox-routing~handlerCallback}
+       */
+      createHandlerBoundToURL(url) {
+        const cacheKey = this.getCacheKeyForURL(url);
+        if (!cacheKey) {
+          throw new WorkboxError('non-precached-url', {
+            url
+          });
+        }
+        return options => {
+          options.request = new Request(url);
+          options.params = Object.assign({
+            cacheKey
+          }, options.params);
+          return this.strategy.handle(options);
+        };
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    let precacheController;
+    /**
+     * @return {PrecacheController}
+     * @private
+     */
+    const getOrCreatePrecacheController = () => {
+      if (!precacheController) {
+        precacheController = new PrecacheController();
+      }
+      return precacheController;
+    };
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Removes any URL search parameters that should be ignored.
+     *
+     * @param {URL} urlObject The original URL.
+     * @param {Array<RegExp>} ignoreURLParametersMatching RegExps to test against
+     * each search parameter name. Matches mean that the search parameter should be
+     * ignored.
+     * @return {URL} The URL with any ignored search parameters removed.
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function removeIgnoredSearchParams(urlObject, ignoreURLParametersMatching = []) {
+      // Convert the iterable into an array at the start of the loop to make sure
+      // deletion doesn't mess up iteration.
+      for (const paramName of [...urlObject.searchParams.keys()]) {
+        if (ignoreURLParametersMatching.some(regExp => regExp.test(paramName))) {
+          urlObject.searchParams.delete(paramName);
+        }
+      }
+      return urlObject;
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Generator function that yields possible variations on the original URL to
+     * check, one at a time.
+     *
+     * @param {string} url
+     * @param {Object} options
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    function* generateURLVariations(url, {
+      ignoreURLParametersMatching = [/^utm_/, /^fbclid$/],
+      directoryIndex = 'index.html',
+      cleanURLs = true,
+      urlManipulation
+    } = {}) {
+      const urlObject = new URL(url, location.href);
+      urlObject.hash = '';
+      yield urlObject.href;
+      const urlWithoutIgnoredParams = removeIgnoredSearchParams(urlObject, ignoreURLParametersMatching);
+      yield urlWithoutIgnoredParams.href;
+      if (directoryIndex && urlWithoutIgnoredParams.pathname.endsWith('/')) {
+        const directoryURL = new URL(urlWithoutIgnoredParams.href);
+        directoryURL.pathname += directoryIndex;
+        yield directoryURL.href;
+      }
+      if (cleanURLs) {
+        const cleanURL = new URL(urlWithoutIgnoredParams.href);
+        cleanURL.pathname += '.html';
+        yield cleanURL.href;
+      }
+      if (urlManipulation) {
+        const additionalURLs = urlManipulation({
+          url: urlObject
+        });
+        for (const urlToAttempt of additionalURLs) {
+          yield urlToAttempt.href;
+        }
+      }
+    }
+
+    /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * A subclass of {@link workbox-routing.Route} that takes a
+     * {@link workbox-precaching.PrecacheController}
+     * instance and uses it to match incoming requests and handle fetching
+     * responses from the precache.
+     *
+     * @memberof workbox-precaching
+     * @extends workbox-routing.Route
+     */
+    class PrecacheRoute extends Route {
+      /**
+       * @param {PrecacheController} precacheController A `PrecacheController`
+       * instance used to both match requests and respond to fetch events.
+       * @param {Object} [options] Options to control how requests are matched
+       * against the list of precached URLs.
+       * @param {string} [options.directoryIndex=index.html] The `directoryIndex` will
+       * check cache entries for a URLs ending with '/' to see if there is a hit when
+       * appending the `directoryIndex` value.
+       * @param {Array<RegExp>} [options.ignoreURLParametersMatching=[/^utm_/, /^fbclid$/]] An
+       * array of regex's to remove search params when looking for a cache match.
+       * @param {boolean} [options.cleanURLs=true] The `cleanURLs` option will
+       * check the cache for the URL with a `.html` added to the end of the end.
+       * @param {workbox-precaching~urlManipulation} [options.urlManipulation]
+       * This is a function that should take a URL and return an array of
+       * alternative URLs that should be checked for precache matches.
+       */
+      constructor(precacheController, options) {
+        const match = ({
+          request
+        }) => {
+          const urlsToCacheKeys = precacheController.getURLsToCacheKeys();
+          for (const possibleURL of generateURLVariations(request.url, options)) {
+            const cacheKey = urlsToCacheKeys.get(possibleURL);
+            if (cacheKey) {
+              const integrity = precacheController.getIntegrityForCacheKey(cacheKey);
+              return {
+                cacheKey,
+                integrity
+              };
+            }
+          }
+          {
+            logger.debug(`Precaching did not find a match for ` + getFriendlyURL(request.url));
+          }
+          return;
+        };
+        super(match, precacheController.strategy);
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Add a `fetch` listener to the service worker that will
+     * respond to
+     * [network requests]{@link https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests}
+     * with precached assets.
+     *
+     * Requests for assets that aren't precached, the `FetchEvent` will not be
+     * responded to, allowing the event to fall through to other `fetch` event
+     * listeners.
+     *
+     * @param {Object} [options] See the {@link workbox-precaching.PrecacheRoute}
+     * options.
+     *
+     * @memberof workbox-precaching
+     */
+    function addRoute(options) {
+      const precacheController = getOrCreatePrecacheController();
+      const precacheRoute = new PrecacheRoute(precacheController, options);
+      registerRoute(precacheRoute);
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Adds items to the precache list, removing any duplicates and
+     * stores the files in the
+     * {@link workbox-core.cacheNames|"precache cache"} when the service
+     * worker installs.
+     *
+     * This method can be called multiple times.
+     *
+     * Please note: This method **will not** serve any of the cached files for you.
+     * It only precaches files. To respond to a network request you call
+     * {@link workbox-precaching.addRoute}.
+     *
+     * If you have a single array of files to precache, you can just call
+     * {@link workbox-precaching.precacheAndRoute}.
+     *
+     * @param {Array<Object|string>} [entries=[]] Array of entries to precache.
+     *
+     * @memberof workbox-precaching
+     */
+    function precache(entries) {
+      const precacheController = getOrCreatePrecacheController();
+      precacheController.precache(entries);
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * This method will add entries to the precache list and add a route to
+     * respond to fetch events.
+     *
+     * This is a convenience method that will call
+     * {@link workbox-precaching.precache} and
+     * {@link workbox-precaching.addRoute} in a single call.
+     *
+     * @param {Array<Object|string>} entries Array of entries to precache.
+     * @param {Object} [options] See the
+     * {@link workbox-precaching.PrecacheRoute} options.
+     *
+     * @memberof workbox-precaching
+     */
+    function precacheAndRoute(entries, options) {
+      precache(entries);
+      addRoute(options);
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    const SUBSTRING_TO_FIND = '-precache-';
+    /**
+     * Cleans up incompatible precaches that were created by older versions of
+     * Workbox, by a service worker registered under the current scope.
+     *
+     * This is meant to be called as part of the `activate` event.
+     *
+     * This should be safe to use as long as you don't include `substringToFind`
+     * (defaulting to `-precache-`) in your non-precache cache names.
+     *
+     * @param {string} currentPrecacheName The cache name currently in use for
+     * precaching. This cache won't be deleted.
+     * @param {string} [substringToFind='-precache-'] Cache names which include this
+     * substring will be deleted (excluding `currentPrecacheName`).
+     * @return {Array<string>} A list of all the cache names that were deleted.
+     *
+     * @private
+     * @memberof workbox-precaching
+     */
+    const deleteOutdatedCaches = async (currentPrecacheName, substringToFind = SUBSTRING_TO_FIND) => {
+      const cacheNames = await self.caches.keys();
+      const cacheNamesToDelete = cacheNames.filter(cacheName => {
+        return cacheName.includes(substringToFind) && cacheName.includes(self.registration.scope) && cacheName !== currentPrecacheName;
+      });
+      await Promise.all(cacheNamesToDelete.map(cacheName => self.caches.delete(cacheName)));
+      return cacheNamesToDelete;
+    };
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Adds an `activate` event listener which will clean up incompatible
+     * precaches that were created by older versions of Workbox.
+     *
+     * @memberof workbox-precaching
+     */
+    function cleanupOutdatedCaches() {
+      // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+      self.addEventListener('activate', event => {
+        const cacheName = cacheNames.getPrecacheName();
+        event.waitUntil(deleteOutdatedCaches(cacheName).then(cachesDeleted => {
+          {
+            if (cachesDeleted.length > 0) {
+              logger.log(`The following out-of-date precaches were cleaned up ` + `automatically:`, cachesDeleted);
+            }
+          }
+        }));
+      });
+    }
+
+    /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * NavigationRoute makes it easy to create a
+     * {@link workbox-routing.Route} that matches for browser
+     * [navigation requests]{@link https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests}.
+     *
+     * It will only match incoming Requests whose
+     * {@link https://fetch.spec.whatwg.org/#concept-request-mode|mode}
+     * is set to `navigate`.
+     *
+     * You can optionally only apply this route to a subset of navigation requests
+     * by using one or both of the `denylist` and `allowlist` parameters.
+     *
+     * @memberof workbox-routing
+     * @extends workbox-routing.Route
+     */
+    class NavigationRoute extends Route {
+      /**
+       * If both `denylist` and `allowlist` are provided, the `denylist` will
+       * take precedence and the request will not match this route.
+       *
+       * The regular expressions in `allowlist` and `denylist`
+       * are matched against the concatenated
+       * [`pathname`]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname}
+       * and [`search`]{@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search}
+       * portions of the requested URL.
+       *
+       * *Note*: These RegExps may be evaluated against every destination URL during
+       * a navigation. Avoid using
+       * [complex RegExps](https://github.com/GoogleChrome/workbox/issues/3077),
+       * or else your users may see delays when navigating your site.
+       *
+       * @param {workbox-routing~handlerCallback} handler A callback
+       * function that returns a Promise resulting in a Response.
+       * @param {Object} options
+       * @param {Array<RegExp>} [options.denylist] If any of these patterns match,
+       * the route will not handle the request (even if a allowlist RegExp matches).
+       * @param {Array<RegExp>} [options.allowlist=[/./]] If any of these patterns
+       * match the URL's pathname and search parameter, the route will handle the
+       * request (assuming the denylist doesn't match).
+       */
+      constructor(handler, {
+        allowlist = [/./],
+        denylist = []
+      } = {}) {
+        {
+          finalAssertExports.isArrayOfClass(allowlist, RegExp, {
+            moduleName: 'workbox-routing',
+            className: 'NavigationRoute',
+            funcName: 'constructor',
+            paramName: 'options.allowlist'
+          });
+          finalAssertExports.isArrayOfClass(denylist, RegExp, {
+            moduleName: 'workbox-routing',
+            className: 'NavigationRoute',
+            funcName: 'constructor',
+            paramName: 'options.denylist'
+          });
+        }
+        super(options => this._match(options), handler);
+        this._allowlist = allowlist;
+        this._denylist = denylist;
+      }
+      /**
+       * Routes match handler.
+       *
+       * @param {Object} options
+       * @param {URL} options.url
+       * @param {Request} options.request
+       * @return {boolean}
+       *
+       * @private
+       */
+      _match({
+        url,
+        request
+      }) {
+        if (request && request.mode !== 'navigate') {
+          return false;
+        }
+        const pathnameAndSearch = url.pathname + url.search;
+        for (const regExp of this._denylist) {
+          if (regExp.test(pathnameAndSearch)) {
+            {
+              logger.log(`The navigation route ${pathnameAndSearch} is not ` + `being used, since the URL matches this denylist pattern: ` + `${regExp.toString()}`);
+            }
+            return false;
+          }
+        }
+        if (this._allowlist.some(regExp => regExp.test(pathnameAndSearch))) {
+          {
+            logger.debug(`The navigation route ${pathnameAndSearch} ` + `is being used.`);
+          }
+          return true;
+        }
+        {
+          logger.log(`The navigation route ${pathnameAndSearch} is not ` + `being used, since the URL being navigated to doesn't ` + `match the allowlist.`);
+        }
+        return false;
+      }
+    }
+
+    /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+    /**
+     * Helper function that calls
+     * {@link PrecacheController#createHandlerBoundToURL} on the default
+     * {@link PrecacheController} instance.
+     *
+     * If you are creating your own {@link PrecacheController}, then call the
+     * {@link PrecacheController#createHandlerBoundToURL} on that instance,
+     * instead of using this function.
+     *
+     * @param {string} url The precached URL which will be used to lookup the
+     * `Response`.
+     * @param {boolean} [fallbackToNetwork=true] Whether to attempt to get the
+     * response from the network if there's a precache miss.
+     * @return {workbox-routing~handlerCallback}
+     *
+     * @memberof workbox-precaching
+     */
+    function createHandlerBoundToURL(url) {
+      const precacheController = getOrCreatePrecacheController();
+      return precacheController.createHandlerBoundToURL(url);
+    }
+
+    exports.NavigationRoute = NavigationRoute;
+    exports.cleanupOutdatedCaches = cleanupOutdatedCaches;
+    exports.clientsClaim = clientsClaim;
+    exports.createHandlerBoundToURL = createHandlerBoundToURL;
+    exports.precacheAndRoute = precacheAndRoute;
+    exports.registerRoute = registerRoute;
+
+}));

public/version.json

@@ -1 +1 @@
-{"version":1713776975640}
+{"version":1714377293595}

src/api/user.ts

@@ -77,3 +77,11 @@ export const api_musicalInstrumentList = (data: any) => {
     data
   });
 };
+
+/**
+ * @description: 上课记录详情
+ * @param params
+ */
+export const api_cousseScheduleDetail = (id: string) => {
+  return request.post('/edu-app/courseSchedule/detail/' + id);
+};

src/store/modules/catchData.ts

@@ -6,6 +6,7 @@ import {
   getCategories,
   api_musicalInstrumentList
 } from '@/api/user';
+import deepClone from '/src/helpers/deep-clone';
 
 export const useCatchStore = defineStore('catch-store', {
   state: () => ({
@@ -46,6 +47,31 @@ export const useCatchStore = defineStore('catch-store', {
         ...this.subjectList
       ];
     },
+    /**
+     * 获取所有启用的声部
+     */
+    getEnableSubjects(): any[] {
+      const temp: any[] = [];
+      this.subjectList.forEach((subject: any) => {
+        if (subject.enableFlag) {
+          const { instruments, ...r } = subject;
+
+          if (instruments && instruments.length > 0) {
+            const tempChild: any[] = [];
+            instruments?.forEach((instrument: any) => {
+              if (instrument.enableFlag) {
+                tempChild.push(instrument);
+              }
+            });
+
+            if (tempChild.length > 0)
+              temp.push({ ...r, instruments: tempChild });
+          }
+        }
+      });
+
+      return temp;
+    },
     getSubjectInstruments(): any[] {
       return [
         {
@@ -85,7 +111,7 @@ export const useCatchStore = defineStore('catch-store', {
           return Promise.resolve();
         }
         const { data } = await getSubjectList2({
-          enableFlag: true,
+          // enableFlag: true,
           delFlag: 0,
           page: 1,
           rows: 999
@@ -95,52 +121,92 @@ export const useCatchStore = defineStore('catch-store', {
 
         const tempSubjectInstruments: any = [];
         tempSubjectList.forEach((item: any) => {
-          item.value = item.id;
-          item.label = item.name;
           if (item.instruments && item.instruments.length > 0) {
+            item.value = item.id;
+            item.label = item.name;
             item.instruments.forEach((child: any) => {
               child.label = child.name;
               child.value = child.id;
             });
-          }
 
-          const tempSi = {
-            value: item.id,
-            label: item.name,
-            id: item.id,
-            name: item.name,
-            instruments: [] as any
-          };
-          if (item.instruments) {
-            if (item.instruments.length == 1) {
-              tempSi.value = item.instruments[0].id;
-              tempSi.label = item.instruments[0].name;
-              tempSi.id = item.id;
-              tempSi.name = item.name;
-            } else if (item.instruments.length > 1) {
-              item.instruments.forEach((child: any) => {
-                child.label = child.name;
-                child.value = child.id;
-                tempSi.instruments.push({
-                  label: child.name,
-                  value: child.id,
-                  id: child.id,
-                  name: child.name
+            const tempSi = {
+              value: item.id,
+              label: item.name,
+              id: item.id,
+              name: item.name,
+              instruments: [] as any
+            };
+            if (item.instruments) {
+              if (item.instruments.length == 1) {
+                tempSi.value = item.instruments[0].id;
+                tempSi.label = item.instruments[0].name;
+                tempSi.id = item.id;
+                tempSi.name = item.name;
+              } else if (item.instruments.length > 1) {
+                item.instruments.forEach((child: any) => {
+                  child.label = child.name;
+                  child.value = child.id;
+                  tempSi.instruments.push({
+                    label: child.name,
+                    value: child.id,
+                    id: child.id,
+                    name: child.name
+                  });
                 });
-              });
+              }
             }
+            tempSubjectInstruments.push(tempSi);
           }
-          tempSubjectInstruments.push(tempSi);
         });
 
-        this.setSubjects(tempSubjectList || []);
+        this.setSubjects(
+          tempSubjectList.filter(
+            (item: any) => item.instruments && item.instruments.length > 0
+          ) || 0
+        );
         this.setSubjectInstruemnts(tempSubjectInstruments || []);
+
         return Promise.resolve();
       } catch (e) {
         return Promise.reject(e);
       }
     },
     /**
+     * 获取所有启用的乐器并包含修改的声部
+     */
+    getEnableSingleAllSubjects(ids?: any) {
+      ids = ids || [];
+      const subjects: any = [];
+      this.getSubjectList.forEach((subject: any) => {
+        const temp = deepClone(subject);
+        if (Array.isArray(temp.instruments)) {
+          temp.instruments.forEach((item: any) => {
+            if (ids.includes(item.id)) {
+              item.enableFlag = true;
+              temp.enableFlag = true;
+            }
+          });
+        }
+        subjects.push(temp);
+      });
+      const temp: any[] = [];
+      subjects.forEach((subject: any) => {
+        if (subject.enableFlag) {
+          const { instruments, ...r } = subject;
+
+          const tempChild: any[] = [];
+          instruments?.forEach((instrument: any) => {
+            if (instrument.enableFlag) {
+              tempChild.push(instrument);
+            }
+          });
+
+          if (tempChild.length > 0) temp.push({ ...r, instruments: tempChild });
+        }
+      });
+      return temp;
+    },
+    /**
      * 判断是否有教材分类数据，如不存在则获取教材分类列表
      * @returns Promise
      */

src/store/modules/prepareLessons.ts

@@ -4,10 +4,12 @@ import { store } from '@/store';
 export const usePrepareStore = defineStore('prepare-lessons-store', {
   state: () => ({
     subjectId: null as any, // 基础声部
+    instrumentId: null as any, // 基础乐器
     baseCourseware: {} as any, // 基础教学课件
     selectKey: '', // 选的哪一节课
     lessonCoursewareId: '', // 哪个教材分类
     subjectList: [] as any, // 教材带的声部列表
+    instrumentList: [] as any, // 教材自带的乐器
     lessonCoursewareDetailId: '', // 哪个教材详情
     treeList: [] as any[], // 左边教学课件列表
     coursewareList: [] as any[], // 课件信息
@@ -26,6 +28,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     getSubjectId(): [string, number] {
       return this.subjectId;
     },
+    /** 获取乐器编号 */
+    getInstrumentId(): [string, number] {
+      return this.instrumentId;
+    },
     /** 获取基础教学课件 */
     getBaseCourseware(): any {
       return this.baseCourseware;
@@ -105,6 +111,65 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     getSubjectList(): any {
       return this.subjectList;
     },
+    /** 获取乐器列表 */
+    getInstrumentList(): any {
+      return this.instrumentList;
+    },
+    /** 获取乐器格式化列表 */
+    getFormatInstrumentList(): any {
+      const tempSubjectInstruments: any = [];
+      this.instrumentList.forEach((item: any) => {
+        item.value = item.id;
+        item.label = item.name;
+        if (item.instruments && item.instruments.length > 0) {
+          item.instruments.forEach((child: any) => {
+            child.label = child.name;
+            child.value = child.id;
+          });
+        }
+
+        const tempSi = {
+          value: item.id,
+          label: item.name,
+          id: item.id,
+          name: item.name,
+          instruments: [] as any
+        };
+        if (item.instruments) {
+          if (item.instruments.length == 1) {
+            tempSi.value = item.instruments[0].id;
+            tempSi.label = item.instruments[0].name;
+            tempSi.id = item.id;
+            tempSi.name = item.name;
+          } else if (item.instruments.length > 1) {
+            item.instruments.forEach((child: any) => {
+              child.label = child.name;
+              child.value = child.id;
+              tempSi.instruments.push({
+                label: child.name,
+                value: child.id,
+                id: child.id,
+                name: child.name
+              });
+            });
+          }
+        }
+        tempSubjectInstruments.push(tempSi);
+      });
+      return tempSubjectInstruments;
+    },
+    /** 获取所有乐器列表 */
+    getSingleInstrumentList(): any {
+      const temps: any = [];
+      this.instrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            temps.push(child);
+          });
+        }
+      });
+      return temps;
+    },
     /** 获取班级编号 */
     getClassGroupId(): string | number {
       return this.classGroupId;
@@ -115,6 +180,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     setSubjectId(subjectId: string | number) {
       this.subjectId = subjectId;
     },
+    /** 获取乐器编号 */
+    setInstrumentId(instrumentId: string | number) {
+      this.instrumentId = instrumentId;
+    },
     /** 设置基础教学课件 */
     setBaseCourseware(baseCourseware: any) {
       this.baseCourseware = baseCourseware;
@@ -175,6 +244,10 @@ export const usePrepareStore = defineStore('prepare-lessons-store', {
     setSubjectList(subjects: any): any {
       this.subjectList = subjects;
     },
+    /** 设置乐器列表 */
+    setInstrumentList(instruments: any): any {
+      this.instrumentList = instruments;
+    },
     /** 设置班级编号 */
     setClassGroupId(id: string | number): any {
       this.classGroupId = id;

src/styles/index.less

@@ -1,430 +1,442 @@
-* {
-  padding: 0;
-  margin: 0;
-  border: 0;
-  box-sizing: border-box;
-}
-
-
-#app {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #333;
-  min-height: 100vh;
-
-}
-
-body {
-  user-select: none;
-  background-color: #f1f5ff;
-  overflow: hidden;
-}
-
-body>.n-drawer-container-relative {
-  position: relative !important;
-}
-
-// 搜索框前面放大镜样式重置
-.icon-search-input {
-  display: inline-block;
-  width: max(16px, 14Px);
-  height: max(16px, 14Px);
-  background: url('../common/images/icon_search.png') no-repeat center;
-  background-size: contain;
-}
-
-.n-input:not(.n-input--disabled).n-input--focus {
-  .icon-search-input {
-    background: url('../common/images/icon_searchActive.png') no-repeat center;
-    background-size: contain;
-  }
-}
-
-// 初始化弹窗关闭的默认状态
-// .n-base-close:not(.n-base-close--disabled):focus::before {
-//   background-color: transparent;
-// }
-
-.n-base-select-menu .n-base-select-option {
-  font-size: max(15px, 12Px);
-}
-
-.n-popselect-menu {
-  --n-option-height: 38Px !important;
-}
-
-@font-face {
-  font-family: 'dotfont';
-  /* Project id  */
-  src: url('../common/text-security-disc.woff') format('woff');
-}
-
-.cr-ellipsis {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 12px;
-  background-color: #fff;
-}
-
-::-webkit-scrollbar-thumb {
-  display: block;
-  min-height: 12px;
-  min-width: 8px;
-  border-radius: 6px;
-  background-color: rgb(217, 217, 217);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  display: block;
-  min-height: 12px;
-  min-width: 8px;
-  border-radius: 6px;
-  background-color: rgb(159, 159, 159);
-}
-
-.searchBtn {
-  // width: 90px;
-  // height: 43px;
-  background: #198cfe;
-  border-radius: 8px;
-  // line-height: 41px;
-  font-weight: 600 !important;
-  // font-size: max(18px, 13Px);
-}
-
-.resetBtn {
-  // width: 90px;
-  border-radius: 8px;
-  font-weight: 600 !important;
-  // font-size: max(18px, 13Px);
-}
-
-.resetBtn,
-.searchBtn {
-  --n-padding: 0 28px !important;
-}
-
-// .n-data-table {
-//   border-radius: 10px 10px 0 0;
-//   overflow: hidden;
-// }
-
-// .n-data-table-thead {
-//   height: 54px;
-//   line-height: 54px;
-// }
-
-// .n-data-table-th {
-//   padding: 0 20px !important;
-//   background-color: #f7f7f8 !important;
-//   color: rgba(0, 0, 0, 0.88) !important;
-
-//   .n-data-table-th__title {
-//     font-weight: 600;
-//   }
-// }
-
-// .n-data-table-tr {
-//   .n-data-table-td {
-//     padding-left: 20px;
-
-//     color: #333333;
-//     font-size: 14px;
-
-//     .n-button__content {
-//       font-size: 14px;
-//       color: #1677ff;
-//     }
-//   }
-// }
-
-:global {
-  .n-form-item .n-form-item-label {
-    color: #777;
-  }
-
-  .n-button {
-    border-radius: 8px;
-  }
-
-
-}
-
-.n-data-table-th__title-wrapper {
-  &::after {
-    content: '';
-    width: 1px;
-    height: 22px;
-    background: #ebebeb;
-
-    &:nth-last-child(1) {
-      display: none;
-    }
-  }
-}
-
-.n-data-table-th--last {
-  .n-data-table-th__title-wrapper {
-    &::after {
-      content: '';
-      width: 0px;
-      height: 22px;
-      background: #ebebeb;
-    }
-  }
-}
-
-// 给弹窗设置标题的基础样式
-.modalTitle {
-  border-radius: 16px;
-
-  // overflow: hidden;
-
-  &.background {
-    .n-card-header {
-      background: #f5f6fa;
-      font-weight: 600 !important;
-      overflow: hidden;
-    }
-  }
-
-  .n-card-header {
-    border-radius: 16px 16px 0 0;
-    position: relative;
-    padding: 20px 18px;
-    text-align: center;
-    background: #fff;
-    font-size: 22px;
-    font-weight: 600;
-    color: #131415;
-    line-height: 30px;
-  }
-
-  .n-card-header__close {
-    position: absolute;
-    right: 18px;
-    z-index: 99;
-  }
-
-  .n-card__content {
-    padding: 0;
-  }
-}
-
-.favitor-enter-active,
-.favitor-leave-active {
-  // transition: all 0.5s cubic-bezier(0.18, 0.89, 0, 1.29);
-  transition: all .3s ease-in-out;
-}
-
-.favitor-enter-from,
-.favitor-leave-to {
-  transform: scale(1.4);
-  opacity: 0.1;
-}
-
-@font-face {
-  font-family: 'DINA';
-  src: url('../common/DIN_Alternate_Bold.ttf');
-}
-
-:root {
-  --product-color: #3044ca;
-}
-
-// .n-button--primary-type {
-//   color: #1677ff !important;
-// }
-::-webkit-input-placeholder {
-  /* WebKit browsers */
-
-  color: rgba(0, 0, 0, 0.4);
-}
-
-:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-
-  color: rgba(0, 0, 0, 0.4);
-}
-
-::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-
-  color: rgba(0, 0, 0, 0.4);
-}
-
-:-ms-input-placeholder {
-  /* Internet Explorer 10+ */
-
-  color: rgba(0, 0, 0, 0.4);
-}
-
-@keyframes TadaNum {
-  0% {
-    transform: rotate(0);
-    transform: rotate(0);
-  }
-
-  10%,
-  20% {
-    transform: rotate(-6deg);
-    transform: rotate(-6deg);
-  }
-
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: rotate(6deg);
-    transform: rotate(6deg);
-  }
-
-  40%,
-  60%,
-  80% {
-    transform: rotate(-6deg);
-    transform: rotate(-6deg);
-  }
-
-  100% {
-    transform: rotate(0);
-    transform: rotate(0);
-  }
-}
-
-/* 列表动画 start */
-.list-move,
-/* 对移动中的元素应用的过渡 */
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.5s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-// 拖动时
-.sortable-ghost {
-  opacity: 0.7;
-}
-
-.flip-list-move {
-  transition: transform 0.5s;
-}
-
-.no-move {
-  transition: transform 0s;
-}
-
-
-.n-data-table .n-data-table-th {
-
-  background: #F7F7F8;
-  color: rgba(113, 113, 114, 1) !important;
-  border: none;
-  min-height: 54px;
-  font-size: max(15px, 12Px);
-}
-
-.n-data-table.n-data-table--bordered .n-data-table-wrapper {
-  border: none;
-}
-
-.n-data-table-tr .n-data-table-td .n-button__content,
-.n-data-table .n-data-table-td {
-  font-weight: bold;
-  font-size: max(15px, 12Px);
-}
-
-.n-tooltip {
-  --n-padding: 6px 12px !important;
-  --n-border-radius: 6px !important;
-
-  .n-popover__content {
-    font-size: max(14px, 12Px);
-  }
-}
-
-
-.n-base-close:not(.n-base-close--disabled):active::before,
-.n-base-close:not(.n-base-close--disabled):focus::before {
-  background-color: transparent !important;
-}
-
-
-.body .n-modal-mask {
-  background-color: transparent !important;
-}
-
-// 设置图片弹窗工具预览
-.n-image-preview-toolbar .n-base-icon {
-  margin: 0 8px;
-  padding: 0;
-}
-
-.n-breadcrumb .n-breadcrumb-item {
-  font-size: max(16px, 12Px) !important;
-}
-
-.n-base-selection,
-.n-input,
-.n-input-group-label {
-  --n-height: max(40px, 36Px) !important;
-  --n-border-radius: 8px !important;
-  font-size: max(15px, 13Px) !important;
-}
-
-.n-button {
-  font-size: max(18px, 13Px);
-  --n-height: max(40px, 36Px) !important;
-}
-
-.n-base-selection-input,
-.n-input .n-input__input-el,
-.n-input .n-input__textarea-el {
-  font-size: max(15px, 13Px) !important;
-}
-
-.n-base-selection .n-base-selection-label .n-base-selection-label__render-label {
-  font-size: max(15px, 13Px) !important;
-}
-
-.n-select-menu .n-button {
-  --n-height: 28px !important;
-}
-
-.n-form-item-label__text {
-  font-size: max(15px, 13Px);
-}
-
-.n-date-panel {
-
-  .n-date-panel-actions__suffix,
-  .n-time-picker-panel {
-    .n-button {
-      font-size: 12Px;
-      height: 32px !important;
-      line-height: 32px;
-      padding: 0 13px !important;
-      border-radius: 6px;
-    }
-  }
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-sizing: border-box;
+}
+
+
+#app {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #333;
+  min-height: 100vh;
+
+}
+
+body {
+  user-select: none;
+  background-color: #f1f5ff;
+  overflow: hidden;
+}
+
+body>.n-drawer-container-relative {
+  position: relative !important;
+}
+
+// 搜索框前面放大镜样式重置
+.icon-search-input {
+  display: inline-block;
+  width: max(16px, 14Px);
+  height: max(16px, 14Px);
+  background: url('../common/images/icon_search.png') no-repeat center;
+  background-size: contain;
+}
+
+.n-input:not(.n-input--disabled).n-input--focus {
+  .icon-search-input {
+    background: url('../common/images/icon_searchActive.png') no-repeat center;
+    background-size: contain;
+  }
+}
+
+// 初始化弹窗关闭的默认状态
+// .n-base-close:not(.n-base-close--disabled):focus::before {
+//   background-color: transparent;
+// }
+
+.n-base-select-menu .n-base-select-option {
+  font-size: max(15px, 12Px);
+}
+
+.n-popselect-menu {
+  --n-option-height: 38Px !important;
+}
+
+@font-face {
+  font-family: 'dotfont';
+  /* Project id  */
+  src: url('../common/text-security-disc.woff') format('woff');
+}
+
+.cr-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 12px;
+  background-color: #fff;
+}
+
+::-webkit-scrollbar-thumb {
+  display: block;
+  min-height: 12px;
+  min-width: 8px;
+  border-radius: 6px;
+  background-color: rgb(217, 217, 217);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  display: block;
+  min-height: 12px;
+  min-width: 8px;
+  border-radius: 6px;
+  background-color: rgb(159, 159, 159);
+}
+
+.searchBtn {
+  // width: 90px;
+  // height: 43px;
+  background: #198cfe;
+  border-radius: 8px;
+  // line-height: 41px;
+  font-weight: 600 !important;
+  // font-size: max(18px, 13Px);
+}
+
+.resetBtn {
+  // width: 90px;
+  border-radius: 8px;
+  font-weight: 600 !important;
+  // font-size: max(18px, 13Px);
+}
+
+.resetBtn,
+.searchBtn {
+  --n-padding: 0 28px !important;
+}
+
+// .n-data-table {
+//   border-radius: 10px 10px 0 0;
+//   overflow: hidden;
+// }
+
+// .n-data-table-thead {
+//   height: 54px;
+//   line-height: 54px;
+// }
+
+// .n-data-table-th {
+//   padding: 0 20px !important;
+//   background-color: #f7f7f8 !important;
+//   color: rgba(0, 0, 0, 0.88) !important;
+
+//   .n-data-table-th__title {
+//     font-weight: 600;
+//   }
+// }
+
+// .n-data-table-tr {
+//   .n-data-table-td {
+//     padding-left: 20px;
+
+//     color: #333333;
+//     font-size: 14px;
+
+//     .n-button__content {
+//       font-size: 14px;
+//       color: #1677ff;
+//     }
+//   }
+// }
+
+:global {
+  .n-form-item .n-form-item-label {
+    color: #777;
+  }
+
+  .n-button {
+    border-radius: 8px;
+  }
+
+
+}
+
+.n-cascader-submenu-wrapper {
+
+  .n-scrollbar>.n-scrollbar-rail.n-scrollbar-rail--vertical,
+  .n-scrollbar+.n-scrollbar-rail.n-scrollbar-rail--vertical {
+    right: 2Px;
+  }
+
+  .n-cascader-option__suffix {
+    padding-right: 12Px !important;
+  }
+}
+
+.n-data-table-th__title-wrapper {
+  &::after {
+    content: '';
+    width: 1px;
+    height: 22px;
+    background: #ebebeb;
+
+    &:nth-last-child(1) {
+      display: none;
+    }
+  }
+}
+
+.n-data-table-th--last {
+  .n-data-table-th__title-wrapper {
+    &::after {
+      content: '';
+      width: 0px;
+      height: 22px;
+      background: #ebebeb;
+    }
+  }
+}
+
+// 给弹窗设置标题的基础样式
+.modalTitle {
+  border-radius: 16px;
+
+  // overflow: hidden;
+
+  &.background {
+    .n-card-header {
+      background: #f5f6fa;
+      font-weight: 600 !important;
+      overflow: hidden;
+    }
+  }
+
+  .n-card-header {
+    border-radius: 16px 16px 0 0;
+    position: relative;
+    padding: 20px 18px;
+    text-align: center;
+    background: #fff;
+    font-size: 22px;
+    font-weight: 600;
+    color: #131415;
+    line-height: 30px;
+  }
+
+  .n-card-header__close {
+    position: absolute;
+    right: 18px;
+    z-index: 99;
+  }
+
+  .n-card__content {
+    padding: 0;
+  }
+}
+
+.favitor-enter-active,
+.favitor-leave-active {
+  // transition: all 0.5s cubic-bezier(0.18, 0.89, 0, 1.29);
+  transition: all .3s ease-in-out;
+}
+
+.favitor-enter-from,
+.favitor-leave-to {
+  transform: scale(1.4);
+  opacity: 0.1;
+}
+
+@font-face {
+  font-family: 'DINA';
+  src: url('../common/DIN_Alternate_Bold.ttf');
+}
+
+:root {
+  --product-color: #3044ca;
+}
+
+// .n-button--primary-type {
+//   color: #1677ff !important;
+// }
+::-webkit-input-placeholder {
+  /* WebKit browsers */
+
+  color: rgba(0, 0, 0, 0.4);
+}
+
+:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+
+  color: rgba(0, 0, 0, 0.4);
+}
+
+::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+
+  color: rgba(0, 0, 0, 0.4);
+}
+
+:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+
+  color: rgba(0, 0, 0, 0.4);
+}
+
+@keyframes TadaNum {
+  0% {
+    transform: rotate(0);
+    transform: rotate(0);
+  }
+
+  10%,
+  20% {
+    transform: rotate(-6deg);
+    transform: rotate(-6deg);
+  }
+
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: rotate(6deg);
+    transform: rotate(6deg);
+  }
+
+  40%,
+  60%,
+  80% {
+    transform: rotate(-6deg);
+    transform: rotate(-6deg);
+  }
+
+  100% {
+    transform: rotate(0);
+    transform: rotate(0);
+  }
+}
+
+/* 列表动画 start */
+.list-move,
+/* 对移动中的元素应用的过渡 */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// 拖动时
+.sortable-ghost {
+  opacity: 0.7;
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.no-move {
+  transition: transform 0s;
+}
+
+
+.n-data-table .n-data-table-th {
+
+  background: #F7F7F8;
+  color: rgba(113, 113, 114, 1) !important;
+  border: none;
+  min-height: 54px;
+  font-size: max(15px, 12Px);
+}
+
+.n-data-table.n-data-table--bordered .n-data-table-wrapper {
+  border: none;
+}
+
+.n-data-table-tr .n-data-table-td .n-button__content,
+.n-data-table .n-data-table-td {
+  font-weight: bold;
+  font-size: max(15px, 12Px);
+}
+
+.n-tooltip {
+  --n-padding: 6px 12px !important;
+  --n-border-radius: 6px !important;
+
+  .n-popover__content {
+    font-size: max(14px, 12Px);
+  }
+}
+
+
+.n-base-close:not(.n-base-close--disabled):active::before,
+.n-base-close:not(.n-base-close--disabled):focus::before {
+  background-color: transparent !important;
+}
+
+
+.body .n-modal-mask {
+  background-color: transparent !important;
+}
+
+// 设置图片弹窗工具预览
+.n-image-preview-toolbar .n-base-icon {
+  margin: 0 8px;
+  padding: 0;
+}
+
+.n-breadcrumb .n-breadcrumb-item {
+  font-size: max(16px, 12Px) !important;
+}
+
+.n-base-selection,
+.n-input,
+.n-input-group-label {
+  --n-height: max(40px, 36Px) !important;
+  --n-border-radius: 8px !important;
+  font-size: max(15px, 13Px) !important;
+}
+
+.n-button {
+  font-size: max(18px, 13Px);
+  --n-height: max(40px, 36Px) !important;
+}
+
+.n-base-selection-input,
+.n-input .n-input__input-el,
+.n-input .n-input__textarea-el {
+  font-size: max(15px, 13Px) !important;
+}
+
+.n-base-selection .n-base-selection-label .n-base-selection-label__render-label {
+  font-size: max(15px, 13Px) !important;
+}
+
+.n-select-menu .n-button {
+  --n-height: 28px !important;
+}
+
+.n-form-item-label__text {
+  font-size: max(15px, 13Px);
+}
+
+.n-date-panel {
+
+  .n-date-panel-actions__suffix,
+  .n-time-picker-panel {
+    .n-button {
+      font-size: 12Px;
+      height: 32px !important;
+      line-height: 32px;
+      padding: 0 13px !important;
+      border-radius: 6px;
+    }
+  }
 }

src/utils/request.ts

@@ -99,6 +99,7 @@ request.interceptors.response.use(
       throw new Error(msg);
     }
     const data = await res.clone().json();
+
     if (
       data.code === 401 ||
       data.code === 4001 ||

src/views/attend-class/index.tsx

@@ -90,6 +90,7 @@ import ResourceMain from '../prepare-lessons/components/resource-main';
 import { useResizeObserver } from '@vueuse/core';
 import { storage } from '/src/utils/storage';
 import { ACCESS_TOKEN_ADMIN } from '/src/store/mutation-types';
+import { api_cousseScheduleDetail } from '/src/api/user';
 
 export type ToolType = 'init' | 'pen' | 'whiteboard' | 'call';
 export type ToolItem = {
@@ -109,7 +110,7 @@ export default defineComponent({
       type: String,
       default: ''
     },
-    subjectId: {
+    instrumentId: {
       type: [String, Number],
       default: ''
     },
@@ -171,7 +172,7 @@ export default defineComponent({
     const data = reactive({
       type: 'class' as '' | 'preview' | 'class', // 预览类型
       courseId: '' as any, // 课件编号
-      subjectId: '' as any, // 声部编号
+      instrumentId: '' as any, // 声部编号
       lessonCourseId: '' as any, // 教材编号
       lessonCoursewareDetailId: '' as any, // 章节
       lessonCoursewareSubjectList: [] as any, // 教材上的声部
@@ -333,20 +334,26 @@ export default defineComponent({
       }
     };
 
-    onMounted(() => {
+    onMounted(async () => {
       // initMoveable();
       const query = route.query;
       // console.log(query, props.preStudentNum, '学生人数');
       // 先取参数，
       data.type = props.type || (query.type as any);
       data.courseId = props.courseId || query.courseId;
-      data.subjectId = props.subjectId || query.subjectId;
+      data.instrumentId = props.instrumentId || query.instrumentId;
       data.detailId = props.detailId || query.detailId;
       data.lessonCourseId = props.lessonCourseId || query.lessonCourseId;
       data.classGroupId = props.classGroupId || query.classGroupId;
       data.classId = props.classId || query.classId;
       data.preStudentNum = props.preStudentNum || query.preStudentNum;
       window.addEventListener('message', iframeHandle);
+
+      if (data.classId) {
+        const res = await api_cousseScheduleDetail(data.classId);
+        data.courseId = res.data.useChapterLessonCoursewareId;
+      }
+
       getDetail();
       getLessonCoursewareDetail();
       if (data.type === 'preview') {
@@ -422,14 +429,15 @@ export default defineComponent({
       try {
         const res = await lessonCoursewareDetail({
           id: data.lessonCourseId,
-          subjectId: data.subjectId
+          instrumentId: data.instrumentId
         });
 
         popupData.chapterDetails = res.data.lessonList || [];
 
         const ids = formatParentId(data.detailId, popupData.chapterDetails);
         data.lessonCoursewareDetailId = ids[0];
-        data.lessonCoursewareSubjectList = res.data.subjectList || [];
+        console.log(res.data, 'data');
+        data.lessonCoursewareSubjectList = res.data.instrumentList || [];
       } catch {
         //
       }
@@ -1278,7 +1286,7 @@ export default defineComponent({
           if (data.preStudentNum <= 0) return;
           // const res = await lessonPreTrainingPage({
           //   coursewareKnowledgeDetailId: data.detailId,
-          //   subjectId: data.subjectId,
+          //   instrumentId: data.instrumentId,
           //   page: 1,
           //   rows: 99
           // });
@@ -1847,7 +1855,7 @@ export default defineComponent({
           <SelectClass
             classId={data.classId}
             courseId={popupData.courseId}
-            subjectId={data.subjectId}
+            instrumentId={data.instrumentId}
             lessonCoursewareSubjectList={data.lessonCoursewareSubjectList}
             onConfirm={async (val: any) => {
               popupData.chapterLoading = true;
@@ -1919,7 +1927,7 @@ export default defineComponent({
           title={'作业设置'}>
           <ClassWork
             detailId={data.detailId}
-            subjectId={data.subjectId}
+            instrumentId={data.instrumentId}
             courseScheduleId={data.classId}
             activeName={activeName.value}
             classGroupId={data.classGroupId}
@@ -1944,9 +1952,12 @@ export default defineComponent({
                 }}
                 classGroupId={data.classGroupId}
                 courseScheduleId={data.classId}
-                onChange={(val: any) => {
+                onChange={async (val: any) => {
                   data.modelTrainStatus = val.status;
                   // getCoursewareList();
+                  if (val.saveWork && data.classId) {
+                    data.lessonPreTrainingId = val.lessonPreTrainingId;
+                  }
                 }}
               />
             </div>

src/views/attend-class/model/select-class/index.tsx

@@ -1,140 +1,165 @@
-import { PropType, defineComponent, onMounted, reactive } from 'vue';
-import styles from './index.module.less';
-import { teacherChapterLessonCoursewareList } from '/src/views/prepare-lessons/api';
-import { NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
-import CoursewareType from '/src/views/prepare-lessons/model/courseware-type';
-import TheEmpty from '/src/components/TheEmpty';
-
-export default defineComponent({
-  name: 'select-class',
-  props: {
-    courseId: {
-      type: String as PropType<'' | null>,
-      default: ''
-    },
-    subjectId: {
-      type: String,
-      default: ''
-    },
-    lessonCoursewareSubjectList: {
-      type: Array,
-      default: () => []
-    },
-    classId: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['confirm', 'close'],
-  setup(props, { emit }) {
-    const forms = reactive({
-      loading: false,
-      subjectId: props.subjectId ? Number(props.subjectId) : '',
-      tableList: [] as any
-    });
-
-    const getDetail = async () => {
-      forms.loading = true;
-      try {
-        // 如果是上课则查询班级声部，预览查询全部
-        // console.log(props.classId, props.subjectId);
-        const { data } = await teacherChapterLessonCoursewareList({
-          coursewareDetailKnowledgeId: props.courseId,
-          subjectId: props.classId ? forms.subjectId : null
-        });
-
-        if (!Array.isArray(data)) {
-          return;
-        }
-        const tempList: any = [];
-        data.forEach((item: any) => {
-          const firstItem: any =
-            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
-          tempList.push({
-            id: item.id,
-            openFlag: item.openFlag,
-            openFlagEnable: item.openFlagEnable,
-            subjectNames: item.subjectNames,
-            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
-            name: item.name,
-            coverImg: firstItem?.bizInfo.coverImg,
-            type: firstItem?.bizInfo.type
-          });
-        });
-        forms.tableList = tempList;
-      } catch {
-        //
-      }
-      forms.loading = false;
-    };
-
-    onMounted(() => {
-      if (props.subjectId) {
-        const s = Number(props.subjectId);
-        let isE = false;
-        props.lessonCoursewareSubjectList.forEach((item: any) => {
-          if (item.id === s) {
-            isE = true;
-          }
-        });
-        if (!isE) {
-          forms.subjectId = '';
-        }
-      }
-      getDetail();
-    });
-    return () => (
-      <div class={styles.selectClass}>
-        {props.classId && (
-          <div class={styles.searchGroup}>
-            <NSelect
-              options={[
-                { id: '', name: '全部声部' },
-                ...(props.lessonCoursewareSubjectList as any)
-              ]}
-              valueField="id"
-              labelField="name"
-              style={{ width: '220px' }}
-              placeholder={'请选择声部'}
-              v-model:value={forms.subjectId}
-              onUpdate:value={() => {
-                getDetail();
-              }}
-            />
-          </div>
-        )}
-
-        <NSpin show={forms.loading}>
-          <NScrollbar class={styles.selectClassScroll}>
-            <div
-              class={[
-                styles.list,
-                !forms.loading &&
-                  forms.tableList.length <= 0 &&
-                  styles.listEmpty
-              ]}>
-              {forms.tableList.map((item: any) => (
-                <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
-                  <div class={styles.itemWrapBox}>
-                    <CoursewareType
-                      isShowPreviewBtn
-                      isShowOpenFlag={false}
-                      item={item}
-                      onClick={() => {
-                        emit('confirm', {
-                          itemActive: props.courseId,
-                          chapterId: item.id
-                        });
-                      }}
-                    />
-                  </div>
-                </div>
-              ))}
-              {!forms.loading && forms.tableList.length <= 0 && <TheEmpty />}
-            </div>
-          </NScrollbar>
-        </NSpin>
-      </div>
-    );
-  }
-});
+import { PropType, defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import { teacherChapterLessonCoursewareList } from '/src/views/prepare-lessons/api';
+import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
+import CoursewareType from '/src/views/prepare-lessons/model/courseware-type';
+import TheEmpty from '/src/components/TheEmpty';
+
+export default defineComponent({
+  name: 'select-class',
+  props: {
+    courseId: {
+      type: String as PropType<'' | null>,
+      default: ''
+    },
+    instrumentId: {
+      type: String,
+      default: ''
+    },
+    lessonCoursewareSubjectList: {
+      type: Array,
+      default: () => []
+    },
+    classId: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['confirm', 'close'],
+  setup(props, { emit }) {
+    const forms = reactive({
+      loading: false,
+      instrumentId: props.instrumentId ? Number(props.instrumentId) : '',
+      tableList: [] as any
+    });
+
+    const getDetail = async () => {
+      forms.loading = true;
+      try {
+        // 如果是上课则查询班级声部，预览查询全部
+        // console.log(props.classId, props.instrumentId);
+        const { data } = await teacherChapterLessonCoursewareList({
+          coursewareDetailKnowledgeId: props.courseId,
+          instrumentId: props.classId ? forms.instrumentId : null
+        });
+
+        if (!Array.isArray(data)) {
+          return;
+        }
+        const tempList: any = [];
+        data.forEach((item: any) => {
+          const firstItem: any =
+            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
+          tempList.push({
+            id: item.id,
+            openFlag: item.openFlag,
+            openFlagEnable: item.openFlagEnable,
+            subjectNames: item.subjectNames,
+            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
+            name: item.name,
+            coverImg: firstItem?.bizInfo.coverImg,
+            type: firstItem?.bizInfo.type
+          });
+        });
+        forms.tableList = tempList;
+      } catch {
+        //
+      }
+      forms.loading = false;
+    };
+
+    onMounted(() => {
+      console.log(
+        props.instrumentId,
+        props.lessonCoursewareSubjectList,
+        'props.lessonCoursewareSubjectList'
+      );
+      if (props.instrumentId) {
+        const s = Number(props.instrumentId);
+        let isE = false;
+        props.lessonCoursewareSubjectList.forEach((item: any) => {
+          if (item.id === s) {
+            isE = true;
+          }
+        });
+        if (!isE) {
+          forms.instrumentId = '';
+        }
+      }
+      getDetail();
+    });
+    return () => (
+      <div class={styles.selectClass}>
+        {props.classId && (
+          <div class={styles.searchGroup}>
+            <NSelect
+              options={[
+                { id: '', name: '全部乐器' },
+                ...(props.lessonCoursewareSubjectList as any)
+              ]}
+              valueField="id"
+              labelField="name"
+              style={{ width: '220px' }}
+              placeholder={'请选择乐器'}
+              v-model:value={forms.instrumentId}
+              onUpdate:value={() => {
+                getDetail();
+              }}
+            />
+            {/* <NCascader
+              options={[
+                { id: '', name: '全部声部' },
+                ...(props.lessonCoursewareSubjectList as any)
+              ]}
+              valueField="id"
+              labelField="name"
+              style={{ width: '220px' }}
+              placeholder={'请选择声部'}
+              v-model:value={forms.instrumentId}
+              onUpdate:value={() => {
+                getDetail();
+              }}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              clearable
+              filterable
+            /> */}
+          </div>
+        )}
+
+        <NSpin show={forms.loading}>
+          <NScrollbar class={styles.selectClassScroll}>
+            <div
+              class={[
+                styles.list,
+                !forms.loading &&
+                  forms.tableList.length <= 0 &&
+                  styles.listEmpty
+              ]}>
+              {forms.tableList.map((item: any) => (
+                <div class={[styles.itemWrap, styles.itemBlock, 'row-nav']}>
+                  <div class={styles.itemWrapBox}>
+                    <CoursewareType
+                      isShowPreviewBtn
+                      isShowOpenFlag={false}
+                      item={item}
+                      onClick={() => {
+                        emit('confirm', {
+                          itemActive: props.courseId,
+                          chapterId: item.id
+                        });
+                      }}
+                    />
+                  </div>
+                </div>
+              ))}
+              {!forms.loading && forms.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NScrollbar>
+        </NSpin>
+      </div>
+    );
+  }
+});

src/views/classList/api.ts

@@ -203,6 +203,15 @@ export const updateSubject = (params: any) => {
     data: params
   });
 };
+
+/**
+ * 修改乐器
+ */
+export const updateInstrument = (params: any) => {
+  return request.post('/edu-app/classGroup/updateInstrument', {
+    data: params
+  });
+};
 /**
  * 班级详情
  */

src/views/classList/index.module.less

@@ -5,6 +5,8 @@
   padding: 32px;
   background-color: #fff;
   border-radius: 20px;
+
+
 }
 
 .infoListWrap {
@@ -378,6 +380,13 @@
       }
     }
   }
+
+  :global {
+    .n-cascader {
+      width: 100% !important;
+      min-width: 180px !important;
+    }
+  }
 }
 
 .indDot,

src/views/classList/index.tsx

@@ -1,697 +1,721 @@
-import { defineComponent, reactive, onMounted, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NDataTable,
-  NForm,
-  NFormItem,
-  NImage,
-  NModal,
-  NSpace,
-  useMessage
-} from 'naive-ui';
-import SearchInput from '@/components/searchInput';
-import CSelect from '@/components/CSelect';
-import Pagination from '@/components/pagination';
-import { classGroupList, deleteClass, getSubject, addGroup } from './api';
-import CreateClass from './modals/createClass';
-import RestStudentBox from './modals/restStudentBox';
-import { getgradeNumList, classArray } from './contants';
-import add from '@/views/studentList/images/add.png';
-import ClassGuide from '@/custom-plugins/guide-page/class-guide';
-import { useRoute, useRouter } from 'vue-router';
-import TheEmpty from '/src/components/TheEmpty';
-import TheTooltip from '/src/components/TheTooltip';
-import PreviewWindow from '../preview-window';
-import ResetSubject from './modals/resetSubject';
-import UpdateSubject from './modals/updateSubject';
-import { getGradeLevelList, getGradeYearList } from '../home/api';
-import { initCache, setCache } from '/src/hooks/use-async';
-import AddStudentModel from '../studentList/modals/addStudentModel';
-import { useUserStore } from '/src/store/modules/users';
-export default defineComponent({
-  name: 'class-classList',
-  setup() {
-    const users = useUserStore();
-    const state = reactive({
-      searchForm: {
-        keyword: null as any,
-        currentClass: '',
-        currentGradeNum: '',
-        subjectId: '',
-        gradeYear: '',
-        gradeLevel: ''
-      },
-      orchestraType: null,
-      courseTypeCode: null,
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 10,
-        pageTotal: 6
-      },
-      gradeNumList: [] as any,
-      tableList: [] as any,
-      studentVisible: false,
-      activeRow: null as any,
-      showaddClass: false,
-      goCourseVisiable: false,
-      removeVisiable: false,
-      removeRow: {} as any,
-      previewModal: false,
-      previewParams: {} as any,
-      lastCourse: null as any,
-      groupBtnLoading: false, // 按钮是否在请求中
-      subjectList: [] as any,
-      showResetClass: false,
-      showSubjectClass: false,
-      groupVisiable: false,
-      popSelectYearList: [] as any,
-      popSelectLevelList: [] as any,
-      addStudentVisible: false
-    });
-    const formRef = ref();
-    const message = useMessage();
-    const router = useRouter();
-    const route = useRoute();
-    const search = () => {
-      state.pagination.page = 1;
-      getList();
-      setCache({ current: state.searchForm, saveKey: route.path });
-    };
-    const showGuide = ref(false);
-    state.gradeNumList = getgradeNumList();
-    const onReset = () => {
-      state.searchForm = {
-        keyword: null as any,
-        currentClass: '' as any,
-        currentGradeNum: '' as any,
-        subjectId: '' as any,
-        gradeYear: '' as any,
-        gradeLevel: ''
-      };
-      if (state.popSelectYearList.length > 1) {
-        state.searchForm.gradeYear = state.popSelectYearList[1].id;
-      }
-      getList();
-      setCache({ current: state.searchForm, saveKey: route.path });
-    };
-
-    const removeClass = async () => {
-      try {
-        await deleteClass({ ids: state.removeRow.id });
-        getList();
-        message.success(`删除成功`);
-        state.removeVisiable = false;
-      } catch (e) {
-        console.log(e);
-      }
-    };
-    const getList = async () => {
-      // classGroupList
-      state.loading = true;
-      try {
-        const res = await classGroupList({
-          ...state.searchForm,
-          ...state.pagination
-        });
-        state.tableList = res.data.rows;
-        state.pagination.pageTotal = res.data.total;
-        state.loading = false;
-
-        setTimeout(() => {
-          if (state.tableList.length > 0) {
-            showGuide.value = true;
-          }
-        }, 500);
-      } catch (e) {
-        state.loading = false;
-        console.log(e);
-      }
-    };
-    const getSubjectList = async () => {
-      const res = await getSubject({ page: 1, rows: 9999 });
-      state.subjectList = res.data.rows.map((item: any) => {
-        return {
-          value: item.id,
-          label: item.name
-        };
-      });
-      state.subjectList.unshift({ value: '', label: '全部声部' });
-    };
-    const columns = () => {
-      return [
-        {
-          title: '班级名称',
-          key: 'name'
-        },
-        {
-          title: '学年',
-          key: 'gradeYear'
-        },
-        {
-          title: '学级',
-          key: 'gradeLevel',
-          render(row: any) {
-            return row.gradeLevel ? `${row.gradeLevel}级` : '';
-          }
-        },
-        {
-          title: '班级声部',
-          key: 'subjectName'
-        },
-        {
-          title: '学生人数',
-          key: 'preStudentNum'
-        },
-        {
-          title: '上次学习',
-          key: 'lastStudy',
-          width: '20%',
-          render(row: any) {
-            return row.lastStudy ? (
-              <TheTooltip
-                maxWidth={300}
-                showContentWidth={300}
-                content={row.lastStudy}
-              />
-            ) : (
-              '--'
-            );
-          }
-        },
-        {
-          title: '操作',
-          key: 'id',
-
-          render(row: any, index: number) {
-            return (
-              <div>
-                <NSpace>
-                  {index == 0 ? (
-                    <div id="class-0">
-                      <NButton
-                        type="primary"
-                        text
-                        onClick={() => {
-                          router.push({
-                            path: '/classDetail',
-                            query: {
-                              name: row.name,
-                              id: row.id,
-                              gradeYear: row.gradeYear,
-                              upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
-                            }
-                          });
-                        }}>
-                        详情
-                      </NButton>
-                    </div>
-                  ) : (
-                    <NButton
-                      type="primary"
-                      text
-                      onClick={() => {
-                        router.push({
-                          path: '/classDetail',
-                          query: {
-                            name: row.name,
-                            id: row.id,
-                            gradeYear: row.gradeYear,
-                            upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
-                          }
-                        });
-                      }}>
-                      详情
-                    </NButton>
-                  )}
-                  <NButton
-                    type="primary"
-                    disabled={!row.upgradeFlag || row.subjectId}
-                    text
-                    onClick={() => resetClassSubject(row)}>
-                    修改声部
-                  </NButton>
-                  {index == 0 ? (
-                    <NButton
-                      type="primary"
-                      disabled={!row.upgradeFlag}
-                      {...{ id: 'class-1' }}
-                      text
-                      onClick={() => {
-                        startResetStudent(row);
-                      }}>
-                      学生调整
-                    </NButton>
-                  ) : (
-                    <NButton
-                      type="primary"
-                      disabled={!row.upgradeFlag}
-                      text
-                      onClick={() => {
-                        startResetStudent(row);
-                      }}>
-                      学生调整
-                    </NButton>
-                  )}
-                  {index == 0 ? (
-                    <NButton
-                      {...{ id: 'class-2' }}
-                      disabled={!row.upgradeFlag}
-                      type="primary"
-                      text
-                      onClick={() => classesBegin(row)}>
-                      开始上课
-                    </NButton>
-                  ) : (
-                    <NButton
-                      disabled={!row.upgradeFlag}
-                      type="primary"
-                      text
-                      onClick={() => classesBegin(row)}>
-                      开始上课
-                    </NButton>
-                  )}
-
-                  {/* <p
-                      style={{ color: '#EA4132', cursor: 'pointer' }}
-                      onClick={() => {
-                        state.removeVisiable = true;
-                        state.removeRow = row;
-                      }}>
-                      删除
-                    </p> */}
-                  {!(row.preStudentNum > 0) ? (
-                    <NButton
-                      type="error"
-                      color="#EA4132"
-                      textColor="#EA4132"
-                      text
-                      onClick={() => {
-                        state.removeVisiable = true;
-                        state.removeRow = row;
-                      }}>
-                      删除
-                    </NButton>
-                  ) : null}
-                  {row.imGroupId ? null : (
-                    <NButton
-                      type="primary"
-                      disabled={!row.upgradeFlag}
-                      text
-                      onClick={() => {
-                        createImgroup(row);
-                      }}>
-                      创建群聊
-                    </NButton>
-                  )}
-                  <NButton
-                    type="primary"
-                    disabled={!row.upgradeFlag}
-                    text
-                    onClick={() => {
-                      const { schoolInfos } = users.getUserInfo;
-                      const schoolId =
-                        schoolInfos.length > 0 ? schoolInfos[0].id : null;
-                      if (schoolId) {
-                        state.addStudentVisible = true;
-                        state.activeRow = {
-                          id: schoolId,
-                          classId: row.id,
-                          currentGradeNum: row.currentGradeNum,
-                          currentClass: row.currentClass,
-                          gradeYear: row.gradeYear
-                        };
-                      }
-                    }}>
-                    邀请学生
-                  </NButton>
-                </NSpace>
-              </div>
-            );
-          }
-        }
-      ];
-    };
-
-    const startResetStudent = (row: any) => {
-      state.activeRow = row;
-      state.studentVisible = true;
-    };
-
-    const classesBegin = async (row: any) => {
-      try {
-        // 判断是否有声部
-        if (row.subjectId) {
-          //
-          // 声部先取上次上课的声部，如果没有则取班级上面的声部
-          router.push({
-            path: '/prepare-lessons',
-            query: {
-              lastUseCoursewareId: row.lessonCoursewareId,
-              unit: row.lessonCoursewareKnowledgeDetailId,
-              subjectId: row.subjectId,
-              courseScheduleSubjectId: row.courseScheduleSubjectId,
-              preStudentNum: row.preStudentNum,
-              name: row.name, // 班级名称
-              classGroupId: row.id // 班级编号
-            }
-          });
-        } else {
-          state.showSubjectClass = true;
-          state.activeRow = row;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    };
-
-    const resetClassSubject = (row: any) => {
-      state.activeRow = row;
-      state.showResetClass = true;
-    };
-    const createImgroup = async (row: any) => {
-      state.activeRow = row;
-      state.groupVisiable = true;
-    };
-
-    const submitGroup = async () => {
-      console.log(state.activeRow, 'row');
-      state.groupBtnLoading = true;
-      try {
-        await addGroup({ classGroupId: state.activeRow.id });
-        message.success('创建成功');
-        state.groupVisiable = false;
-        await getList();
-      } catch (e) {
-        console.log(e);
-      }
-      state.groupBtnLoading = false;
-    };
-
-    // 获取学年
-    const getYearList = async () => {
-      try {
-        const { data } = await getGradeYearList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '学年';
-        });
-        // temp.unshift({
-        //   id: '',
-        //   name: '全部学年'
-        // });
-        state.popSelectYearList = temp || [];
-        if (temp.length > 1 && !state.searchForm.gradeYear) {
-          state.searchForm.gradeYear = temp[1].id;
-        }
-      } catch {
-        //
-      }
-    };
-    // 获取学级
-    const getLevelList = async () => {
-      try {
-        const { data } = await getGradeLevelList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '级';
-        });
-        temp.unshift({
-          id: '',
-          name: '全部学级'
-        });
-        state.popSelectLevelList = temp || [];
-        if (temp.length > 0 && !state.searchForm.gradeLevel) {
-          state.searchForm.gradeLevel = temp[0].id;
-        }
-      } catch {
-        //
-      }
-    };
-
-    initCache({
-      current: state.searchForm,
-      callBack: (active: any) => {
-        state.searchForm = active;
-      }
-    });
-
-    onMounted(async () => {
-      state.loading = true;
-      getSubjectList();
-      await getYearList();
-      await getLevelList();
-      await getList();
-
-      state.loading = false;
-    });
-    return () => (
-      <div class={styles.listWrap}>
-        <div class={styles.searchList}>
-          <NForm label-placement="left" inline ref={formRef}>
-            <NFormItem>
-              <SearchInput
-                {...{ placeholder: '请输入班级名称' }}
-                class={styles.searchInput}
-                searchWord={state.searchForm.keyword}
-                onChangeValue={(val: string) =>
-                  (state.searchForm.keyword = val)
-                }></SearchInput>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.popSelectYearList,
-                  placeholder: '选择学年',
-                  clearable: false,
-                  inline: true,
-                  labelField: 'name',
-                  valueField: 'id'
-                } as any)}
-                v-model:value={state.searchForm.gradeYear}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.popSelectLevelList,
-                  placeholder: '选择学级',
-                  clearable: true,
-                  inline: true,
-                  labelField: 'name',
-                  valueField: 'id'
-                } as any)}
-                v-model:value={state.searchForm.gradeLevel}></CSelect>
-            </NFormItem>
-
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.gradeNumList,
-                  placeholder: '选择年级',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.currentGradeNum}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: classArray,
-                  placeholder: '选择班级',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.currentClass}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.subjectList,
-                  placeholder: '选择声部',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.subjectId}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <NSpace justify="end">
-                <NButton type="primary" class="searchBtn" onClick={search}>
-                  搜索
-                </NButton>
-                <NButton
-                  type="primary"
-                  ghost
-                  class="resetBtn"
-                  onClick={onReset}>
-                  重置
-                </NButton>
-              </NSpace>
-            </NFormItem>
-          </NForm>
-        </div>
-        <NButton
-          class={styles.addBtn}
-          type="primary"
-          onClick={() => (state.showaddClass = true)}
-          v-slots={{
-            icon: () => (
-              <>
-                <NImage
-                  class={styles.addBtnIcon}
-                  previewDisabled
-                  src={add}></NImage>
-              </>
-            )
-          }}>
-          创建班级
-        </NButton>
-        <div class={styles.tableWrap}>
-          <NDataTable
-            v-slots={{
-              empty: () => <TheEmpty></TheEmpty>
-            }}
-            class={styles.classTable}
-            loading={state.loading}
-            columns={columns()}
-            data={state.tableList}></NDataTable>
-          <Pagination
-            v-model:page={state.pagination.page}
-            v-model:pageSize={state.pagination.rows}
-            v-model:pageTotal={state.pagination.pageTotal}
-            onList={getList}
-            sync
-          />
-        </div>
-        <NModal
-          v-model:show={state.studentVisible}
-          preset="card"
-          class={['modalTitle background', styles.studentVisible]}
-          title={'学生调整'}>
-          <RestStudentBox
-            activeRow={state.activeRow}
-            onClose={() => (state.studentVisible = false)}
-            onGetList={() => getList()}></RestStudentBox>
-        </NModal>
-        <NModal
-          v-model:show={state.showaddClass}
-          style={{ width: '500px' }}
-          display-directive="if"
-          preset="card"
-          class={['modalTitle background']}
-          title={'创建班级'}>
-          <CreateClass
-            gradeYearList={state.popSelectYearList}
-            gradeNumList={state.gradeNumList}
-            classArray={classArray}
-            onGetList={() => getList()}
-            onClose={() => (state.showaddClass = false)}
-          />
-        </NModal>
-        <NModal
-          v-model:show={state.showResetClass}
-          style={{ width: '500px' }}
-          display-directive="if"
-          preset="card"
-          class={['modalTitle background']}
-          title={'修改声部'}>
-          <ResetSubject
-            activeRow={state.activeRow}
-            onGetList={() => getList()}
-            onClose={() => (state.showResetClass = false)}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={state.showSubjectClass}
-          style={{ width: '500px' }}
-          preset="card"
-          class={['modalTitle background']}
-          title={'修改声部'}>
-          {state.showSubjectClass ? (
-            <UpdateSubject
-              activeRow={state.activeRow}
-              onGetList={() => getList()}
-              onConfirm={(item: any) => {
-                //
-                router.push({
-                  path: '/prepare-lessons',
-                  query: {
-                    ...item
-                  }
-                });
-              }}
-              onClose={() => (state.showSubjectClass = false)}
-            />
-          ) : null}
-        </NModal>
-
-        {/* 上课弹窗 */}
-        <PreviewWindow
-          v-model:show={state.previewModal}
-          type="attend"
-          params={state.previewParams}
-        />
-
-        <NModal
-          v-model:show={state.removeVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable]}
-          title={'删除班级'}>
-          <div class={styles.studentRemove}>
-            <p>
-              确定要删除班级么？
-              <span>删除班级信息将会清空</span>。
-            </p>
-
-            <NSpace class={styles.btnGroup} justify="center">
-              <NButton round type="primary" onClick={removeClass}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (state.removeVisiable = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-
-        <NModal
-          v-model:show={state.groupVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable]}
-          title={'创建群聊'}>
-          <div class={styles.studentRemove}>
-            <p style={{ textAlign: 'center' }}>是否创建班级群聊</p>
-
-            <NSpace class={styles.btnGroup} justify="center">
-              <NButton
-                round
-                type="primary"
-                onClick={submitGroup}
-                loading={state.groupBtnLoading}
-                disabled={state.groupBtnLoading}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (state.groupVisiable = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-        {showGuide.value ? <ClassGuide></ClassGuide> : null}
-
-        {state.addStudentVisible ? (
-          <div
-            v-model:show={state.addStudentVisible}
-            class={['n-modal-mask', styles.popBox]}>
-            <AddStudentModel
-              activeRow={state.activeRow}
-              onClose={() => {
-                state.addStudentVisible = false;
-              }}></AddStudentModel>
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-});
+import { defineComponent, reactive, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NCascader,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NImage,
+  NModal,
+  NSpace,
+  useMessage
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CSelect from '@/components/CSelect';
+import Pagination from '@/components/pagination';
+import { classGroupList, deleteClass, getSubject, addGroup } from './api';
+import CreateClass from './modals/createClass';
+import RestStudentBox from './modals/restStudentBox';
+import { getgradeNumList, classArray } from './contants';
+import add from '@/views/studentList/images/add.png';
+import ClassGuide from '@/custom-plugins/guide-page/class-guide';
+import { useRoute, useRouter } from 'vue-router';
+import TheEmpty from '/src/components/TheEmpty';
+import TheTooltip from '/src/components/TheTooltip';
+import PreviewWindow from '../preview-window';
+import ResetSubject from './modals/resetSubject';
+import UpdateSubject from './modals/updateSubject';
+import { getGradeLevelList, getGradeYearList } from '../home/api';
+import { initCache, setCache } from '/src/hooks/use-async';
+import AddStudentModel from '../studentList/modals/addStudentModel';
+import { useUserStore } from '/src/store/modules/users';
+import { useCatchStore } from '/src/store/modules/catchData';
+export default defineComponent({
+  name: 'class-classList',
+  setup() {
+    const catchData = useCatchStore();
+    const users = useUserStore();
+    const state = reactive({
+      searchForm: {
+        keyword: null as any,
+        currentClass: '',
+        currentGradeNum: '',
+        instrumentId: '',
+        gradeYear: '',
+        gradeLevel: ''
+      },
+      orchestraType: null,
+      courseTypeCode: null,
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 6
+      },
+      gradeNumList: [] as any,
+      tableList: [] as any,
+      studentVisible: false,
+      activeRow: null as any,
+      showaddClass: false,
+      goCourseVisiable: false,
+      removeVisiable: false,
+      removeRow: {} as any,
+      previewModal: false,
+      previewParams: {} as any,
+      lastCourse: null as any,
+      groupBtnLoading: false, // 按钮是否在请求中
+      // subjectList: [] as any,
+      showResetClass: false,
+      showSubjectClass: false,
+      groupVisiable: false,
+      popSelectYearList: [] as any,
+      popSelectLevelList: [] as any,
+      addStudentVisible: false
+    });
+    const formRef = ref();
+    const message = useMessage();
+    const router = useRouter();
+    const route = useRoute();
+    const search = () => {
+      state.pagination.page = 1;
+      getList();
+      setCache({ current: state.searchForm, saveKey: route.path });
+    };
+    const showGuide = ref(false);
+    state.gradeNumList = getgradeNumList();
+    const onReset = () => {
+      state.searchForm = {
+        keyword: null as any,
+        currentClass: '' as any,
+        currentGradeNum: '' as any,
+        instrumentId: '' as any,
+        gradeYear: '' as any,
+        gradeLevel: ''
+      };
+      if (state.popSelectYearList.length > 1) {
+        state.searchForm.gradeYear = state.popSelectYearList[1].id;
+      }
+      getList();
+      setCache({ current: state.searchForm, saveKey: route.path });
+    };
+
+    const removeClass = async () => {
+      try {
+        await deleteClass({ ids: state.removeRow.id });
+        getList();
+        message.success(`删除成功`);
+        state.removeVisiable = false;
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    const getList = async () => {
+      // classGroupList
+      state.loading = true;
+      try {
+        const res = await classGroupList({
+          ...state.searchForm,
+          ...state.pagination
+        });
+        state.tableList = res.data.rows;
+        state.pagination.pageTotal = res.data.total;
+        state.loading = false;
+
+        setTimeout(() => {
+          if (state.tableList.length > 0) {
+            showGuide.value = true;
+          }
+        }, 500);
+      } catch (e) {
+        state.loading = false;
+        console.log(e);
+      }
+    };
+    // const getSubjectList = async () => {
+    //   const res = await getSubject({ page: 1, rows: 9999 });
+    //   state.subjectList = res.data.rows.map((item: any) => {
+    //     return {
+    //       value: item.id,
+    //       label: item.name
+    //     };
+    //   });
+    //   state.subjectList.unshift({ value: '', label: '全部声部' });
+    // };
+    const columns = () => {
+      return [
+        {
+          title: '班级名称',
+          key: 'name'
+        },
+        {
+          title: '学年',
+          key: 'gradeYear'
+        },
+        {
+          title: '学级',
+          key: 'gradeLevel',
+          render(row: any) {
+            return row.gradeLevel ? `${row.gradeLevel}级` : '';
+          }
+        },
+        {
+          title: '班级乐器',
+          key: 'instrumentName'
+        },
+        {
+          title: '学生人数',
+          key: 'preStudentNum'
+        },
+        {
+          title: '上次学习',
+          key: 'lastStudy',
+          width: '20%',
+          render(row: any) {
+            return row.lastStudy ? (
+              <TheTooltip
+                maxWidth={300}
+                showContentWidth={300}
+                content={row.lastStudy}
+              />
+            ) : (
+              '--'
+            );
+          }
+        },
+        {
+          title: '操作',
+          key: 'id',
+
+          render(row: any, index: number) {
+            return (
+              <div>
+                <NSpace>
+                  {index == 0 ? (
+                    <div id="class-0">
+                      <NButton
+                        type="primary"
+                        text
+                        onClick={() => {
+                          router.push({
+                            path: '/classDetail',
+                            query: {
+                              name: row.name,
+                              id: row.id,
+                              gradeYear: row.gradeYear,
+                              upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
+                            }
+                          });
+                        }}>
+                        详情
+                      </NButton>
+                    </div>
+                  ) : (
+                    <NButton
+                      type="primary"
+                      text
+                      onClick={() => {
+                        router.push({
+                          path: '/classDetail',
+                          query: {
+                            name: row.name,
+                            id: row.id,
+                            gradeYear: row.gradeYear,
+                            upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
+                          }
+                        });
+                      }}>
+                      详情
+                    </NButton>
+                  )}
+                  <NButton
+                    type="primary"
+                    disabled={!row.upgradeFlag || row.instrumentId}
+                    text
+                    onClick={() => resetClassSubject(row)}>
+                    修改乐器
+                  </NButton>
+                  {index == 0 ? (
+                    <NButton
+                      type="primary"
+                      disabled={!row.upgradeFlag}
+                      {...{ id: 'class-1' }}
+                      text
+                      onClick={() => {
+                        startResetStudent(row);
+                      }}>
+                      学生调整
+                    </NButton>
+                  ) : (
+                    <NButton
+                      type="primary"
+                      disabled={!row.upgradeFlag}
+                      text
+                      onClick={() => {
+                        startResetStudent(row);
+                      }}>
+                      学生调整
+                    </NButton>
+                  )}
+                  {index == 0 ? (
+                    <NButton
+                      {...{ id: 'class-2' }}
+                      disabled={!row.upgradeFlag}
+                      type="primary"
+                      text
+                      onClick={() => classesBegin(row)}>
+                      开始上课
+                    </NButton>
+                  ) : (
+                    <NButton
+                      disabled={!row.upgradeFlag}
+                      type="primary"
+                      text
+                      onClick={() => classesBegin(row)}>
+                      开始上课
+                    </NButton>
+                  )}
+
+                  {/* <p
+                      style={{ color: '#EA4132', cursor: 'pointer' }}
+                      onClick={() => {
+                        state.removeVisiable = true;
+                        state.removeRow = row;
+                      }}>
+                      删除
+                    </p> */}
+                  {!(row.preStudentNum > 0) ? (
+                    <NButton
+                      type="error"
+                      color="#EA4132"
+                      textColor="#EA4132"
+                      text
+                      onClick={() => {
+                        state.removeVisiable = true;
+                        state.removeRow = row;
+                      }}>
+                      删除
+                    </NButton>
+                  ) : null}
+                  {row.imGroupId ? null : (
+                    <NButton
+                      type="primary"
+                      disabled={!row.upgradeFlag}
+                      text
+                      onClick={() => {
+                        createImgroup(row);
+                      }}>
+                      创建群聊
+                    </NButton>
+                  )}
+                  <NButton
+                    type="primary"
+                    disabled={!row.upgradeFlag}
+                    text
+                    onClick={() => {
+                      const { schoolInfos } = users.getUserInfo;
+                      const schoolId =
+                        schoolInfos.length > 0 ? schoolInfos[0].id : null;
+                      if (schoolId) {
+                        state.addStudentVisible = true;
+                        state.activeRow = {
+                          id: schoolId,
+                          classId: row.id,
+                          currentGradeNum: row.currentGradeNum,
+                          currentClass: row.currentClass,
+                          gradeYear: row.gradeYear
+                        };
+                      }
+                    }}>
+                    邀请学生
+                  </NButton>
+                </NSpace>
+              </div>
+            );
+          }
+        }
+      ];
+    };
+
+    const startResetStudent = (row: any) => {
+      state.activeRow = row;
+      state.studentVisible = true;
+    };
+
+    const classesBegin = async (row: any) => {
+      try {
+        // 判断是否有声部
+        if (row.instrumentId) {
+          //
+          // 声部先取上次上课的声部，如果没有则取班级上面的声部
+          router.push({
+            path: '/prepare-lessons',
+            query: {
+              lastUseCoursewareId: row.lessonCoursewareId,
+              unit: row.lessonCoursewareKnowledgeDetailId,
+              instrumentId: row.instrumentId,
+              courseScheduleSubjectId: row.courseScheduleSubjectId,
+              preStudentNum: row.preStudentNum,
+              name: row.name, // 班级名称
+              classGroupId: row.id // 班级编号
+            }
+          });
+        } else {
+          state.showSubjectClass = true;
+          state.activeRow = row;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    const resetClassSubject = (row: any) => {
+      state.activeRow = row;
+      state.showResetClass = true;
+    };
+    const createImgroup = async (row: any) => {
+      state.activeRow = row;
+      state.groupVisiable = true;
+    };
+
+    const submitGroup = async () => {
+      console.log(state.activeRow, 'row');
+      state.groupBtnLoading = true;
+      try {
+        await addGroup({ classGroupId: state.activeRow.id });
+        message.success('创建成功');
+        state.groupVisiable = false;
+        await getList();
+      } catch (e) {
+        console.log(e);
+      }
+      state.groupBtnLoading = false;
+    };
+
+    // 获取学年
+    const getYearList = async () => {
+      try {
+        const { data } = await getGradeYearList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '学年';
+        });
+        // temp.unshift({
+        //   id: '',
+        //   name: '全部学年'
+        // });
+        state.popSelectYearList = temp || [];
+        if (temp.length > 1 && !state.searchForm.gradeYear) {
+          state.searchForm.gradeYear = temp[1].id;
+        }
+      } catch {
+        //
+      }
+    };
+    // 获取学级
+    const getLevelList = async () => {
+      try {
+        const { data } = await getGradeLevelList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '级';
+        });
+        temp.unshift({
+          id: '',
+          name: '全部学级'
+        });
+        state.popSelectLevelList = temp || [];
+        if (temp.length > 0 && !state.searchForm.gradeLevel) {
+          state.searchForm.gradeLevel = temp[0].id;
+        }
+      } catch {
+        //
+      }
+    };
+
+    initCache({
+      current: state.searchForm,
+      callBack: (active: any) => {
+        state.searchForm = active;
+      }
+    });
+
+    onMounted(async () => {
+      state.loading = true;
+      await catchData.getSubjects();
+
+      // getSubjectList();
+      await getYearList();
+      await getLevelList();
+      await getList();
+
+      state.loading = false;
+    });
+    return () => (
+      <div class={styles.listWrap}>
+        <div class={styles.searchList}>
+          <NForm label-placement="left" inline ref={formRef}>
+            <NFormItem>
+              <SearchInput
+                {...{ placeholder: '请输入班级名称' }}
+                class={styles.searchInput}
+                searchWord={state.searchForm.keyword}
+                onChangeValue={(val: string) =>
+                  (state.searchForm.keyword = val)
+                }></SearchInput>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.popSelectYearList,
+                  placeholder: '选择学年',
+                  clearable: false,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.gradeYear}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.popSelectLevelList,
+                  placeholder: '选择学级',
+                  clearable: true,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.gradeLevel}></CSelect>
+            </NFormItem>
+
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.gradeNumList,
+                  placeholder: '选择年级',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.currentGradeNum}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: classArray,
+                  placeholder: '选择班级',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.currentClass}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              {/* <CSelect
+                {...({
+                  options: [
+                    { value: '', label: '全部声部' },
+                    ...catchData.getSubjectList
+                  ],
+                  placeholder: '选择乐器',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.instrumentId}></CSelect> */}
+              <NCascader
+                to="body"
+                placeholder="选择乐器"
+                options={[
+                  { value: '', label: '全部乐器' },
+                  ...catchData.getSubjectList
+                ]}
+                childrenField="instruments"
+                checkStrategy="child"
+                expandTrigger="hover"
+                showPath={true}
+                v-model:value={state.searchForm.instrumentId}
+                onUpdate:value={(val: any, option: any, pathValues: any) => {
+                  console.log(val, option, pathValues);
+                }}
+              />
+            </NFormItem>
+            <NFormItem>
+              <NSpace justify="end">
+                <NButton type="primary" class="searchBtn" onClick={search}>
+                  搜索
+                </NButton>
+                <NButton
+                  type="primary"
+                  ghost
+                  class="resetBtn"
+                  onClick={onReset}>
+                  重置
+                </NButton>
+              </NSpace>
+            </NFormItem>
+          </NForm>
+        </div>
+        <NButton
+          class={styles.addBtn}
+          type="primary"
+          onClick={() => (state.showaddClass = true)}
+          v-slots={{
+            icon: () => (
+              <>
+                <NImage
+                  class={styles.addBtnIcon}
+                  previewDisabled
+                  src={add}></NImage>
+              </>
+            )
+          }}>
+          创建班级
+        </NButton>
+        <div class={styles.tableWrap}>
+          <NDataTable
+            v-slots={{
+              empty: () => <TheEmpty></TheEmpty>
+            }}
+            class={styles.classTable}
+            loading={state.loading}
+            columns={columns()}
+            data={state.tableList}></NDataTable>
+          <Pagination
+            v-model:page={state.pagination.page}
+            v-model:pageSize={state.pagination.rows}
+            v-model:pageTotal={state.pagination.pageTotal}
+            onList={getList}
+            sync
+          />
+        </div>
+        <NModal
+          v-model:show={state.studentVisible}
+          preset="card"
+          class={['modalTitle background', styles.studentVisible]}
+          title={'学生调整'}>
+          <RestStudentBox
+            activeRow={state.activeRow}
+            onClose={() => (state.studentVisible = false)}
+            onGetList={() => getList()}></RestStudentBox>
+        </NModal>
+        <NModal
+          v-model:show={state.showaddClass}
+          style={{ width: '500px' }}
+          display-directive="if"
+          preset="card"
+          class={['modalTitle background']}
+          title={'创建班级'}>
+          <CreateClass
+            gradeYearList={state.popSelectYearList}
+            gradeNumList={state.gradeNumList}
+            classArray={classArray}
+            onGetList={() => getList()}
+            onClose={() => (state.showaddClass = false)}
+          />
+        </NModal>
+        <NModal
+          v-model:show={state.showResetClass}
+          style={{ width: '500px' }}
+          display-directive="if"
+          preset="card"
+          class={['modalTitle background']}
+          title={'修改乐器'}>
+          <ResetSubject
+            activeRow={state.activeRow}
+            onGetList={() => getList()}
+            onClose={() => (state.showResetClass = false)}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={state.showSubjectClass}
+          style={{ width: '500px' }}
+          preset="card"
+          class={['modalTitle background']}
+          title={'修改乐器'}>
+          {state.showSubjectClass ? (
+            <UpdateSubject
+              activeRow={state.activeRow}
+              onGetList={() => getList()}
+              onConfirm={(item: any) => {
+                //
+                router.push({
+                  path: '/prepare-lessons',
+                  query: {
+                    ...item
+                  }
+                });
+              }}
+              onClose={() => (state.showSubjectClass = false)}
+            />
+          ) : null}
+        </NModal>
+
+        {/* 上课弹窗 */}
+        <PreviewWindow
+          v-model:show={state.previewModal}
+          type="attend"
+          params={state.previewParams}
+        />
+
+        <NModal
+          v-model:show={state.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'删除班级'}>
+          <div class={styles.studentRemove}>
+            <p>
+              确定要删除班级么？
+              <span>删除班级信息将会清空</span>。
+            </p>
+
+            <NSpace class={styles.btnGroup} justify="center">
+              <NButton round type="primary" onClick={removeClass}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+
+        <NModal
+          v-model:show={state.groupVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'创建群聊'}>
+          <div class={styles.studentRemove}>
+            <p style={{ textAlign: 'center' }}>是否创建班级群聊</p>
+
+            <NSpace class={styles.btnGroup} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={submitGroup}
+                loading={state.groupBtnLoading}
+                disabled={state.groupBtnLoading}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.groupVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+        {showGuide.value ? <ClassGuide></ClassGuide> : null}
+
+        {state.addStudentVisible ? (
+          <div
+            v-model:show={state.addStudentVisible}
+            class={['n-modal-mask', styles.popBox]}>
+            <AddStudentModel
+              activeRow={state.activeRow}
+              onClose={() => {
+                state.addStudentVisible = false;
+              }}></AddStudentModel>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+});

src/views/classList/modals/createClass.tsx

@@ -1,209 +1,218 @@
-import {
-  NButton,
-  NSpace,
-  useMessage,
-  NForm,
-  NFormItem,
-  NSelect
-} from 'naive-ui';
-import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
-import styles from '../index.module.less';
-import CSelect from '/src/components/CSelect';
-import { addClass, getConfiguredSubjects } from '../api';
-import { api_getCurrentGradeYear } from '../../studentList/api';
-export default defineComponent({
-  props: {
-    activeRow: {
-      type: Object,
-      default: () => ({ id: '' })
-    },
-    gradeYearList: {
-      type: Array,
-      default: () => []
-    },
-    gradeNumList: {
-      type: Array,
-      default: () => []
-    },
-    classArray: {
-      type: Array,
-      default: () => []
-    }
-  },
-  name: 'resetStudent',
-  emits: ['close', 'getList'],
-  setup(props, { emit }) {
-    const data = reactive({
-      uploading: false
-    });
-    const message = useMessage();
-    const foemsRef = ref();
-    const createClassForm = reactive({
-      gradeYear: null,
-      currentGradeNum: null,
-      currentClass: null,
-      subjectId: null
-    });
-    const gradeYearList = ref([] as any);
-    const subjectList = ref([] as any);
-    const submitForms = () => {
-      foemsRef.value.validate(async (error: any) => {
-        if (error) {
-          return;
-        }
-        data.uploading = true;
-        try {
-          await addClass({ ...createClassForm });
-          message.success('新增成功');
-          emit('close');
-          emit('getList');
-          data.uploading = false;
-        } catch (e) {
-          console.log(e);
-        }
-        data.uploading = false;
-      });
-    };
-
-    const getYearList = async () => {
-      try {
-        const { data } = await api_getCurrentGradeYear({});
-        const temp = [
-          {
-            label: data + 1,
-            value: data + 1
-          },
-          {
-            label: data,
-            value: data
-          }
-        ];
-        gradeYearList.value = temp;
-      } catch {
-        //
-      }
-    };
-
-    const getConfigSubject = async () => {
-      try {
-        const { data } = await getConfiguredSubjects({
-          gradeYear: createClassForm.gradeYear,
-          currentGradeNum: createClassForm.currentGradeNum,
-          currentClass: createClassForm.currentClass
-        });
-        const temp = data || [];
-        subjectList.value = temp.map((item: any) => {
-          return {
-            label: item.name,
-            value: item.id
-          };
-        });
-      } catch {
-        //
-      }
-    };
-
-    watch(
-      () => [
-        createClassForm.gradeYear,
-        createClassForm.currentGradeNum,
-        createClassForm.currentClass
-      ],
-      () => {
-        createClassForm.subjectId = null;
-        getConfigSubject();
-      }
-    );
-
-    onMounted(() => {
-      getYearList();
-    });
-
-    return () => (
-      <div class={[styles.addClass]}>
-        <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
-          <NFormItem
-            path="gradeYear"
-            rule={[
-              {
-                required: true,
-                message: '请选择学年'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: gradeYearList.value,
-                placeholder: '选择学年',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.gradeYear}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="currentGradeNum"
-            rule={[
-              {
-                required: true,
-                message: '请选择年级'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: props.gradeNumList,
-                placeholder: '选择年级',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.currentGradeNum}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="currentClass"
-            rule={[
-              {
-                required: true,
-                message: '请选择班级'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: props.classArray,
-                placeholder: '选择班级',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.currentClass}></CSelect>
-          </NFormItem>
-          <NFormItem
-            path="subjectId"
-            rule={[
-              {
-                required: true,
-                message: '请选择声部'
-              }
-            ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: subjectList.value,
-                placeholder: '选择声部',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.subjectId}></CSelect>
-          </NFormItem>
-        </NForm>
-        <NSpace class={styles.btnGroup} justify="center">
-          <NButton round onClick={() => emit('close')}>
-            取消
-          </NButton>
-          <NButton
-            round
-            loading={data.uploading}
-            onClick={() => submitForms()}
-            type="primary">
-            保存
-          </NButton>
-        </NSpace>
-      </div>
-    );
-  }
-});
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NCascader
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
+import styles from '../index.module.less';
+import CSelect from '/src/components/CSelect';
+import { addClass, getConfiguredSubjects } from '../api';
+import { api_getCurrentGradeYear } from '../../studentList/api';
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ id: '' })
+    },
+    gradeYearList: {
+      type: Array,
+      default: () => []
+    },
+    gradeNumList: {
+      type: Array,
+      default: () => []
+    },
+    classArray: {
+      type: Array,
+      default: () => []
+    }
+  },
+  name: 'resetStudent',
+  emits: ['close', 'getList'],
+  setup(props, { emit }) {
+    const data = reactive({
+      uploading: false
+    });
+    const message = useMessage();
+    const foemsRef = ref();
+    const createClassForm = reactive({
+      gradeYear: null,
+      currentGradeNum: null,
+      currentClass: null,
+      instrumentId: null
+    });
+    const gradeYearList = ref([] as any);
+    const subjectList = ref([] as any);
+    const submitForms = () => {
+      foemsRef.value.validate(async (error: any) => {
+        if (error) {
+          return;
+        }
+        data.uploading = true;
+        try {
+          await addClass({ ...createClassForm });
+          message.success('新增成功');
+          emit('close');
+          emit('getList');
+          data.uploading = false;
+        } catch (e) {
+          console.log(e);
+        }
+        data.uploading = false;
+      });
+    };
+
+    const getYearList = async () => {
+      try {
+        const { data } = await api_getCurrentGradeYear({});
+        const temp = [
+          {
+            label: data + 1,
+            value: data + 1
+          },
+          {
+            label: data,
+            value: data
+          }
+        ];
+        gradeYearList.value = temp;
+      } catch {
+        //
+      }
+    };
+
+    const getConfigSubject = async () => {
+      try {
+        const { data } = await getConfiguredSubjects({
+          gradeYear: createClassForm.gradeYear,
+          currentGradeNum: createClassForm.currentGradeNum,
+          currentClass: createClassForm.currentClass
+        });
+        const temp = data || [];
+        subjectList.value = temp;
+      } catch {
+        //
+      }
+    };
+
+    watch(
+      () => [
+        createClassForm.gradeYear,
+        createClassForm.currentGradeNum,
+        createClassForm.currentClass
+      ],
+      () => {
+        createClassForm.instrumentId = null;
+        getConfigSubject();
+      }
+    );
+
+    onMounted(() => {
+      getYearList();
+    });
+
+    return () => (
+      <div class={[styles.addClass]}>
+        <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
+          <NFormItem
+            path="gradeYear"
+            rule={[
+              {
+                required: true,
+                message: '请选择学年'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: gradeYearList.value,
+                placeholder: '选择学年',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.gradeYear}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="currentGradeNum"
+            rule={[
+              {
+                required: true,
+                message: '请选择年级'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: props.gradeNumList,
+                placeholder: '选择年级',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.currentGradeNum}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="currentClass"
+            rule={[
+              {
+                required: true,
+                message: '请选择班级'
+              }
+            ]}>
+            <CSelect
+              {...({
+                style: { width: '400px' },
+                options: props.classArray,
+                placeholder: '选择班级',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.currentClass}></CSelect>
+          </NFormItem>
+          <NFormItem
+            path="instrumentId"
+            rule={[
+              {
+                required: true,
+                message: '请选择乐器'
+              }
+            ]}>
+            {/* <CSelect
+              {...({
+                style: { width: '400px' },
+                options: subjectList.value,
+                placeholder: '选择乐器',
+                clearable: true
+              } as any)}
+              v-model:value={createClassForm.instrumentId}></CSelect> */}
+            <NCascader
+              placeholder="请选择乐器"
+              v-model:value={createClassForm.instrumentId}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              style={{ width: '400px' }}
+            />
+          </NFormItem>
+        </NForm>
+        <NSpace class={styles.btnGroup} justify="center">
+          <NButton round onClick={() => emit('close')}>
+            取消
+          </NButton>
+          <NButton
+            round
+            loading={data.uploading}
+            onClick={() => submitForms()}
+            type="primary">
+            保存
+          </NButton>
+        </NSpace>
+      </div>
+    );
+  }
+});

src/views/classList/modals/resetSubject.tsx

@@ -4,12 +4,11 @@ import {
   useMessage,
   NForm,
   NFormItem,
-  NSelect
+  NCascader
 } from 'naive-ui';
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
-import CSelect from '/src/components/CSelect';
-import { getConfiguredSubjects, resetClass } from '../api';
+import { getConfiguredSubjects, updateInstrument } from '../api';
 export default defineComponent({
   props: {
     activeRow: {
@@ -38,14 +37,14 @@ export default defineComponent({
       currentGradeNum: null,
       gradeYear: null,
       currentClass: null,
-      subjectId: null,
+      instrumentId: null,
       id: null
     });
     onMounted(() => {
       createClassForm.currentGradeNum = props.activeRow.currentGradeNum;
       createClassForm.gradeYear = props.activeRow.gradeYear;
       createClassForm.currentClass = props.activeRow.currentClass;
-      createClassForm.subjectId = props.activeRow.subjectId;
+      createClassForm.instrumentId = props.activeRow.instrumentId;
       createClassForm.id = props.activeRow.id;
 
       getConfigSubject();
@@ -57,7 +56,7 @@ export default defineComponent({
         }
         data.uploading = true;
         try {
-          await resetClass({ ...createClassForm });
+          await updateInstrument({ ...createClassForm });
           message.success('修改成功');
           emit('close');
           emit('getList');
@@ -77,12 +76,7 @@ export default defineComponent({
           currentClass: createClassForm.currentClass
         });
         const temp = data || [];
-        subjectList.value = temp.map((item: any) => {
-          return {
-            label: item.name,
-            value: item.id
-          };
-        });
+        subjectList.value = temp;
       } catch {
         //
       }
@@ -92,21 +86,27 @@ export default defineComponent({
       <div class={[styles.addClass]}>
         <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
           <NFormItem
-            path="subjectId"
+            path="instrumentId"
             rule={[
               {
                 required: true,
-                message: '请选择声部'
+                message: '请选择乐器'
               }
             ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: subjectList.value,
-                placeholder: '选择声部',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.subjectId}></CSelect>
+            <NCascader
+              placeholder="请选择乐器"
+              v-model:value={createClassForm.instrumentId}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              style={{ width: '400px' }}
+            />
           </NFormItem>
         </NForm>
         <NSpace class={styles.btnGroup} justify="center">

src/views/classList/modals/updateSubject.tsx

@@ -1,8 +1,15 @@
-import { NButton, NSpace, useMessage, NForm, NFormItem } from 'naive-ui';
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NCascader
+} from 'naive-ui';
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
 import CSelect from '/src/components/CSelect';
-import { getConfiguredSubjects, resetClass } from '../api';
+import { getConfiguredSubjects, updateInstrument } from '../api';
 import { useCatchStore } from '/src/store/modules/catchData';
 export default defineComponent({
   props: {
@@ -29,7 +36,7 @@ export default defineComponent({
       currentGradeNum: null,
       currentClass: null,
       gradeYear: null,
-      subjectId: null,
+      instrumentId: null,
       id: null
     });
 
@@ -41,12 +48,7 @@ export default defineComponent({
           currentClass: createClassForm.currentClass
         });
         const temp = data || [];
-        subjectList.value = temp.map((item: any) => {
-          return {
-            label: item.name,
-            value: item.id
-          };
-        });
+        subjectList.value = temp;
       } catch {
         //
       }
@@ -57,13 +59,13 @@ export default defineComponent({
       // subjectList.value = [
       //   { id: null, name: '选择声部' },
       //   ...catchStore.getSubjectList
-      console.log(props.activeRow, ' props.activeRow');
+      // console.log(props.activeRow, ' props.activeRow');
       // ];
 
       createClassForm.gradeYear = props.activeRow.gradeYear;
       createClassForm.currentGradeNum = props.activeRow.currentGradeNum;
       createClassForm.currentClass = props.activeRow.currentClass;
-      createClassForm.subjectId = props.activeRow.subjectId;
+      createClassForm.instrumentId = props.activeRow.instrumentId;
       createClassForm.id = props.activeRow.id;
 
       getConfigSubject();
@@ -75,13 +77,13 @@ export default defineComponent({
         }
         data.uploading = true;
         try {
-          await resetClass({ ...createClassForm });
+          await updateInstrument({ ...createClassForm });
           message.success('修改成功');
           emit('close');
           emit('confirm', {
             lastUseCoursewareId: props.activeRow.lessonCoursewareId,
             unit: props.activeRow.lessonCoursewareKnowledgeDetailId,
-            subjectId: createClassForm.subjectId,
+            instrumentId: createClassForm.instrumentId,
             name: props.activeRow.name, // 班级名称
             classGroupId: props.activeRow.id // 班级编号
           });
@@ -96,21 +98,27 @@ export default defineComponent({
       <div class={[styles.addClass]}>
         <NForm label-placement="left" model={createClassForm} ref={foemsRef}>
           <NFormItem
-            path="subjectId"
+            path="instrumentId"
             rule={[
               {
                 required: true,
-                message: '请选择声部'
+                message: '请选择乐器'
               }
             ]}>
-            <CSelect
-              {...({
-                style: { width: '400px' },
-                options: subjectList.value,
-                placeholder: '选择声部',
-                clearable: true
-              } as any)}
-              v-model:value={createClassForm.subjectId}></CSelect>
+            <NCascader
+              placeholder="请选择乐器"
+              v-model:value={createClassForm.instrumentId}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              style={{ width: '400px' }}
+            />
           </NFormItem>
         </NForm>
         <NSpace class={styles.btnGroup} justify="center">

src/views/home/modals/class-modal/index.tsx

@@ -218,9 +218,9 @@ export default defineComponent({
               ' | ' +
               lessonCourseware.lessonCoursewareKnowledgeDetailName +
               ' | ' +
-              lessonCourseware.useChapterLessonCoursewareName,
+              (lessonCourseware.useChapterLessonCoursewareName || ''),
             image: item.teacherAvatar,
-            subjectName: item.subjectName
+            subjectName: item.instrumentName
           });
         });
 

src/views/home/modals/subject-modal/index.module.less

@@ -7,11 +7,51 @@
       min-width: 156px;
     }
   }
+
+
 }
 
 
 .subjectSync {
-  padding-top: 25px;
+  padding-top: 6px;
+
+  :global {
+    .n-tabs-tab-pad {
+      width: 64px !important;
+    }
+
+    .n-tabs-nav {
+      padding: 12px 36px 20px;
+    }
+
+    .n-tabs-tab {
+      color: #8B8D98;
+      font-size: max(20px, 14Px);
+      padding-top: 12px;
+      padding-bottom: 8px;
+      line-height: 28px;
+
+      &.n-tabs-tab--active {
+        font-weight: 600 !important;
+        color: #131415 !important;
+      }
+    }
+
+    .n-tabs-tab__label {
+      z-index: 10;
+    }
+
+    .n-tabs-bar {
+      height: 10px;
+      background: linear-gradient(90deg, #77BBFF 0%, rgba(163, 231, 255, 0.22) 100%);
+      z-index: 0;
+      bottom: 8px;
+    }
+
+    .n-tab-pane {
+      padding-top: 4px !important;
+    }
+  }
 }
 
 .subjectList {
@@ -32,6 +72,13 @@
     border-radius: 24px;
     line-height: 0;
     overflow: hidden;
+
+    &::before {
+      content: '';
+      background: url('@/images/subject-bg.png') no-repeat center;
+      position: absolute;
+      inset: 0;
+    }
   }
 
   img {
@@ -40,6 +87,7 @@
     width: 127px;
     height: 127px;
     object-fit: contain;
+    position: relative;
   }
 
   .iconSelect {
@@ -52,6 +100,7 @@
   }
 
   .subjectName {
+    padding-top: 7px;
     text-align: center;
     color: #777777;
   }

src/views/home/modals/subject-modal/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, onMounted, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NScrollbar, NSpace } from 'naive-ui';
+import { NButton, NScrollbar, NSpace, NTabPane, NTabs } from 'naive-ui';
 import { useCatchStore } from '/src/store/modules/catchData';
 import iconSelect from '../../../prepare-lessons/images/icon-select.png';
 
@@ -10,6 +10,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const catchStore = useCatchStore();
 
+    const tabId = ref('' as any);
     const selectSubjectId = ref(null as any);
     const subjectList = ref([] as any);
 
@@ -20,22 +21,57 @@ export default defineComponent({
 
       emit('confirm', item);
     };
+
+    const formatSubjectList = () => {
+      const subjects = catchStore.getEnableSubjects;
+      const temp: any = [];
+      subjects.forEach((subject: any) => {
+        console.log(
+          subject.id,
+          subject.instruments,
+          tabId.value && subject.instruments && tabId.value === subject.id
+        );
+        if (tabId.value === '' && subject.instruments) {
+          temp.push(...subject.instruments);
+        } else if (
+          tabId.value &&
+          subject.instruments &&
+          Number(tabId.value) === subject.id
+        ) {
+          temp.push(...subject.instruments);
+        }
+      });
+
+      subjectList.value = temp;
+    };
     onMounted(async () => {
       // await catchStore.getSubjects();
-      await catchStore.getMusicInstrument();
-      subjectList.value = catchStore.getMusicInstruments;
-      if (subjectList.value.length > 0) {
-        selectSubjectId.value = subjectList.value[0].id;
-      }
+      await catchStore.getSubjects();
+
+      formatSubjectList();
     });
     return () => (
       <div class={styles.subjectSync}>
-        {/* <div class={styles.tips}>
-          请选择当前课件可使用的乐器
-          <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
-        </div> */}
-
-        <NScrollbar style={{ maxHeight: '60vh' }}>
+        <NTabs
+          defaultValue=""
+          paneClass={styles.paneTitle}
+          justifyContent="start"
+          paneWrapperClass={styles.paneWrapperContainer}
+          value={tabId.value}
+          onUpdate:value={(val: any) => {
+            tabId.value = val;
+            formatSubjectList();
+          }}>
+          {[{ name: '全部声部', id: '' }, ...catchStore.getEnableSubjects].map(
+            (item: any) => (
+              <NTabPane
+                name={`${item.id}`}
+                tab={item.name}
+                displayDirective="if"></NTabPane>
+            )
+          )}
+        </NTabs>
+        <NScrollbar style={{ maxHeight: '50vh', minHeight: '50vh' }}>
           <div class={styles.subjectList}>
             {subjectList.value.map((subject: any) => (
               <div

src/views/homework-record/index.tsx

@@ -1,635 +1,635 @@
-import { defineComponent, reactive, onMounted, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NAvatar,
-  NButton,
-  NDivider,
-  NForm,
-  NFormItem,
-  NImage,
-  NModal,
-  NSpace,
-  NSpin,
-  useMessage
-} from 'naive-ui';
-import SearchInput from '@/components/searchInput';
-import CDatePicker from '/src/components/CDatePicker';
-import CSelect from '@/components/CSelect';
-import add from '@/views/studentList/images/add.png';
-import { useRoute, useRouter } from 'vue-router';
-import { getGradeLevelList, getGradeYearList } from '../home/api';
-import { initCache, setCache } from '/src/hooks/use-async';
-import { classArray, getgradeNumList } from '../classList/contants';
-import teacherIcon from '@components/layout/images/teacherIcon.png';
-import Pagination from '/src/components/pagination';
-import { api_trainingList, api_withdrawTraining } from './api';
-import TheEmpty from '/src/components/TheEmpty';
-import { fscreen, getTimes } from '/src/utils';
-import dayjs from 'dayjs';
-import Train from '../prepare-lessons/components/lesson-main/train';
-import ResourceMain from '../prepare-lessons/components/resource-main';
-import { useResizeObserver } from '@vueuse/core';
-import { nextTick } from 'process';
-import PreviewWindow from '../preview-window';
-import { state as baseState } from '@/state';
-
-export const getCurrentMonth = () => {
-  return [dayjs().startOf('month').valueOf(), dayjs().endOf('month').valueOf()];
-};
-export default defineComponent({
-  name: 'homework-record',
-  setup() {
-    const state = reactive({
-      workVisiable: false,
-      resetVisiable: false,
-      resetItem: {} as any,
-      searchForm: {
-        keyword: null as any,
-        currentClass: '',
-        homeworkType: '',
-        currentGradeNum: '',
-        subjectId: '',
-        gradeYear: '',
-        gradeLevel: '',
-        homeworkObj: '',
-        status: '',
-        timer: getCurrentMonth() as any,
-        selfFlag: true
-      },
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 10,
-        pageTotal: 6
-      },
-      gradeNumList: [] as any,
-      tableList: [] as any,
-      studentVisible: false,
-      activeRow: null as any,
-      showaddClass: false,
-      popSelectYearList: [] as any,
-      popSelectLevelList: [] as any,
-      previewModal: false,
-      previewParams: {
-        type: '',
-        courseId: '',
-        subjectId: '',
-        detailId: ''
-      } as any
-    });
-    const formRef = ref();
-    const message = useMessage();
-    const router = useRouter();
-    const route = useRoute();
-    const search = () => {
-      state.pagination.page = 1;
-      getList();
-      setCache({ current: state.searchForm, saveKey: route.path });
-    };
-    state.gradeNumList = getgradeNumList();
-    const onReset = () => {
-      state.searchForm = {
-        keyword: null as any,
-        currentClass: '' as any,
-        currentGradeNum: '' as any,
-        subjectId: '' as any,
-        gradeYear: '' as any,
-        gradeLevel: '',
-        homeworkObj: '',
-        status: '',
-        timer: getCurrentMonth() as any,
-        selfFlag: true
-      };
-      if (state.popSelectYearList.length > 0) {
-        state.searchForm.gradeYear = state.popSelectYearList[1].id;
-      }
-      //
-      setCache({ current: state.searchForm, saveKey: route.path });
-      getList();
-    };
-
-    const getModalHeight = () => {
-      useResizeObserver(
-        document.querySelector('#model-homework-height') as HTMLElement,
-        (entries: any) => {
-          const entry = entries[0];
-          const { height } = entry.contentRect;
-          document.documentElement.style.setProperty(
-            '--window-page-lesson-height',
-            height + 'px'
-          );
-        }
-      );
-    };
-
-    const getList = async () => {
-      //   // classGroupList
-      state.loading = true;
-      try {
-        const res = await api_trainingList({
-          ...state.searchForm,
-          ...state.pagination,
-          ...getTimes(
-            state.searchForm.timer,
-            ['startTime', 'endTime'],
-            'YYYY-MM-DD'
-          )
-        });
-        const result = res.data.rows || [];
-        result.forEach((item: any) => {
-          let pTitle = '';
-          let eTitle = '';
-          if (
-            item.studentLessonTrainingDetails &&
-            item.studentLessonTrainingDetails.length > 0
-          ) {
-            item.studentLessonTrainingDetails.forEach((child: any) => {
-              if (child.trainingType === 'PRACTICE' && child.musicName) {
-                pTitle += pTitle
-                  ? '、《' + child.musicName + '》'
-                  : '练习曲目《' + child.musicName + '》';
-              }
-              if (child.trainingType === 'EVALUATION' && child.musicName) {
-                eTitle += eTitle
-                  ? '、《' + child.musicName + '》'
-                  : '评测曲目《' + child.musicName + '》';
-              }
-            });
-          }
-          item.pTitle = pTitle;
-          item.eTitle = eTitle;
-
-          let studentName = item.homeworkObjName;
-          if (item.homeworkObjName) {
-            const tempObjName = item.homeworkObjName.split(',');
-            if (tempObjName.length > 5) {
-              studentName =
-                tempObjName.slice(0, 5).join('、') +
-                `...等${tempObjName.length}${
-                  item.homeworkObj === 'CLASS' ? '个班级' : '人'
-                }`;
-            } else {
-              studentName = tempObjName.join('、');
-            }
-          }
-          item.studentName = studentName;
-        });
-        state.tableList = res.data.rows;
-        state.pagination.pageTotal = res.data.total;
-        state.loading = false;
-      } catch (e) {
-        state.loading = false;
-        console.log(e);
-      }
-    };
-
-    // 获取学年
-    const getYearList = async () => {
-      try {
-        const { data } = await getGradeYearList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '学年';
-        });
-        temp.unshift({
-          id: '',
-          name: '全部学年'
-        });
-        state.popSelectYearList = temp || [];
-        if (temp.length > 0 && !state.searchForm.gradeYear) {
-          state.searchForm.gradeYear = temp[1].id;
-        }
-      } catch {
-        //
-      }
-    };
-    // 获取学级
-    const getLevelList = async () => {
-      try {
-        const { data } = await getGradeLevelList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '级';
-        });
-        temp.unshift({
-          id: '',
-          name: '全部学级'
-        });
-        state.popSelectLevelList = temp || [];
-        if (temp.length > 0 && !state.searchForm.gradeLevel) {
-          state.searchForm.gradeLevel = temp[0].id;
-        }
-      } catch {
-        //
-      }
-    };
-
-    initCache({
-      current: state.searchForm,
-      callBack: (active: any) => {
-        state.searchForm = active;
-      }
-    });
-
-    const onResetRecord = async () => {
-      try {
-        await api_withdrawTraining({ lessonTrainingId: state.resetItem.id });
-        message.success('撤回成功');
-        state.resetVisiable = false;
-        search();
-      } catch {
-        //
-      }
-    };
-
-    // 预览上课
-    // courseId: '' as any, // 课件编号
-    //   subjectId: '' as any, // 声部编号
-    //   lessonCourseId: '' as any, // 教材编号
-    //   lessonCoursewareDetailId: '' as any, // 章节
-    //   detailId: '' as any, // 编号 - 课程编号
-    //   classGroupId: '' as any, // 上课时需要 班级编号
-    const onPreviewAttend = (item: any) => {
-      // 判断是否在应用里面
-      if (window.matchMedia('(display-mode: standalone)').matches) {
-        baseState.application = window.matchMedia(
-          '(display-mode: standalone)'
-        ).matches;
-        state.previewModal = true;
-        fscreen();
-        state.previewParams = {
-          type: 'preview',
-          courseId: item.chapterLessonCoursewareId,
-          subjectId: null,
-          detailId: item.lessonCoursewareKnowledgeDetailId,
-          lessonCourseId: item.lessonCoursewareId
-        };
-      } else {
-        const { href } = router.resolve({
-          path: '/attend-class',
-          query: {
-            type: 'preview',
-            courseId: item.chapterLessonCoursewareId,
-            subjectId: null,
-            detailId: item.lessonCoursewareKnowledgeDetailId,
-            lessonCourseId: item.lessonCoursewareId
-          }
-        });
-        window.open(href, +new Date() + '');
-      }
-    };
-
-    onMounted(async () => {
-      state.loading = true;
-      await getYearList();
-      await getLevelList();
-      await getList();
-      state.loading = false;
-    });
-    return () => (
-      <div class={styles.listWrap}>
-        <div class={styles.searchList}>
-          <NForm label-placement="left" inline ref={formRef}>
-            <NFormItem>
-              <SearchInput
-                {...{ placeholder: '请输入作业标题关键词' }}
-                class={styles.searchInput}
-                searchWord={state.searchForm.keyword}
-                onChangeValue={(val: string) =>
-                  (state.searchForm.keyword = val)
-                }></SearchInput>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: [
-                    { id: '', name: '全部类型' },
-                    { id: 'CLASSWORK', name: '课外作业' },
-                    { id: 'HOMEWORK', name: '课后作业' }
-                  ],
-                  placeholder: '选择类型',
-                  clearable: true,
-                  inline: true,
-                  labelField: 'name',
-                  valueField: 'id'
-                } as any)}
-                v-model:value={state.searchForm.homeworkType}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: [
-                    { id: '', name: '作业对象' },
-                    { id: 'PERSON', name: '个人' },
-                    { id: 'CLASS', name: '班级' }
-                  ],
-                  placeholder: '选择作业对象',
-                  clearable: true,
-                  inline: true,
-                  labelField: 'name',
-                  valueField: 'id'
-                } as any)}
-                v-model:value={state.searchForm.homeworkObj}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.popSelectYearList,
-                  placeholder: '选择学年',
-                  clearable: true,
-                  inline: true,
-                  labelField: 'name',
-                  valueField: 'id'
-                } as any)}
-                v-model:value={state.searchForm.gradeYear}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.popSelectLevelList,
-                  placeholder: '选择学级',
-                  clearable: true,
-                  inline: true,
-                  labelField: 'name',
-                  valueField: 'id'
-                } as any)}
-                v-model:value={state.searchForm.gradeLevel}></CSelect>
-            </NFormItem>
-
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.gradeNumList,
-                  placeholder: '选择年级',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.currentGradeNum}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: classArray,
-                  placeholder: '选择班级',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.currentClass}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: [
-                    { value: '', label: '全部状态' },
-                    { value: 0, label: '进行中' },
-                    { value: 1, label: '已结束' }
-                  ],
-                  placeholder: '选择状态',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.status}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CDatePicker
-                class={styles.CDatePickerItem}
-                separator={'-'}
-                type="daterange"
-                v-model:value={state.searchForm.timer}
-                timerValue={state.searchForm.timer}></CDatePicker>
-            </NFormItem>
-            <NFormItem>
-              <NSpace justify="end">
-                <NButton type="primary" class="searchBtn" onClick={search}>
-                  搜索
-                </NButton>
-                <NButton
-                  type="primary"
-                  ghost
-                  class="resetBtn"
-                  onClick={onReset}>
-                  重置
-                </NButton>
-              </NSpace>
-            </NFormItem>
-          </NForm>
-        </div>
-        <NButton
-          class={styles.addBtn}
-          type="primary"
-          onClick={() => {
-            state.workVisiable = true;
-            nextTick(() => {
-              getModalHeight();
-            });
-          }}
-          v-slots={{
-            icon: () => (
-              <>
-                <NImage
-                  class={styles.addBtnIcon}
-                  previewDisabled
-                  src={add}></NImage>
-              </>
-            )
-          }}>
-          布置作业
-        </NButton>
-        <div class={styles.tableWrap}>
-          <NSpin show={state.loading}>
-            <div style={{ minHeight: '40vh' }}>
-              <div class={styles.listSection}>
-                {state.tableList.map((item: any) => (
-                  <div
-                    class={styles.item}
-                    onClick={() => {
-                      router.push({
-                        path: '/homework-record-detail',
-                        query: {
-                          id: item.id,
-                          name: item.name
-                        }
-                      });
-                    }}>
-                    <div class={styles.header}>
-                      <NAvatar
-                        class={styles.navatar}
-                        round
-                        src={item.teacherAvatar || teacherIcon}
-                      />
-                      <div class={styles.userInfo}>
-                        <h2>{item.teacherName}</h2>
-                        <p>
-                          布置时间：
-                          {dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}
-                          <span> | </span>
-                          <span>
-                            截止时间：
-                            {dayjs(item.expireDate).format('YYYY-MM-DD HH:mm')}
-                          </span>
-                        </p>
-                      </div>
-                      <div class={item.status ? styles.over : styles.ing}>
-                        {/* {item.status ? '已结束' : '进行中'} */}
-                      </div>
-                    </div>
-                    <div class={styles.content}>
-                      {/* <div> */}
-                      <div class={styles.homeTitle}>
-                        <p>
-                          <span class={styles[item.homeworkType]}>
-                            {item.homeworkType === 'CLASSWORK'
-                              ? '课外'
-                              : '课后'}
-                          </span>
-                          {item.name}
-                        </p>
-
-                        <NSpace>
-                          {item.chapterLessonCoursewareId && (
-                            <NButton
-                              class={styles.errorBtn}
-                              text
-                              color="#1677FF"
-                              onClick={(e: any) => {
-                                e.stopPropagation();
-                                // state.resetVisiable = true;
-                                // state.resetItem = item;
-                                onPreviewAttend(item);
-                              }}>
-                              查看课件
-                            </NButton>
-                          )}
-
-                          {!item.status && (
-                            <NButton
-                              class={styles.errorBtn}
-                              text
-                              color="#1677FF"
-                              onClick={(e: any) => {
-                                e.stopPropagation();
-                                state.resetVisiable = true;
-                                state.resetItem = item;
-                              }}>
-                              撤回
-                            </NButton>
-                          )}
-                        </NSpace>
-                      </div>
-                      <div class={styles.homeContent}>
-                        <span class={styles.title}>作业对象：</span>
-                        <span class={styles.text}>{item.studentName}</span>
-                      </div>
-                      <div class={[styles.homeContent, styles.homeworkText]}>
-                        <span class={styles.title}>作业内容：</span>
-                        <div class={styles.pSection}>
-                          {item.pTitle && (
-                            <p class={[styles.text, styles.p1]}>
-                              {item.pTitle}
-                            </p>
-                          )}
-                          {item.eTitle && (
-                            <p class={[styles.text, styles.p2]}>
-                              {item.eTitle}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                      <div class={styles.homeSubmit}>
-                        <span class={styles.title}>已提交：</span>
-                        <span class={styles.text}>
-                          {item.trainingNum || 0}/{item.expectNum || 0}人
-                        </span>
-                        <NDivider vertical />
-                        <span class={styles.title}>提交率：</span>
-                        <span class={styles.text}>
-                          {item.trainingRate || 0}%
-                        </span>
-                        <NDivider vertical />
-                        <span class={styles.title}>合格人数：</span>
-                        <span class={styles.text}>
-                          {item.standardNum || 0}人
-                        </span>
-                        <NDivider vertical />
-                        <span class={styles.title}>合格率：</span>
-                        <span class={styles.text}>
-                          {item.qualifiedRate || 0}%
-                        </span>
-                      </div>
-                      {/* </div> */}
-                    </div>
-                  </div>
-                ))}
-              </div>
-              {state.tableList.length <= 0 && !state.loading && (
-                <TheEmpty class={styles.nowEmpty} />
-              )}
-            </div>
-          </NSpin>
-
-          {state.tableList.length > 0 && (
-            <Pagination
-              v-model:page={state.pagination.page}
-              v-model:pageSize={state.pagination.rows}
-              v-model:pageTotal={state.pagination.pageTotal}
-              onList={getList}
-              sync
-            />
-          )}
-        </div>
-        <NModal
-          v-model:show={state.resetVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable]}
-          title={'撤回作业'}>
-          <div class={styles.studentRemove}>
-            <p>
-              撤回作业后，此条作业将被删除，是否确认撤回【{state.resetItem.name}
-              】？
-            </p>
-
-            <NSpace class={styles.btnGroup} justify="center">
-              <NButton round onClick={() => (state.resetVisiable = false)}>
-                取消
-              </NButton>
-              <NButton round type="primary" onClick={onResetRecord}>
-                确定
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-
-        <NModal
-          v-model:show={state.workVisiable}
-          preset="card"
-          class={['modalTitle background', styles.workVisiable]}
-          title={'作业详情'}>
-          <div id="model-homework-height" class={styles.workContainer}>
-            <div class={styles.workTrain}>
-              <Train
-                lessonPreTraining={{
-                  title: dayjs().format('YYYY年MM月DD日') + '-课外作业'
-                }}
-                cardType={'homeworkRecord'}
-                onChange={(val: any) => {
-                  state.workVisiable = val.status;
-                  getList();
-                }}
-              />
-            </div>
-            <div class={styles.resourceMain}>
-              <ResourceMain cardType="homerowk-record" />
-            </div>
-          </div>
-        </NModal>
-
-        {/* 应用内预览或上课 */}
-        <PreviewWindow
-          v-model:show={state.previewModal}
-          type="attend"
-          params={state.previewParams}
-        />
-      </div>
-    );
-  }
-});
+import { defineComponent, reactive, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NAvatar,
+  NButton,
+  NDivider,
+  NForm,
+  NFormItem,
+  NImage,
+  NModal,
+  NSpace,
+  NSpin,
+  useMessage
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CDatePicker from '/src/components/CDatePicker';
+import CSelect from '@/components/CSelect';
+import add from '@/views/studentList/images/add.png';
+import { useRoute, useRouter } from 'vue-router';
+import { getGradeLevelList, getGradeYearList } from '../home/api';
+import { initCache, setCache } from '/src/hooks/use-async';
+import { classArray, getgradeNumList } from '../classList/contants';
+import teacherIcon from '@components/layout/images/teacherIcon.png';
+import Pagination from '/src/components/pagination';
+import { api_trainingList, api_withdrawTraining } from './api';
+import TheEmpty from '/src/components/TheEmpty';
+import { fscreen, getTimes } from '/src/utils';
+import dayjs from 'dayjs';
+import Train from '../prepare-lessons/components/lesson-main/train';
+import ResourceMain from '../prepare-lessons/components/resource-main';
+import { useResizeObserver } from '@vueuse/core';
+import { nextTick } from 'process';
+import PreviewWindow from '../preview-window';
+import { state as baseState } from '@/state';
+
+export const getCurrentMonth = () => {
+  return [dayjs().startOf('month').valueOf(), dayjs().endOf('month').valueOf()];
+};
+export default defineComponent({
+  name: 'homework-record',
+  setup() {
+    const state = reactive({
+      workVisiable: false,
+      resetVisiable: false,
+      resetItem: {} as any,
+      searchForm: {
+        keyword: null as any,
+        currentClass: '',
+        homeworkType: '',
+        currentGradeNum: '',
+        subjectId: '',
+        gradeYear: '',
+        gradeLevel: '',
+        homeworkObj: '',
+        status: '',
+        timer: getCurrentMonth() as any,
+        selfFlag: true
+      },
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 6
+      },
+      gradeNumList: [] as any,
+      tableList: [] as any,
+      studentVisible: false,
+      activeRow: null as any,
+      showaddClass: false,
+      popSelectYearList: [] as any,
+      popSelectLevelList: [] as any,
+      previewModal: false,
+      previewParams: {
+        type: '',
+        courseId: '',
+        subjectId: '',
+        detailId: ''
+      } as any
+    });
+    const formRef = ref();
+    const message = useMessage();
+    const router = useRouter();
+    const route = useRoute();
+    const search = () => {
+      state.pagination.page = 1;
+      getList();
+      setCache({ current: state.searchForm, saveKey: route.path });
+    };
+    state.gradeNumList = getgradeNumList();
+    const onReset = () => {
+      state.searchForm = {
+        keyword: null as any,
+        currentClass: '' as any,
+        currentGradeNum: '' as any,
+        subjectId: '' as any,
+        gradeYear: '' as any,
+        gradeLevel: '',
+        homeworkObj: '',
+        status: '',
+        timer: getCurrentMonth() as any,
+        selfFlag: true
+      };
+      if (state.popSelectYearList.length > 0) {
+        state.searchForm.gradeYear = state.popSelectYearList[2].id;
+      }
+      //
+      setCache({ current: state.searchForm, saveKey: route.path });
+      getList();
+    };
+
+    const getModalHeight = () => {
+      useResizeObserver(
+        document.querySelector('#model-homework-height') as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          document.documentElement.style.setProperty(
+            '--window-page-lesson-height',
+            height + 'px'
+          );
+        }
+      );
+    };
+
+    const getList = async () => {
+      //   // classGroupList
+      state.loading = true;
+      try {
+        const res = await api_trainingList({
+          ...state.searchForm,
+          ...state.pagination,
+          ...getTimes(
+            state.searchForm.timer,
+            ['startTime', 'endTime'],
+            'YYYY-MM-DD'
+          )
+        });
+        const result = res.data.rows || [];
+        result.forEach((item: any) => {
+          let pTitle = '';
+          let eTitle = '';
+          if (
+            item.studentLessonTrainingDetails &&
+            item.studentLessonTrainingDetails.length > 0
+          ) {
+            item.studentLessonTrainingDetails.forEach((child: any) => {
+              if (child.trainingType === 'PRACTICE' && child.musicName) {
+                pTitle += pTitle
+                  ? '、《' + child.musicName + '》'
+                  : '练习曲目《' + child.musicName + '》';
+              }
+              if (child.trainingType === 'EVALUATION' && child.musicName) {
+                eTitle += eTitle
+                  ? '、《' + child.musicName + '》'
+                  : '评测曲目《' + child.musicName + '》';
+              }
+            });
+          }
+          item.pTitle = pTitle;
+          item.eTitle = eTitle;
+
+          let studentName = item.homeworkObjName;
+          if (item.homeworkObjName) {
+            const tempObjName = item.homeworkObjName.split(',');
+            if (tempObjName.length > 5) {
+              studentName =
+                tempObjName.slice(0, 5).join('、') +
+                `...等${tempObjName.length}${
+                  item.homeworkObj === 'CLASS' ? '个班级' : '人'
+                }`;
+            } else {
+              studentName = tempObjName.join('、');
+            }
+          }
+          item.studentName = studentName;
+        });
+        state.tableList = res.data.rows;
+        state.pagination.pageTotal = res.data.total;
+        state.loading = false;
+      } catch (e) {
+        state.loading = false;
+        console.log(e);
+      }
+    };
+
+    // 获取学年
+    const getYearList = async () => {
+      try {
+        const { data } = await getGradeYearList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '学年';
+        });
+        temp.unshift({
+          id: '',
+          name: '全部学年'
+        });
+        state.popSelectYearList = temp || [];
+        if (temp.length > 0 && !state.searchForm.gradeYear) {
+          state.searchForm.gradeYear = temp[2].id;
+        }
+      } catch {
+        //
+      }
+    };
+    // 获取学级
+    const getLevelList = async () => {
+      try {
+        const { data } = await getGradeLevelList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '级';
+        });
+        temp.unshift({
+          id: '',
+          name: '全部学级'
+        });
+        state.popSelectLevelList = temp || [];
+        if (temp.length > 0 && !state.searchForm.gradeLevel) {
+          state.searchForm.gradeLevel = temp[0].id;
+        }
+      } catch {
+        //
+      }
+    };
+
+    initCache({
+      current: state.searchForm,
+      callBack: (active: any) => {
+        state.searchForm = active;
+      }
+    });
+
+    const onResetRecord = async () => {
+      try {
+        await api_withdrawTraining({ lessonTrainingId: state.resetItem.id });
+        message.success('撤回成功');
+        state.resetVisiable = false;
+        search();
+      } catch {
+        //
+      }
+    };
+
+    // 预览上课
+    // courseId: '' as any, // 课件编号
+    //   subjectId: '' as any, // 声部编号
+    //   lessonCourseId: '' as any, // 教材编号
+    //   lessonCoursewareDetailId: '' as any, // 章节
+    //   detailId: '' as any, // 编号 - 课程编号
+    //   classGroupId: '' as any, // 上课时需要 班级编号
+    const onPreviewAttend = (item: any) => {
+      // 判断是否在应用里面
+      if (window.matchMedia('(display-mode: standalone)').matches) {
+        baseState.application = window.matchMedia(
+          '(display-mode: standalone)'
+        ).matches;
+        state.previewModal = true;
+        fscreen();
+        state.previewParams = {
+          type: 'preview',
+          courseId: item.chapterLessonCoursewareId,
+          subjectId: null,
+          detailId: item.lessonCoursewareKnowledgeDetailId,
+          lessonCourseId: item.lessonCoursewareId
+        };
+      } else {
+        const { href } = router.resolve({
+          path: '/attend-class',
+          query: {
+            type: 'preview',
+            courseId: item.chapterLessonCoursewareId,
+            instrumentId: null,
+            detailId: item.lessonCoursewareKnowledgeDetailId,
+            lessonCourseId: item.lessonCoursewareId
+          }
+        });
+        window.open(href, +new Date() + '');
+      }
+    };
+
+    onMounted(async () => {
+      state.loading = true;
+      await getYearList();
+      await getLevelList();
+      await getList();
+      state.loading = false;
+    });
+    return () => (
+      <div class={styles.listWrap}>
+        <div class={styles.searchList}>
+          <NForm label-placement="left" inline ref={formRef}>
+            <NFormItem>
+              <SearchInput
+                {...{ placeholder: '请输入作业标题关键词' }}
+                class={styles.searchInput}
+                searchWord={state.searchForm.keyword}
+                onChangeValue={(val: string) =>
+                  (state.searchForm.keyword = val)
+                }></SearchInput>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    { id: '', name: '全部类型' },
+                    { id: 'CLASSWORK', name: '课外作业' },
+                    { id: 'HOMEWORK', name: '课后作业' }
+                  ],
+                  placeholder: '选择类型',
+                  clearable: true,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.homeworkType}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    { id: '', name: '作业对象' },
+                    { id: 'PERSON', name: '个人' },
+                    { id: 'CLASS', name: '班级' }
+                  ],
+                  placeholder: '选择作业对象',
+                  clearable: true,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.homeworkObj}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.popSelectYearList,
+                  placeholder: '选择学年',
+                  clearable: true,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.gradeYear}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.popSelectLevelList,
+                  placeholder: '选择学级',
+                  clearable: true,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.gradeLevel}></CSelect>
+            </NFormItem>
+
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.gradeNumList,
+                  placeholder: '选择年级',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.currentGradeNum}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: classArray,
+                  placeholder: '选择班级',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.currentClass}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: [
+                    { value: '', label: '全部状态' },
+                    { value: 0, label: '进行中' },
+                    { value: 1, label: '已结束' }
+                  ],
+                  placeholder: '选择状态',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.status}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CDatePicker
+                class={styles.CDatePickerItem}
+                separator={'-'}
+                type="daterange"
+                v-model:value={state.searchForm.timer}
+                timerValue={state.searchForm.timer}></CDatePicker>
+            </NFormItem>
+            <NFormItem>
+              <NSpace justify="end">
+                <NButton type="primary" class="searchBtn" onClick={search}>
+                  搜索
+                </NButton>
+                <NButton
+                  type="primary"
+                  ghost
+                  class="resetBtn"
+                  onClick={onReset}>
+                  重置
+                </NButton>
+              </NSpace>
+            </NFormItem>
+          </NForm>
+        </div>
+        <NButton
+          class={styles.addBtn}
+          type="primary"
+          onClick={() => {
+            state.workVisiable = true;
+            nextTick(() => {
+              getModalHeight();
+            });
+          }}
+          v-slots={{
+            icon: () => (
+              <>
+                <NImage
+                  class={styles.addBtnIcon}
+                  previewDisabled
+                  src={add}></NImage>
+              </>
+            )
+          }}>
+          布置作业
+        </NButton>
+        <div class={styles.tableWrap}>
+          <NSpin show={state.loading}>
+            <div style={{ minHeight: '40vh' }}>
+              <div class={styles.listSection}>
+                {state.tableList.map((item: any) => (
+                  <div
+                    class={styles.item}
+                    onClick={() => {
+                      router.push({
+                        path: '/homework-record-detail',
+                        query: {
+                          id: item.id,
+                          name: item.name
+                        }
+                      });
+                    }}>
+                    <div class={styles.header}>
+                      <NAvatar
+                        class={styles.navatar}
+                        round
+                        src={item.teacherAvatar || teacherIcon}
+                      />
+                      <div class={styles.userInfo}>
+                        <h2>{item.teacherName}</h2>
+                        <p>
+                          布置时间：
+                          {dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}
+                          <span> | </span>
+                          <span>
+                            截止时间：
+                            {dayjs(item.expireDate).format('YYYY-MM-DD HH:mm')}
+                          </span>
+                        </p>
+                      </div>
+                      <div class={item.status ? styles.over : styles.ing}>
+                        {/* {item.status ? '已结束' : '进行中'} */}
+                      </div>
+                    </div>
+                    <div class={styles.content}>
+                      {/* <div> */}
+                      <div class={styles.homeTitle}>
+                        <p>
+                          <span class={styles[item.homeworkType]}>
+                            {item.homeworkType === 'CLASSWORK'
+                              ? '课外'
+                              : '课后'}
+                          </span>
+                          {item.name}
+                        </p>
+
+                        <NSpace>
+                          {item.chapterLessonCoursewareId && (
+                            <NButton
+                              class={styles.errorBtn}
+                              text
+                              color="#1677FF"
+                              onClick={(e: any) => {
+                                e.stopPropagation();
+                                // state.resetVisiable = true;
+                                // state.resetItem = item;
+                                onPreviewAttend(item);
+                              }}>
+                              查看课件
+                            </NButton>
+                          )}
+
+                          {!item.status && (
+                            <NButton
+                              class={styles.errorBtn}
+                              text
+                              color="#1677FF"
+                              onClick={(e: any) => {
+                                e.stopPropagation();
+                                state.resetVisiable = true;
+                                state.resetItem = item;
+                              }}>
+                              撤回
+                            </NButton>
+                          )}
+                        </NSpace>
+                      </div>
+                      <div class={styles.homeContent}>
+                        <span class={styles.title}>作业对象：</span>
+                        <span class={styles.text}>{item.studentName}</span>
+                      </div>
+                      <div class={[styles.homeContent, styles.homeworkText]}>
+                        <span class={styles.title}>作业内容：</span>
+                        <div class={styles.pSection}>
+                          {item.pTitle && (
+                            <p class={[styles.text, styles.p1]}>
+                              {item.pTitle}
+                            </p>
+                          )}
+                          {item.eTitle && (
+                            <p class={[styles.text, styles.p2]}>
+                              {item.eTitle}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                      <div class={styles.homeSubmit}>
+                        <span class={styles.title}>已提交：</span>
+                        <span class={styles.text}>
+                          {item.trainingNum || 0}/{item.expectNum || 0}人
+                        </span>
+                        <NDivider vertical />
+                        <span class={styles.title}>提交率：</span>
+                        <span class={styles.text}>
+                          {item.trainingRate || 0}%
+                        </span>
+                        <NDivider vertical />
+                        <span class={styles.title}>合格人数：</span>
+                        <span class={styles.text}>
+                          {item.standardNum || 0}人
+                        </span>
+                        <NDivider vertical />
+                        <span class={styles.title}>合格率：</span>
+                        <span class={styles.text}>
+                          {item.qualifiedRate || 0}%
+                        </span>
+                      </div>
+                      {/* </div> */}
+                    </div>
+                  </div>
+                ))}
+              </div>
+              {state.tableList.length <= 0 && !state.loading && (
+                <TheEmpty class={styles.nowEmpty} />
+              )}
+            </div>
+          </NSpin>
+
+          {state.tableList.length > 0 && (
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              sync
+            />
+          )}
+        </div>
+        <NModal
+          v-model:show={state.resetVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'撤回作业'}>
+          <div class={styles.studentRemove}>
+            <p>
+              撤回作业后，此条作业将被删除，是否确认撤回【{state.resetItem.name}
+              】？
+            </p>
+
+            <NSpace class={styles.btnGroup} justify="center">
+              <NButton round onClick={() => (state.resetVisiable = false)}>
+                取消
+              </NButton>
+              <NButton round type="primary" onClick={onResetRecord}>
+                确定
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+
+        <NModal
+          v-model:show={state.workVisiable}
+          preset="card"
+          class={['modalTitle background', styles.workVisiable]}
+          title={'作业详情'}>
+          <div id="model-homework-height" class={styles.workContainer}>
+            <div class={styles.workTrain}>
+              <Train
+                lessonPreTraining={{
+                  title: dayjs().format('YYYY年MM月DD日') + '-课外作业'
+                }}
+                cardType={'homeworkRecord'}
+                onChange={(val: any) => {
+                  state.workVisiable = val.status;
+                  getList();
+                }}
+              />
+            </div>
+            <div class={styles.resourceMain}>
+              <ResourceMain cardType="homerowk-record" />
+            </div>
+          </div>
+        </NModal>
+
+        {/* 应用内预览或上课 */}
+        <PreviewWindow
+          v-model:show={state.previewModal}
+          type="attend"
+          params={state.previewParams}
+        />
+      </div>
+    );
+  }
+});

src/views/natural-resources/components/my-collect/index.tsx

@@ -51,6 +51,7 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.content,
             subjectId: row.subjectIds,
             enableFlag: row.enableFlag ? 1 : 0,
@@ -68,19 +69,14 @@ export default defineComponent({
     const showGuide = ref(false);
     const onSearch = async (item: any) => {
       state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
+
+      const { subjectId, ...res } = item;
+      state.searchGroup = Object.assign(state.searchGroup, {
+        ...res,
+        musicalInstrumentId: subjectId,
+        subjectId: null
+      });
+
       getList();
     };
     // 收藏

src/views/natural-resources/components/my-collect/search-group-resources.tsx

@@ -1,268 +1,261 @@
-import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NForm,
-  NFormItem,
-  NImage,
-  NPopselect,
-  NSpace
-} from 'naive-ui';
-import TheSearch from '/src/components/TheSearch';
-import { resourceTypeArray } from '/src/utils/searchArray';
-import { useCatchStore } from '/src/store/modules/catchData';
-import isCollaose from '../../images/isCollaose.png';
-
-export default defineComponent({
-  name: 'search-group',
-  emits: ['search'],
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const resourceList = ref([] as any[]);
-    const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      bookVersionId: null,
-      subjectId: null
-    });
-    const state = reactive({
-      tempSubjectId: null
-    });
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const collapseWrapRef = ref();
-    const divDomList = ref([] as any);
-    const orginHeight = ref(0);
-    const line = ref(0);
-    const isCollapse = ref(false);
-    const loadingCollapse = ref(false); // 是否加载完成
-    const musicCateRef = (el: any) => {
-      if (el?.selfElRef) {
-        divDomList.value.push(el.selfElRef.parentNode);
-      }
-    };
-    const setCollapse = (flag: boolean) => {
-      isCollapse.value = flag;
-      getLive();
-    };
-    const getLive = () => {
-      try {
-        divDomList.value = [...new Set(divDomList.value)];
-        let offsetLeft = -1;
-        divDomList.value.forEach((item: any, index: number) => {
-          if (index === 0) {
-            line.value = 1;
-            offsetLeft = item.offsetLeft;
-          } else if (item.offsetLeft === offsetLeft && index != 0) {
-            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
-            line.value++;
-          }
-          if (!isCollapse.value) {
-            if (line.value > 1) {
-              //从第3行开始 隐藏标签
-              item.style.display = 'none';
-              // 显示展开按钮  class名chu是在前面动态添加的
-            } else {
-              item.style.display = 'block';
-            }
-          } else {
-            item.style.display = 'block';
-          }
-        });
-        loadingCollapse.value = true;
-      } catch {
-        //
-      }
-    };
-
-    const selectChildObj = (item: any) => {
-      const obj: any = {};
-      item?.forEach((child: any) => {
-        if (child.id === forms.subjectId) {
-          obj.selected = true;
-          obj.name = child.name;
-        }
-      });
-      return obj;
-    };
-
-    onMounted(async () => {
-      resourceList.value = [
-        // {
-        //   label: '全部',
-        //   value: ''
-        // },
-        ...resourceTypeArray
-      ];
-
-      // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
-      // 获取声部列表
-      await catchStore.getSubjects();
-
-      // 这里开始
-      // if (forms.type === 'MUSIC') {
-      //   orginHeight.value = collapseWrapRef.value.offsetHeight;
-      //   // 默认隐藏
-      //   getLive();
-      // }
-    });
-    return () => (
-      <div class={styles.searchGroup}>
-        <div class={styles.searchCatatory}>
-          <NSpace size="small" class={styles.btnType}>
-            {resourceList.value.map((item: any) => (
-              <NButton
-                type={forms.type === item.value ? 'primary' : 'default'}
-                secondary={forms.type === item.value ? false : true}
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.type = item.value;
-                  forms.subjectId = null;
-                  onSearch();
-
-                  nextTick(() => {
-                    if (forms.type === 'MUSIC') {
-                      orginHeight.value = collapseWrapRef.value?.offsetHeight;
-                      // hiddenHeight.value =
-                      //   collapseWrapRef.value.offsetHeight / line.value || 0;
-                      // 默认隐藏
-                      getLive();
-                    } else {
-                      divDomList.value = [];
-                    }
-                  });
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace>
-        </div>
-        <NForm labelAlign="left" labelPlacement="left">
-          {/* {forms.type === 'MUSIC' && (
-            <div class={[styles.collapsSection]}>
-              <NFormItem label="教材：">
-                <div
-                  class={[
-                    styles.collapseWrap,
-                    loadingCollapse.value ? '' : styles.hideButton,
-                    isCollapse.value ? '' : styles.isHidden
-                  ]}
-                  ref={collapseWrapRef}>
-                  <NSpace class={[styles.spaceSection]}>
-                    {catchStore.getAllMusicCategories.map((music: any) => (
-                      <NButton
-                        data-id={music.id}
-                        ref={musicCateRef}
-                        secondary={forms.bookVersionId === music.id}
-                        quaternary={forms.bookVersionId !== music.id}
-                        strong
-                        focusable={false}
-                        type={
-                          forms.bookVersionId === music.id
-                            ? 'primary'
-                            : 'default'
-                        }
-                        onClick={() => {
-                          forms.bookVersionId = music.id;
-                          onSearch();
-                        }}>
-                        {music.name}
-                      </NButton>
-                    ))}
-                    {line.value > 1 && (
-                      <div
-                        style={{
-                          height: 'var(--n-blank-height)',
-                          position: 'absolute',
-                          display: 'flex',
-                          alignItems: 'center'
-                        }}
-                        onClick={() => {
-                          setCollapse(!isCollapse.value);
-                        }}>
-                        <NImage
-                          previewDisabled
-                          src={isCollaose}
-                          class={[
-                            styles.collaoseBtn,
-                            isCollapse.value ? styles.isStart : ''
-                          ]}></NImage>
-                      </div>
-                    )}
-                  </NSpace>
-                </div>
-              </NFormItem>
-            </div>
-          )} */}
-          <NFormItem label="声部：">
-            <NSpace class={styles.spaceSection2}>
-              {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments &&
-                subject.instruments.length > 1 &&
-                forms.type === 'MUSIC' ? (
-                  <NPopselect
-                    options={subject.instruments}
-                    trigger="hover"
-                    v-model:value={state.tempSubjectId}
-                    onUpdate:value={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = state.tempSubjectId;
-                      }
-                      onSearch();
-                    }}
-                    key={subject.value}
-                    class={[styles.popSelect]}>
-                    <span
-                      class={[
-                        styles.textBtn,
-                        selectChildObj(subject.instruments).selected &&
-                          styles.textBtnActive
-                      ]}>
-                      {selectChildObj(subject.instruments).name || subject.name}
-                      <i class={styles.iconArrow}></i>
-                    </span>
-                  </NPopselect>
-                ) : (
-                  <span
-                    class={[
-                      styles.textBtn,
-                      (forms.type === 'MUSIC'
-                        ? forms.subjectId === subject.value
-                        : forms.subjectId === subject.id) &&
-                        styles.textBtnActive
-                    ]}
-                    onClick={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = subject.value;
-                      } else {
-                        forms.subjectId = subject.id;
-                      }
-                      state.tempSubjectId = null;
-                      onSearch();
-                    }}>
-                    {subject.name}
-                  </span>
-                )
-              )}
-            </NSpace>
-          </NFormItem>
-
-          <TheSearch
-            class={styles.inputSearch}
-            round
-            onSearch={(val: string) => {
-              forms.name = val;
-              onSearch();
-            }}
-          />
-        </NForm>
-      </div>
-    );
-  }
-});
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace
+} from 'naive-ui';
+import TheSearch from '/src/components/TheSearch';
+import { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+import isCollaose from '../../images/isCollaose.png';
+
+export default defineComponent({
+  name: 'search-group',
+  emits: ['search'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const resourceList = ref([] as any[]);
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+    const state = reactive({
+      tempSubjectId: null
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const collapseWrapRef = ref();
+    const divDomList = ref([] as any);
+    const orginHeight = ref(0);
+    const line = ref(0);
+    const isCollapse = ref(false);
+    const loadingCollapse = ref(false); // 是否加载完成
+    const musicCateRef = (el: any) => {
+      if (el?.selfElRef) {
+        divDomList.value.push(el.selfElRef.parentNode);
+      }
+    };
+    const setCollapse = (flag: boolean) => {
+      isCollapse.value = flag;
+      getLive();
+    };
+    const getLive = () => {
+      try {
+        divDomList.value = [...new Set(divDomList.value)];
+        let offsetLeft = -1;
+        divDomList.value.forEach((item: any, index: number) => {
+          if (index === 0) {
+            line.value = 1;
+            offsetLeft = item.offsetLeft;
+          } else if (item.offsetLeft === offsetLeft && index != 0) {
+            // 如果某个标签的offsetLeft和第一个标签的offsetLeft相等  说明增加了一行
+            line.value++;
+          }
+          if (!isCollapse.value) {
+            if (line.value > 1) {
+              //从第3行开始 隐藏标签
+              item.style.display = 'none';
+              // 显示展开按钮  class名chu是在前面动态添加的
+            } else {
+              item.style.display = 'block';
+            }
+          } else {
+            item.style.display = 'block';
+          }
+        });
+        loadingCollapse.value = true;
+      } catch {
+        //
+      }
+    };
+
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.subjectId) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
+    onMounted(async () => {
+      resourceList.value = [
+        // {
+        //   label: '全部',
+        //   value: ''
+        // },
+        ...resourceTypeArray
+      ];
+
+      // 获取教材分类列表
+      await catchStore.getMusicSheetCategory();
+      // 获取声部列表
+      await catchStore.getSubjects();
+
+      // 这里开始
+      // if (forms.type === 'MUSIC') {
+      //   orginHeight.value = collapseWrapRef.value.offsetHeight;
+      //   // 默认隐藏
+      //   getLive();
+      // }
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={styles.searchCatatory}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceList.value.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  forms.subjectId = null;
+                  state.tempSubjectId = null;
+                  onSearch();
+
+                  nextTick(() => {
+                    if (forms.type === 'MUSIC') {
+                      orginHeight.value = collapseWrapRef.value?.offsetHeight;
+                      // hiddenHeight.value =
+                      //   collapseWrapRef.value.offsetHeight / line.value || 0;
+                      // 默认隐藏
+                      getLive();
+                    } else {
+                      divDomList.value = [];
+                    }
+                  });
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+        </div>
+        <NForm labelAlign="left" labelPlacement="left">
+          {/* {forms.type === 'MUSIC' && (
+            <div class={[styles.collapsSection]}>
+              <NFormItem label="教材：">
+                <div
+                  class={[
+                    styles.collapseWrap,
+                    loadingCollapse.value ? '' : styles.hideButton,
+                    isCollapse.value ? '' : styles.isHidden
+                  ]}
+                  ref={collapseWrapRef}>
+                  <NSpace class={[styles.spaceSection]}>
+                    {catchStore.getAllMusicCategories.map((music: any) => (
+                      <NButton
+                        data-id={music.id}
+                        ref={musicCateRef}
+                        secondary={forms.bookVersionId === music.id}
+                        quaternary={forms.bookVersionId !== music.id}
+                        strong
+                        focusable={false}
+                        type={
+                          forms.bookVersionId === music.id
+                            ? 'primary'
+                            : 'default'
+                        }
+                        onClick={() => {
+                          forms.bookVersionId = music.id;
+                          onSearch();
+                        }}>
+                        {music.name}
+                      </NButton>
+                    ))}
+                    {line.value > 1 && (
+                      <div
+                        style={{
+                          height: 'var(--n-blank-height)',
+                          position: 'absolute',
+                          display: 'flex',
+                          alignItems: 'center'
+                        }}
+                        onClick={() => {
+                          setCollapse(!isCollapse.value);
+                        }}>
+                        <NImage
+                          previewDisabled
+                          src={isCollaose}
+                          class={[
+                            styles.collaoseBtn,
+                            isCollapse.value ? styles.isStart : ''
+                          ]}></NImage>
+                      </div>
+                    )}
+                  </NSpace>
+                </div>
+              </NFormItem>
+            </div>
+          )} */}
+          <NFormItem label="乐器：">
+            <NSpace class={styles.spaceSection2}>
+              {catchStore.getSubjectInstruments.map((subject: any) =>
+                subject.instruments && subject.instruments.length > 1 ? (
+                  <NPopselect
+                    options={subject.instruments}
+                    trigger="hover"
+                    scrollable
+                    v-model:value={state.tempSubjectId}
+                    onUpdate:value={() => {
+                      forms.subjectId = state.tempSubjectId;
+
+                      onSearch();
+                    }}
+                    key={subject.value}
+                    class={[styles.popSelect]}>
+                    <span
+                      class={[
+                        styles.textBtn,
+                        selectChildObj(subject.instruments).selected &&
+                          styles.textBtnActive
+                      ]}>
+                      {selectChildObj(subject.instruments).name || subject.name}
+                      <i class={styles.iconArrow}></i>
+                    </span>
+                  </NPopselect>
+                ) : (
+                  <span
+                    class={[
+                      styles.textBtn,
+                      forms.subjectId === subject.value && styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.subjectId = subject.value;
+
+                      state.tempSubjectId = null;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                )
+              )}
+            </NSpace>
+          </NFormItem>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.name = val;
+              onSearch();
+            }}
+          />
+        </NForm>
+      </div>
+    );
+  }
+});

src/views/natural-resources/components/my-resources/index.tsx

@@ -83,8 +83,10 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.content,
-            subjectId: row.subjectIds,
+            // subjectId: row.subjectIds,
+            instrumentIds: row.instrumentIds,
             sourceFrom: row.sourceFrom,
             enableFlag: row.enableFlag ? 1 : 0,
             openFlag: row.openFlag
@@ -126,19 +128,13 @@ export default defineComponent({
 
     const onSearch = async (item: any) => {
       state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
+
+      const { subjectId, ...res } = item;
+      state.searchGroup = Object.assign(state.searchGroup, {
+        ...res,
+        musicalInstrumentId: subjectId,
+        subjectId: null
+      });
 
       getList();
     };
@@ -194,7 +190,7 @@ export default defineComponent({
             // 修改
             const list: any[] = [];
             state.tableList.forEach((item: any) => {
-              if (state.editIds.indexOf(item.id) > -1) {
+              if (state.editIds.indexOf(item.id) > -1 && item.delFlag !== 1) {
                 list.push(item);
               }
             });
@@ -215,7 +211,7 @@ export default defineComponent({
                 state.tableList.forEach((item: any) => {
                   if (state.editOverIds.includes(item.id)) {
                     body.push({
-                      subjectIds: item.subjectId,
+                      instrumentIds: item.instrumentIds,
                       openFlag: item.openFlag,
                       coverImg: item.coverImg,
                       name: item.title,
@@ -387,7 +383,7 @@ export default defineComponent({
                   if (item) {
                     table.openFlag = item.openFlag;
                     table.title = item.name;
-                    table.subjectId = item.subjectIds;
+                    table.instrumentIds = item.instrumentIds;
                     table.content = item.content;
                     table.coverImg = item.coverImg;
 
@@ -418,7 +414,7 @@ export default defineComponent({
               const temp: any = [];
               list.forEach((item: any) => {
                 temp.push({
-                  subjectIds: null,
+                  instrumentIds: null,
                   openFlag: false,
                   coverImg: item.coverImg,
                   title: item.name || '',

src/views/natural-resources/components/my-resources/save-modal/index.tsx

@@ -103,7 +103,15 @@ export default defineComponent({
       // 文件大小
       let isLt2M = true;
 
-      const allowedExtensions = ['jpg', 'jpeg', 'png', 'mp4', 'ppt', 'pptx'];
+      const allowedExtensions = [
+        'jpg',
+        'jpeg',
+        'png',
+        'mp4',
+        'ppt',
+        'pptx',
+        'mp3'
+      ];
       if (!isAllowedFileType(file.file.name, allowedExtensions)) {
         message.error('文件格式不支持');
         return false;

src/views/natural-resources/components/my-resources/search-group-resources.tsx

@@ -99,6 +99,7 @@ export default defineComponent({
                   }
                   forms.type = item.value;
                   forms.subjectId = null;
+                  state.tempSubjectId = null;
 
                   onSearch();
                 }}>
@@ -203,15 +204,14 @@ export default defineComponent({
           </NSpace>
         </div>
         <NForm labelAlign="left" labelPlacement="left">
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection2}>
               {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments &&
-                subject.instruments.length > 1 &&
-                forms.type === 'MUSIC' ? (
+                subject.instruments && subject.instruments.length > 1 ? (
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={state.tempSubjectId}
                     onUpdate:value={() => {
                       if (state.tempSubjectId !== subject.value) {
@@ -219,9 +219,9 @@ export default defineComponent({
                         state.isSelectAll = false;
                         emit('edit', state.isEdit);
                       }
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = state.tempSubjectId;
-                      }
+                      // if (forms.type === 'MUSIC') {
+                      forms.subjectId = state.tempSubjectId;
+                      // }
                       onSearch();
                     }}
                     key={subject.value}
@@ -240,17 +240,11 @@ export default defineComponent({
                   <span
                     class={[
                       styles.textBtn,
-                      (forms.type === 'MUSIC'
-                        ? forms.subjectId === subject.value
-                        : forms.subjectId === subject.id) &&
-                        styles.textBtnActive
+                      forms.subjectId === subject.value && styles.textBtnActive
                     ]}
                     onClick={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = subject.value;
-                      } else {
-                        forms.subjectId = subject.id;
-                      }
+                      forms.subjectId = subject.value;
+
                       state.tempSubjectId = null;
                       onSearch();
                     }}>

src/views/natural-resources/components/my-resources/upload-modal/index.tsx

@@ -9,6 +9,7 @@ import {
 import styles from './index.module.less';
 import {
   NButton,
+  NCascader,
   NForm,
   NFormItem,
   NImage,
@@ -76,7 +77,7 @@ export default defineComponent({
       uploading: false,
       uploadUrl: '',
       name: '',
-      subjectIds: [] as any
+      instrumentIds: [] as any
     });
     const changeCover = reactive({
       uploadCoverStatus: false,
@@ -120,7 +121,7 @@ export default defineComponent({
           const body: any[] = [];
           uploadForms.list.forEach(item => {
             body.push({
-              subjectIds: item.subjectIds.join(','),
+              instrumentIds: item.instrumentIds.join(','),
               openFlag: item.openFlag,
               coverImg: item.coverImg,
               name: item.name,
@@ -167,10 +168,8 @@ export default defineComponent({
       const temps: any[] = [];
       list.forEach((item: any) => {
         temps.push({
-          subjectIds: item.subjectId
-            ? item.subjectId
-                .split(',')
-                .map((subjectId: any) => Number(subjectId))
+          instrumentIds: item.instrumentIds
+            ? item.instrumentIds.split(',').map((instrument: any) => instrument)
             : [],
           openFlag: item.openFlag,
           coverImg: item.coverImg,
@@ -191,9 +190,18 @@ export default defineComponent({
 
     // 全选
     const chioseAll = (item: any, list: any) => {
-      item.subjectIds = list.map((item: any) => {
-        return item.id;
+      // item.instrumentIds = list.map((item: any) => {
+      //   return item.id;
+      // }) as any;
+      const ids = [] as any;
+      list.map((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((c: any) => {
+            ids.push(c.value);
+          });
+        }
       }) as any;
+      item.instrumentIds = ids;
     };
     return () => (
       <div class={styles.uploadModal}>
@@ -232,18 +240,23 @@ export default defineComponent({
                     />
 
                     <div class={styles.commonType}>
-                      <NButton
-                        class={styles.changeCover}
-                        type="default"
-                        bordered={false}
-                        onClick={() => {
-                          changeCover.uploadIndex = index;
-                          changeCover.uploadImg = item.coverImg;
-                          changeCover.uploadType = item.type;
-                          changeCover.uploadCoverStatus = true;
-                        }}>
-                        更换封面
-                      </NButton>
+                      {item.type !== 'IMG' ? (
+                        <NButton
+                          class={styles.changeCover}
+                          type="default"
+                          bordered={false}
+                          onClick={() => {
+                            changeCover.uploadIndex = index;
+                            changeCover.uploadImg = item.coverImg;
+                            changeCover.uploadType = item.type;
+                            changeCover.uploadCoverStatus = true;
+                          }}>
+                          更换封面
+                        </NButton>
+                      ) : (
+                        <span></span>
+                      )}
+
                       <div>
                         是否公开
                         <NSwitch
@@ -275,25 +288,30 @@ export default defineComponent({
                     />
                   </NFormItem>
                   <NFormItem
-                    path={`list[${index}].subjectIds`}
+                    path={`list[${index}].instrumentIds`}
                     showFeedback={false}
                     rule={[
                       {
                         required: true,
-                        message: '请选择素材可用声部',
+                        message: '请选择素材可用乐器',
                         trigger: 'change',
                         type: 'array'
                       }
                     ]}>
-                    <NSelect
-                      v-model:value={item.subjectIds}
-                      placeholder="请选择素材可用声部(可多选)"
-                      options={catchStore.getSubjectList}
+                    <NCascader
+                      v-model:value={item.instrumentIds}
+                      placeholder="请选择素材可用乐器(可多选)"
+                      options={catchStore.getEnableSubjects}
+                      checkStrategy="child"
+                      showPath={false}
+                      childrenField="instruments"
+                      expandTrigger="hover"
                       labelField="name"
                       valueField="id"
-                      multiple
-                      maxTagCount={2}
                       clearable
+                      filterable
+                      multiple
+                      maxTagCount="responsive"
                       v-slots={{
                         action: () => (
                           <>
@@ -301,7 +319,7 @@ export default defineComponent({
                               text
                               style=" --n-width: 100% "
                               onClick={() =>
-                                chioseAll(item, catchStore.getSubjectList)
+                                chioseAll(item, catchStore.getEnableSubjects)
                               }>
                               全选
                             </NButton>
@@ -331,7 +349,7 @@ export default defineComponent({
                     onFinished={(val: any) => {
                       console.log(val, 'val');
                       uploadList.value.push({
-                        subjectIds: uploadForms.subjectIds || [],
+                        instrumentIds: uploadForms.instrumentIds || [],
                         openFlag: true,
                         coverImg: val.coverImg,
                         name: uploadForms.name || '',
@@ -340,7 +358,7 @@ export default defineComponent({
                         content: val.content
                       });
                       // uploadForms.list.push({
-                      //   subjectIds: uploadForms.subjectIds || [],
+                      //   instrumentIds: uploadForms.instrumentIds || [],
                       //   openFlag: true,
                       //   coverImg: val.coverImg,
                       //   name: uploadForms.name || '',
@@ -353,7 +371,7 @@ export default defineComponent({
                         uploadList.value = [];
                         uploadForms.uploadUrl = '';
                         uploadForms.name = '';
-                        uploadForms.subjectIds = [];
+                        uploadForms.instrumentIds = [];
                         uploadRef.value.handleClearFile();
                       }, 1000);
                     }}
@@ -368,7 +386,7 @@ export default defineComponent({
                   </NFormItem>
                   <NFormItem showFeedback={false}>
                     <NSelect
-                      v-model:value={uploadForms.subjectIds}
+                      v-model:value={uploadForms.instrumentIds}
                       placeholder="请选择素材可用声部(可多选)"
                       options={catchStore.getSubjectList}
                       labelField="name"

src/views/natural-resources/components/share-resources/index.tsx

@@ -54,6 +54,7 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.content
           });
         });
@@ -68,19 +69,14 @@ export default defineComponent({
 
     const onSearch = async (item: any) => {
       state.pagination.page = 1;
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
+
+      const { subjectId, ...res } = item;
+      state.searchGroup = Object.assign(state.searchGroup, {
+        ...res,
+        musicalInstrumentId: subjectId,
+        subjectId: null
+      });
+
       getList();
     };
 

src/views/natural-resources/components/share-resources/search-group-resources.tsx

@@ -115,6 +115,7 @@ export default defineComponent({
                 onClick={() => {
                   forms.type = item.value;
                   forms.subjectId = null;
+                  state.tempSubjectId = null;
 
                   onSearch();
 
@@ -201,20 +202,17 @@ export default defineComponent({
             </div>
           )}
 
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection}>
               {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments &&
-                subject.instruments.length > 1 &&
-                forms.type === 'MUSIC' ? (
+                subject.instruments && subject.instruments.length > 1 ? (
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={state.tempSubjectId}
                     onUpdate:value={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = state.tempSubjectId;
-                      }
+                      forms.subjectId = state.tempSubjectId;
                       onSearch();
                     }}
                     key={subject.value}
@@ -233,17 +231,12 @@ export default defineComponent({
                   <span
                     class={[
                       styles.textBtn,
-                      (forms.type === 'MUSIC'
-                        ? forms.subjectId === subject.value
-                        : forms.subjectId === subject.id) &&
-                        styles.textBtnActive
+
+                      forms.subjectId === subject.value && styles.textBtnActive
                     ]}
                     onClick={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = subject.value;
-                      } else {
-                        forms.subjectId = subject.id;
-                      }
+                      forms.subjectId = subject.value;
+
                       state.tempSubjectId = null;
                       onSearch();
                     }}>

src/views/natural-resources/model/add-teaching/index.tsx

@@ -1,5 +1,6 @@
 import {
   NButton,
+  NCascader,
   NForm,
   NFormItem,
   NInput,
@@ -67,9 +68,10 @@ const initState = () => ({
   id: null, // 教材id
   name: '',
   currentGradeNum: null as any,
-  subjectIds: null as any,
+  instrumentIds: null as any,
   // bookType: null, // 上下册
   coverImg: '', // 封面
+  instruemntIds: [] as any,
   enableFlag: true, // 状态
   type: 'COURSEWARE', // 教材类型：COURSEWARE,THEORY,可用值:COURSEWARE,THEORY
   lessonList: [createLesson()] // 单元列表
@@ -88,7 +90,8 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const message = useMessage();
     const data = reactive({
-      uploading: false
+      uploading: false,
+      subjectList: [] as any
     });
     const formRef = ref();
     const form = reactive(initState());
@@ -104,10 +107,10 @@ export default defineComponent({
     const handleSubmit = async () => {
       data.uploading = true;
       try {
-        const { currentGradeNum, subjectIds, ...more } = form;
+        const { currentGradeNum, instrumentIds, ...more } = form;
         await api_lessonCoursewareSave({
           currentGradeNum: currentGradeNum.join(','),
-          subjectIds: subjectIds.join(','),
+          instrumentIds: instrumentIds.join(','),
           ...more
         });
         Object.assign(form, initState());
@@ -129,8 +132,8 @@ export default defineComponent({
         form.currentGradeNum = data.currentGradeNum
           ? data.currentGradeNum.split(',').map((item: any) => Number(item))
           : null;
-        form.subjectIds = data.subjectIds
-          ? data.subjectIds.split(',').map((item: any) => Number(item))
+        form.instrumentIds = data.instrumentIds
+          ? data.instrumentIds.split(',').map((item: any) => item)
           : null;
         // form.bookType = data.bookType;
         form.coverImg = data.coverImg;
@@ -160,6 +163,10 @@ export default defineComponent({
 
         form.lessonList = tempLesson;
       }
+
+      data.subjectList = catchStore.getEnableSingleAllSubjects(
+        form.instrumentIds
+      );
     });
     return () => (
       <div class={styles.container}>
@@ -238,23 +245,29 @@ export default defineComponent({
                   />
                 </NFormItem>
                 <NFormItem
-                  path="subjectIds"
+                  path="instrumentIds"
                   style={{ width: '360px' }}
                   rule={{
                     required: true,
-                    message: '请选择声部',
+                    message: '请选择乐器',
                     trigger: 'change',
                     type: 'array'
                   }}>
-                  <NSelect
-                    placeholder="请选择声部"
-                    options={catchStore.getSubjectList}
-                    v-model:value={form.subjectIds}
-                    clearable
-                    valueField="id"
+                  <NCascader
+                    placeholder="请选择乐器"
+                    options={data.subjectList}
+                    v-model:value={form.instrumentIds}
+                    checkStrategy="child"
+                    showPath={false}
+                    childrenField="instruments"
+                    expandTrigger="hover"
                     labelField="name"
+                    valueField="id"
+                    clearable
+                    filterable
                     multiple
-                    maxTagCount={3}
+                    maxTagCount="responsive"
+                    style={{ width: '400px' }}
                   />
                 </NFormItem>
                 {/* <NFormItem

src/views/prepare-lessons/api.ts

@@ -287,3 +287,11 @@ export const api_teacherChapterLessonCoursewareUpdate = (params: any) => {
 export const api_teacherChapterLessonCoursewareDetail = (id: string) => {
   return request.get('/edu-app/teacherChapterLessonCourseware/detail/' + id);
 };
+
+/**
+ *  @description: 后台 素材详情
+ * @param params
+ */
+export const api_materialDetail = (id: string) => {
+  return request.get('/edu-app/material/detail/' + id);
+};

src/views/prepare-lessons/components/directory-main/index.tsx

@@ -1,405 +1,421 @@
-import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NIcon, NSpin, NScrollbar, NModal, NImage } from 'naive-ui';
-import {
-  lessonCoursewareDetail,
-  lessonCoursewarePage,
-  tagUseCourseware
-} from '../../api';
-import SelectLessonware from './select-lessonware';
-import TheEmpty from '/src/components/TheEmpty';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { useUserStore } from '/src/store/modules/users';
-import { useRoute } from 'vue-router';
-import { eventGlobal } from '/src/utils';
-import TheNoticeBar from '/src/components/TheNoticeBar';
-
-export default defineComponent({
-  name: 'directory-main',
-  setup() {
-    const route = useRoute();
-    const prepareStore = usePrepareStore();
-    const userStore = useUserStore();
-    const show = ref(true);
-    const forms = reactive({
-      lastUseCoursewareId: route.query.lastUseCoursewareId
-        ? route.query.lastUseCoursewareId + ''
-        : null, // 专辑编号
-      unit: route.query.unit ? route.query.unit + '' : null, // 声部
-      showSelectBookStatus: false,
-      coursewareStatus: false
-    });
-
-    // console.log(forms.lastUseCoursewareId, 'route.query.lastUseCoursewareId');
-    const getLessonCourseware = async () => {
-      try {
-        const { data } = await lessonCoursewarePage({
-          page: 1,
-          rows: 99,
-          type: 'COURSEWARE',
-          enableFlag: 1
-        });
-        const result = data.rows || [];
-        if (result.length > 0) {
-          // 判断是否有默认数据
-          const selectItem = result.find(
-            (item: any) =>
-              item.id ===
-              (forms.lastUseCoursewareId ||
-                userStore.getUserInfo?.lastUseCoursewareId)
-          );
-          let id: any = null;
-          if (selectItem) {
-            prepareStore.setBaseCourseware(selectItem);
-            id = selectItem.id;
-
-            prepareStore.setSubjectList(selectItem.subjectList || []);
-          } else {
-            prepareStore.setBaseCourseware(result[0]);
-            id = result[0]?.id;
-
-            prepareStore.setSubjectList(result[0].subjectList || []);
-          }
-          setLastUseCoursewareId(id);
-        }
-
-        forms.showSelectBookStatus = true;
-      } catch {
-        //
-      }
-    };
-
-    const getLessonCoursewareDetail = async () => {
-      try {
-        const baseCourseware: any = prepareStore.getBaseCourseware;
-        if (!baseCourseware.id) return;
-        const { data } = await lessonCoursewareDetail({
-          id: baseCourseware.id
-        });
-        const tempList: any = data.lessonList || [];
-        const defaultUnitIds = formatParentId(forms.unit, tempList);
-        tempList.forEach((item: any, index: number) => {
-          item.selected = false;
-          // 处理从备课页面带过来的参数
-          if (defaultUnitIds.length > 1) {
-            if (item.id === defaultUnitIds[0]) {
-              item.selected = true;
-              item.knowledgeList.forEach((know: any) => {
-                if (know.id === defaultUnitIds[1]) {
-                  prepareStore.setSelectKey(know?.id);
-                  prepareStore.setLessonCoursewareId(know?.lessonCoursewareId);
-                  prepareStore.setLessonCoursewareDetailId(
-                    know?.lessonCoursewareDetailId
-                  );
-                }
-              });
-            }
-          } else {
-            if (index === 0) {
-              item.selected = true;
-              const temp = item['knowledgeList'][0];
-              prepareStore.setSelectKey(temp?.id);
-              prepareStore.setLessonCoursewareId(temp?.lessonCoursewareId);
-              prepareStore.setLessonCoursewareDetailId(
-                temp?.lessonCoursewareDetailId
-              );
-            }
-          }
-        });
-        prepareStore.setTreeList(tempList);
-      } catch {
-        //
-      }
-    };
-
-    const formatParentId = (id: any, list: any, ids = [] as any) => {
-      for (const item of list) {
-        if (item.knowledgeList && item.knowledgeList.length > 0) {
-          const cIds: any = formatParentId(id, item.knowledgeList, [
-            ...ids,
-            item.id
-          ]);
-          if (cIds.includes(id)) {
-            return cIds;
-          }
-        }
-        if (item.id === id) {
-          return [...ids, id];
-        }
-      }
-      return ids;
-    };
-
-    const setLastUseCoursewareId = async (id: any) => {
-      try {
-        await tagUseCourseware({ coursewareId: id });
-        userStore.getInfo();
-      } catch {
-        //
-      }
-    };
-
-    const clickDetail = (child: any) => {
-      prepareStore.setSelectKey(child.id);
-      prepareStore.setLessonCoursewareId(child.lessonCoursewareId);
-      prepareStore.setLessonCoursewareDetailId(child.lessonCoursewareDetailId);
-    };
-
-    const onChangeClass = async (item: any) => {
-      show.value = true;
-      forms.lastUseCoursewareId = item.lastUseCoursewareId;
-      forms.unit = item.unit;
-      await getLessonCourseware();
-      await getLessonCoursewareDetail();
-      show.value = false;
-    };
-
-    const changeCourseware = (item: any) => {
-      prepareStore.setBaseCourseware(item);
-      prepareStore.setSubjectList(item.subjectList);
-      const index = item.subjectList.findIndex(
-        (subject: any) => subject.id == prepareStore.getSubjectId
-      );
-      // 判断教材里面是否有当前选择的声部，如果没有则默认选择第一个
-      if (index < 0) {
-        const subjectId = item.subjectList[0].id
-          ? Number(item.subjectList[0].id)
-          : '';
-        sessionStorage.removeItem('prepareLessonCourseWareSubjectIsNull');
-        prepareStore.setSubjectId(subjectId);
-      }
-
-      getLessonCoursewareDetail();
-      setLastUseCoursewareId(item.id);
-    };
-
-    const formatSubjectNames = computed(() => {
-      const names = prepareStore.getBaseCourseware.subjectNames;
-      if (!names) {
-        return '';
-      }
-      return names.split(',').join('、');
-    });
-
-    onMounted(async () => {
-      show.value = true;
-      await getLessonCourseware();
-      await getLessonCoursewareDetail();
-      show.value = false;
-
-      // 切换班级时触发
-      eventGlobal.on('onChangeClass', async (item: any) => {
-        onChangeClass(item);
-      });
-
-      // console.log(
-      //   prepareStore.getBaseCourseware,
-      //   'prepareStore.getBaseCourseware'
-      // );
-    });
-    return () => (
-      <div class={styles.directoryList}>
-        {forms.showSelectBookStatus &&
-          (prepareStore.getBaseCourseware.id ? (
-            <div id="lessons-0" class={styles['select-directory-info']}>
-              <div
-                class={styles.itemImg}
-                onClick={() => (forms.coursewareStatus = true)}>
-                <NImage
-                  objectFit="cover"
-                  src={prepareStore.getBaseCourseware.coverImg}
-                  lazy
-                  previewDisabled={true}
-                  onLoad={e => {
-                    (e.target as any).dataset.loaded = 'true';
-                  }}
-                />
-              </div>
-              <div class={styles.itemContent}>
-                <h2>
-                  <TheNoticeBar text={prepareStore.getBaseCourseware.name} />
-                </h2>
-                <div class={styles.subjects}>
-                  <TheNoticeBar
-                    text={formatSubjectNames.value}
-                    time={formatSubjectNames.value.length > 15 ? 10 : 5}
-                  />
-                </div>
-                <div
-                  class={styles.changeDir}
-                  onClick={() => (forms.coursewareStatus = true)}>
-                  <svg
-                    width="11px"
-                    height="10px"
-                    viewBox="0 0 11 10"
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <title>切片</title>
-                    <g
-                      stroke="none"
-                      stroke-width="1"
-                      fill="none"
-                      fill-rule="evenodd">
-                      <g
-                        transform="translate(-279.000000, -210.000000)"
-                        fill="#0378EC"
-                        fill-rule="nonzero">
-                        <g transform="translate(132.000000, 96.000000)">
-                          <g transform="translate(32.000000, 24.000000)">
-                            <g transform="translate(103.000000, 10.000000)">
-                              <g transform="translate(0.000000, 71.000000)">
-                                <g transform="translate(12.000000, 9.000000)">
-                                  <path d="M10.4116565,3.89985699 C10.6551462,3.89985699 10.8747497,3.75140792 10.9680437,3.52360884 C11.0613377,3.29606287 11.0096883,3.03384082 10.8376072,2.85944797 L8.08018279,0.0692888872 C7.98888976,-0.0230962957 7.8410701,-0.0230962957 7.74977708,0.0692888872 L7.22840639,0.59689687 C7.13711336,0.689282053 7.13711336,0.838996672 7.22840639,0.931255299 L8.95772133,2.68113191 L0.230858792,2.68113191 C0.103423738,2.68113191 0,2.78566638 0,2.91475252 L0,3.66636293 C0,3.79532253 0.10329868,3.89998355 0.230858792,3.89998355 L10.4116565,3.89998355 L10.4116565,3.89985699 Z M10.877501,6.10001645 L0.699579677,6.10001645 C0.456089932,6.10001645 0.236486444,6.24846552 0.143192479,6.4762646 C0.0498985147,6.70381057 0.101547854,6.96603263 0.273628948,7.14042548 L3.03105338,9.93071111 C3.12234641,10.0230963 3.27016607,10.0230963 3.36145909,9.93071111 L3.88282978,9.40310313 C3.97412281,9.31071795 3.97412281,9.16100333 3.88282978,9.0687447 L2.15351484,7.31874154 L10.877501,7.31874154 C11.0065618,7.31874154 11.1111111,7.21281496 11.1111111,7.08233671 L11.1111111,6.33654783 C11.1111111,6.20594302 11.0065618,6.10001645 10.877501,6.10001645 Z"></path>
-                                </g>
-                              </g>
-                            </g>
-                          </g>
-                        </g>
-                      </g>
-                    </g>
-                  </svg>
-                  <span>切换教材</span>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div
-              id="lessons-0"
-              class={styles['select-directory']}
-              onClick={() => (forms.coursewareStatus = true)}>
-              <span
-                class={['cr-ellipsis']}
-                title={prepareStore.getBaseCourseware.name}>
-                {prepareStore.getBaseCourseware.name || '请选择教材'}
-              </span>
-              <NIcon class={styles.iconArrow}>
-                <svg
-                  width="11px"
-                  height="15px"
-                  viewBox="0 0 11 15"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg">
-                  <g
-                    stroke="none"
-                    stroke-width="1"
-                    fill="none"
-                    fill-rule="evenodd"
-                    opacity="0.699999988">
-                    <g
-                      transform="translate(-445.000000, -137.000000)"
-                      fill="#131415">
-                      <g transform="translate(152.000000, 120.000000)">
-                        <path
-                          d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
-                          id="三角形"
-                          transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
-                      </g>
-                    </g>
-                  </g>
-                </svg>
-              </NIcon>
-            </div>
-          ))}
-
-        <NScrollbar class={styles.scrollBar}>
-          <NSpin show={show.value}>
-            <div
-              class={[
-                styles.listSection,
-                !show.value && prepareStore.getTreeList.length <= 0
-                  ? styles.emptySection
-                  : ''
-              ]}>
-              {prepareStore.getTreeList.map((item: any, index: number) => (
-                <div class={styles.treeParent} key={'parent' + index}>
-                  <div
-                    class={[styles.treeItem, styles.parentItem]}
-                    onClick={() => {
-                      prepareStore.getTreeList.forEach((child: any) => {
-                        if (item.id !== child.id) {
-                          child.selected = false;
-                        }
-                      });
-                      item.selected = item.selected ? false : true;
-                    }}>
-                    {item.knowledgeList && item.knowledgeList.length > 0 && (
-                      <span
-                        class={[
-                          styles.arrow,
-                          item.selected ? styles.arrowSelect : ''
-                        ]}></span>
-                    )}
-                    <p
-                      class={[
-                        styles.title,
-                        item.selected ? styles.titleSelect : ''
-                      ]}>
-                      <span
-                        class={[
-                          styles.dir,
-                          item.selected ? styles.dirSelect : ''
-                        ]}></span>
-                      {item.name}
-                    </p>
-                  </div>
-
-                  {item.selected &&
-                    item.knowledgeList &&
-                    item.knowledgeList.map((child: any, j: number) => (
-                      <div
-                        key={'child' + j}
-                        class={[
-                          styles.treeItem,
-                          styles.childItem,
-                          styles.animation,
-                          prepareStore.getSelectKey === child.id
-                            ? styles.childSelect
-                            : ''
-                        ]}
-                        onClick={() => {
-                          if (prepareStore.getIsEditResource) {
-                            eventGlobal.emit('pageBeforeLeave', () =>
-                              clickDetail(child)
-                            );
-                          } else {
-                            clickDetail(child);
-                          }
-                        }}>
-                        <span class={styles.childArrow}></span>
-                        <p class={styles.title}>{child.name}</p>
-                      </div>
-                    ))}
-                </div>
-              ))}
-            </div>
-            {!show.value && prepareStore.getTreeList.length <= 0 && (
-              <TheEmpty />
-            )}
-          </NSpin>
-        </NScrollbar>
-
-        {/* 选择教材 */}
-        <NModal
-          v-model:show={forms.coursewareStatus}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.coursewareModal]}
-          title={'切换教材'}
-          blockScroll={false}>
-          <SelectLessonware
-            onClose={() => (forms.coursewareStatus = false)}
-            onConfirm={(item: any) => {
-              if (prepareStore.getIsEditResource) {
-                eventGlobal.emit('pageBeforeLeave', () =>
-                  changeCourseware(item)
-                );
-              } else {
-                changeCourseware(item);
-              }
-            }}
-          />
-        </NModal>
-      </div>
-    );
-  }
-});
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NIcon, NSpin, NScrollbar, NModal, NImage } from 'naive-ui';
+import {
+  lessonCoursewareDetail,
+  lessonCoursewarePage,
+  tagUseCourseware
+} from '../../api';
+import SelectLessonware from './select-lessonware';
+import TheEmpty from '/src/components/TheEmpty';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { useUserStore } from '/src/store/modules/users';
+import { useRoute } from 'vue-router';
+import { eventGlobal } from '/src/utils';
+import TheNoticeBar from '/src/components/TheNoticeBar';
+import { getSubjectList2 } from '/src/api/user';
+
+export default defineComponent({
+  name: 'directory-main',
+  setup() {
+    const route = useRoute();
+    const prepareStore = usePrepareStore();
+    const userStore = useUserStore();
+    const show = ref(true);
+    const forms = reactive({
+      lastUseCoursewareId: route.query.lastUseCoursewareId
+        ? route.query.lastUseCoursewareId + ''
+        : null, // 专辑编号
+      unit: route.query.unit ? route.query.unit + '' : null, // 声部
+      showSelectBookStatus: false,
+      coursewareStatus: false
+    });
+
+    const getLessonCourseware = async () => {
+      try {
+        const { data } = await lessonCoursewarePage({
+          page: 1,
+          rows: 99,
+          type: 'COURSEWARE',
+          enableFlag: 1
+        });
+        const result = data.rows || [];
+        if (result.length > 0) {
+          // 判断是否有默认数据
+          const selectItem = result.find(
+            (item: any) =>
+              item.id ===
+              (forms.lastUseCoursewareId ||
+                userStore.getUserInfo?.lastUseCoursewareId)
+          );
+          let id: any = null;
+          let instrumentIds: any = null;
+          if (selectItem) {
+            prepareStore.setBaseCourseware(selectItem);
+            id = selectItem.id;
+            instrumentIds = selectItem.instrumentIds;
+          } else {
+            prepareStore.setBaseCourseware(result[0]);
+            id = result[0]?.id;
+            instrumentIds = result[0].instrumentIds;
+          }
+          setLastUseCoursewareId(id);
+
+          if (instrumentIds) {
+            const { data } = await getSubjectList2({ instrumentIds });
+            prepareStore.setInstrumentList(data);
+          }
+        }
+
+        forms.showSelectBookStatus = true;
+      } catch {
+        //
+      }
+    };
+
+    const getLessonCoursewareDetail = async () => {
+      try {
+        const baseCourseware: any = prepareStore.getBaseCourseware;
+        if (!baseCourseware.id) return;
+        const { data } = await lessonCoursewareDetail({
+          id: baseCourseware.id
+        });
+        const tempList: any = data.lessonList || [];
+        const defaultUnitIds = formatParentId(forms.unit, tempList);
+        tempList.forEach((item: any, index: number) => {
+          item.selected = false;
+          // 处理从备课页面带过来的参数
+          if (defaultUnitIds.length > 1) {
+            if (item.id === defaultUnitIds[0]) {
+              item.selected = true;
+              item.knowledgeList.forEach((know: any) => {
+                if (know.id === defaultUnitIds[1]) {
+                  prepareStore.setSelectKey(know?.id);
+                  prepareStore.setLessonCoursewareId(know?.lessonCoursewareId);
+                  prepareStore.setLessonCoursewareDetailId(
+                    know?.lessonCoursewareDetailId
+                  );
+                }
+              });
+            }
+          } else {
+            if (index === 0) {
+              item.selected = true;
+              const temp = item['knowledgeList'][0];
+              prepareStore.setSelectKey(temp?.id);
+              prepareStore.setLessonCoursewareId(temp?.lessonCoursewareId);
+              prepareStore.setLessonCoursewareDetailId(
+                temp?.lessonCoursewareDetailId
+              );
+            }
+          }
+        });
+        prepareStore.setTreeList(tempList);
+      } catch {
+        //
+      }
+    };
+
+    const formatParentId = (id: any, list: any, ids = [] as any) => {
+      for (const item of list) {
+        if (item.knowledgeList && item.knowledgeList.length > 0) {
+          const cIds: any = formatParentId(id, item.knowledgeList, [
+            ...ids,
+            item.id
+          ]);
+          if (cIds.includes(id)) {
+            return cIds;
+          }
+        }
+        if (item.id === id) {
+          return [...ids, id];
+        }
+      }
+      return ids;
+    };
+
+    const setLastUseCoursewareId = async (id: any) => {
+      try {
+        await tagUseCourseware({ coursewareId: id });
+        userStore.getInfo();
+      } catch {
+        //
+      }
+    };
+
+    const clickDetail = (child: any) => {
+      prepareStore.setSelectKey(child.id);
+      prepareStore.setLessonCoursewareId(child.lessonCoursewareId);
+      prepareStore.setLessonCoursewareDetailId(child.lessonCoursewareDetailId);
+    };
+
+    const onChangeClass = async (item: any) => {
+      show.value = true;
+      forms.lastUseCoursewareId = item.lastUseCoursewareId;
+      forms.unit = item.unit;
+      await getLessonCourseware();
+      await getLessonCoursewareDetail();
+      show.value = false;
+    };
+
+    const changeCourseware = async (item: any) => {
+      prepareStore.setBaseCourseware(item);
+      // prepareStore.setSubjectList(item.subjectList);
+
+      if (item.instrumentIds) {
+        const { data } = await getSubjectList2({
+          instrumentIds: item.instrumentIds
+        });
+        prepareStore.setInstrumentList(data);
+
+        let status = false;
+        let tempInstrumentId: any = null;
+        data.forEach((item: any, index: number) => {
+          if (Array.isArray(item.instruments)) {
+            item.instruments.forEach((child: any, j: number) => {
+              if (child.id === prepareStore.getInstrumentId) {
+                status = true;
+              }
+              if (index === 0 && j === 0) {
+                tempInstrumentId = child.id;
+              }
+            });
+          }
+        });
+        // 判断教材里面是否有当前选择的声部，如果没有则默认选择第一个
+        if (status) {
+          const instrumentId = tempInstrumentId;
+          sessionStorage.removeItem('prepareLessonCourseWareSubjectIsNull');
+          prepareStore.setInstrumentId(instrumentId);
+        }
+      }
+
+      getLessonCoursewareDetail();
+      setLastUseCoursewareId(item.id);
+    };
+
+    const formatInstrumentNames = computed(() => {
+      const names = prepareStore.getBaseCourseware.instrumentNames;
+      if (!names) {
+        return '';
+      }
+      return names.split(',').join('、');
+    });
+
+    onMounted(async () => {
+      show.value = true;
+      await getLessonCourseware();
+      await getLessonCoursewareDetail();
+      show.value = false;
+
+      // 切换班级时触发
+      eventGlobal.on('onChangeClass', async (item: any) => {
+        onChangeClass(item);
+      });
+    });
+    return () => (
+      <div class={styles.directoryList}>
+        {forms.showSelectBookStatus &&
+          (prepareStore.getBaseCourseware.id ? (
+            <div id="lessons-0" class={styles['select-directory-info']}>
+              <div
+                class={styles.itemImg}
+                onClick={() => (forms.coursewareStatus = true)}>
+                <NImage
+                  objectFit="cover"
+                  src={prepareStore.getBaseCourseware.coverImg}
+                  lazy
+                  previewDisabled={true}
+                  onLoad={e => {
+                    (e.target as any).dataset.loaded = 'true';
+                  }}
+                />
+              </div>
+              <div class={styles.itemContent}>
+                <h2>
+                  <TheNoticeBar text={prepareStore.getBaseCourseware.name} />
+                </h2>
+                <div class={styles.subjects}>
+                  <TheNoticeBar
+                    text={formatInstrumentNames.value}
+                    time={formatInstrumentNames.value.length > 15 ? 10 : 5}
+                  />
+                </div>
+                <div
+                  class={styles.changeDir}
+                  onClick={() => (forms.coursewareStatus = true)}>
+                  <svg
+                    width="11px"
+                    height="10px"
+                    viewBox="0 0 11 10"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <title>切片</title>
+                    <g
+                      stroke="none"
+                      stroke-width="1"
+                      fill="none"
+                      fill-rule="evenodd">
+                      <g
+                        transform="translate(-279.000000, -210.000000)"
+                        fill="#0378EC"
+                        fill-rule="nonzero">
+                        <g transform="translate(132.000000, 96.000000)">
+                          <g transform="translate(32.000000, 24.000000)">
+                            <g transform="translate(103.000000, 10.000000)">
+                              <g transform="translate(0.000000, 71.000000)">
+                                <g transform="translate(12.000000, 9.000000)">
+                                  <path d="M10.4116565,3.89985699 C10.6551462,3.89985699 10.8747497,3.75140792 10.9680437,3.52360884 C11.0613377,3.29606287 11.0096883,3.03384082 10.8376072,2.85944797 L8.08018279,0.0692888872 C7.98888976,-0.0230962957 7.8410701,-0.0230962957 7.74977708,0.0692888872 L7.22840639,0.59689687 C7.13711336,0.689282053 7.13711336,0.838996672 7.22840639,0.931255299 L8.95772133,2.68113191 L0.230858792,2.68113191 C0.103423738,2.68113191 0,2.78566638 0,2.91475252 L0,3.66636293 C0,3.79532253 0.10329868,3.89998355 0.230858792,3.89998355 L10.4116565,3.89998355 L10.4116565,3.89985699 Z M10.877501,6.10001645 L0.699579677,6.10001645 C0.456089932,6.10001645 0.236486444,6.24846552 0.143192479,6.4762646 C0.0498985147,6.70381057 0.101547854,6.96603263 0.273628948,7.14042548 L3.03105338,9.93071111 C3.12234641,10.0230963 3.27016607,10.0230963 3.36145909,9.93071111 L3.88282978,9.40310313 C3.97412281,9.31071795 3.97412281,9.16100333 3.88282978,9.0687447 L2.15351484,7.31874154 L10.877501,7.31874154 C11.0065618,7.31874154 11.1111111,7.21281496 11.1111111,7.08233671 L11.1111111,6.33654783 C11.1111111,6.20594302 11.0065618,6.10001645 10.877501,6.10001645 Z"></path>
+                                </g>
+                              </g>
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </svg>
+                  <span>切换教材</span>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div
+              id="lessons-0"
+              class={styles['select-directory']}
+              onClick={() => (forms.coursewareStatus = true)}>
+              <span
+                class={['cr-ellipsis']}
+                title={prepareStore.getBaseCourseware.name}>
+                {prepareStore.getBaseCourseware.name || '请选择教材'}
+              </span>
+              <NIcon class={styles.iconArrow}>
+                <svg
+                  width="11px"
+                  height="15px"
+                  viewBox="0 0 11 15"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                    opacity="0.699999988">
+                    <g
+                      transform="translate(-445.000000, -137.000000)"
+                      fill="#131415">
+                      <g transform="translate(152.000000, 120.000000)">
+                        <path
+                          d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
+                          id="三角形"
+                          transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
+                      </g>
+                    </g>
+                  </g>
+                </svg>
+              </NIcon>
+            </div>
+          ))}
+
+        <NScrollbar class={styles.scrollBar}>
+          <NSpin show={show.value}>
+            <div
+              class={[
+                styles.listSection,
+                !show.value && prepareStore.getTreeList.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}>
+              {prepareStore.getTreeList.map((item: any, index: number) => (
+                <div class={styles.treeParent} key={'parent' + index}>
+                  <div
+                    class={[styles.treeItem, styles.parentItem]}
+                    onClick={() => {
+                      prepareStore.getTreeList.forEach((child: any) => {
+                        if (item.id !== child.id) {
+                          child.selected = false;
+                        }
+                      });
+                      item.selected = item.selected ? false : true;
+                    }}>
+                    {item.knowledgeList && item.knowledgeList.length > 0 && (
+                      <span
+                        class={[
+                          styles.arrow,
+                          item.selected ? styles.arrowSelect : ''
+                        ]}></span>
+                    )}
+                    <p
+                      class={[
+                        styles.title,
+                        item.selected ? styles.titleSelect : ''
+                      ]}>
+                      <span
+                        class={[
+                          styles.dir,
+                          item.selected ? styles.dirSelect : ''
+                        ]}></span>
+                      {item.name}
+                    </p>
+                  </div>
+
+                  {item.selected &&
+                    item.knowledgeList &&
+                    item.knowledgeList.map((child: any, j: number) => (
+                      <div
+                        key={'child' + j}
+                        class={[
+                          styles.treeItem,
+                          styles.childItem,
+                          styles.animation,
+                          prepareStore.getSelectKey === child.id
+                            ? styles.childSelect
+                            : ''
+                        ]}
+                        onClick={() => {
+                          if (prepareStore.getIsEditResource) {
+                            eventGlobal.emit('pageBeforeLeave', () =>
+                              clickDetail(child)
+                            );
+                          } else {
+                            clickDetail(child);
+                          }
+                        }}>
+                        <span class={styles.childArrow}></span>
+                        <p class={styles.title}>{child.name}</p>
+                      </div>
+                    ))}
+                </div>
+              ))}
+            </div>
+            {!show.value && prepareStore.getTreeList.length <= 0 && (
+              <TheEmpty />
+            )}
+          </NSpin>
+        </NScrollbar>
+
+        {/* 选择教材 */}
+        <NModal
+          v-model:show={forms.coursewareStatus}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.coursewareModal]}
+          title={'切换教材'}
+          blockScroll={false}>
+          <SelectLessonware
+            onClose={() => (forms.coursewareStatus = false)}
+            onConfirm={(item: any) => {
+              if (prepareStore.getIsEditResource) {
+                eventGlobal.emit('pageBeforeLeave', () =>
+                  changeCourseware(item)
+                );
+              } else {
+                changeCourseware(item);
+              }
+            }}
+          />
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/directory-main/select-lessonware/index.module.less

@@ -16,6 +16,10 @@
       font-size: 18px;
       border-radius: 8px !important;
     }
+
+    .n-cascader {
+      min-width: 240px;
+    }
   }
 
   .iconSearch {
@@ -228,4 +232,4 @@
       }
     }
   }
-}
+}

src/views/prepare-lessons/components/directory-main/select-lessonware/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
+  NCascader,
   NImage,
   NInput,
   NModal,
@@ -40,7 +41,7 @@ export default defineComponent({
       bookVersionId: null,
       keyword: null,
       currentGradeNum: null,
-      subjectId: null,
+      instrumentId: null,
       removeVisiable: false,
       removeRow: {} as any
       // bookType: null
@@ -57,7 +58,7 @@ export default defineComponent({
           bookVersionId: forms.bookVersionId,
           keyword: forms.keyword,
           currentGradeNum: forms.currentGradeNum,
-          subjectId: forms.subjectId
+          instrumentId: forms.instrumentId
           // bookType: forms.bookType
         });
 
@@ -132,19 +133,25 @@ export default defineComponent({
               )
             }}
           </NInput>
-          <NSelect
-            placeholder="全部声部"
-            clearable
+          <NCascader
+            placeholder="请选择乐器"
+            v-model:value={forms.instrumentId}
+            onUpdate:value={() => throttledFn()}
             options={
               [
-                { name: '全部声部', id: null },
+                { name: '全部乐器', id: null },
                 ...catchStore.getSubjectList
               ] as any
             }
-            valueField="id"
+            checkStrategy="child"
+            showPath
+            childrenField="instruments"
+            expandTrigger="hover"
             labelField="name"
-            v-model:value={forms.subjectId}
-            onUpdate:value={() => throttledFn()}
+            valueField="id"
+            clearable
+            filterable
+            style={{ width: '400px' }}
           />
           <NSelect
             placeholder="全部版本"

src/views/prepare-lessons/components/lesson-main/courseware-head/index.tsx

@@ -1,161 +1,263 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NButton, NInput, NSelect, NSwitch, NTooltip } from 'naive-ui';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { eventGlobal } from '/src/utils';
-
-export default defineComponent({
-  name: 'courseware-head',
-  setup(props, { emit, expose }) {
-    const prepareStore = usePrepareStore();
-    // 第一个课件标题，第二个课件声部
-    const checkForms = ref<any[]>(['', '']);
-    const forms = reactive({
-      subjects: [] as any,
-      openFlagEnable: true, // 是否支持修改公开状态
-      autoPlay: true,
-      name: '',
-      openFlag: false
-    });
-
-    // 全选
-    const chioseAll = (list: any) => {
-      forms.subjects = list.map((child: any) => {
-        return child.id;
-      }) as any;
-    };
-
-    const getForms = () => {
-      return forms;
-    };
-
-    const updateDefaultInfo = (item: any) => {
-      forms.subjects = item.subjects;
-      forms.openFlagEnable = item.openFlagEnable;
-      forms.autoPlay = item.autoPlay;
-      forms.name = item.name;
-      forms.openFlag = item.openFlag;
-    };
-
-    const checkCoursewareForm = () => {
-      //
-      checkForms.value[0] = forms.name ? '' : 'error';
-      checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
-    };
-
-    onMounted(() => {
-      eventGlobal.on('updateCoursewareHeadInfo', updateDefaultInfo);
-
-      eventGlobal.on('checkCoursewareForm', checkCoursewareForm);
-    });
-
-    expose({
-      getForms
-    });
-
-    return () => (
-      <>
-        <div class={styles.headerTitle}>
-          <i class={styles.iconBook}></i>
-          <span>{prepareStore.getSelectName}</span>
-        </div>
-
-        <div class={styles.formContainer}>
-          <div class={[styles.btnItem, styles.block]}>
-            <span class={[styles.btnTitle]}>
-              <span>*</span>课件标题
-            </span>
-            <NInput
-              placeholder="请输入课件标题"
-              v-model:value={forms.name}
-              maxlength={20}
-              clearable
-              status={checkForms.value[0]}
-              onUpdate:value={() => {
-                checkForms.value[0] = forms.name ? '' : 'error';
-              }}
-            />
-          </div>
-          <div class={[styles.btnItem, styles.block]}>
-            <span class={[styles.btnTitle]}>
-              <span>*</span>课件声部
-            </span>
-            <NSelect
-              status={checkForms.value[1]}
-              placeholder="请选择声部（可多选）"
-              class={styles.btnSubjectList}
-              options={prepareStore.getSubjectList}
-              labelField="name"
-              valueField="id"
-              multiple
-              maxTagCount={2}
-              size="small"
-              v-model:value={forms.subjects}
-              clearable
-              v-slots={{
-                action: () => (
-                  <>
-                    <NButton
-                      text
-                      style=" --n-width: 100% "
-                      size="small"
-                      onClick={() => chioseAll(prepareStore.getSubjectList)}>
-                      全选
-                    </NButton>
-                  </>
-                )
-              }}
-              onUpdate:value={() => {
-                checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
-              }}
-            />
-          </div>
-          <div class={styles.btnItem}>
-            <span class={styles.btnTitle}>
-              自动播放
-              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
-                {{
-                  trigger: () => <i class={styles.iconQuestion}></i>,
-                  default: () =>
-                    '开启自动播放后，课件内视频、音频资源将自动播放'
-                }}
-              </NTooltip>
-            </span>
-
-            <NSwitch v-model:value={forms.autoPlay} />
-          </div>
-          <div class={styles.btnItem}>
-            <span class={styles.btnTitle}>
-              公开课件
-              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
-                {{
-                  trigger: () => <i class={styles.iconQuestion}></i>,
-                  default: () => '公开课件后，其它老师可以使用该课件上课'
-                }}
-              </NTooltip>
-            </span>
-            {!forms.openFlagEnable ? (
-              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
-                {{
-                  trigger: () => (
-                    <NSwitch
-                      v-model:value={forms.openFlag}
-                      disabled={!forms.openFlagEnable}
-                    />
-                  ),
-                  default: () =>
-                    '为尊重课件原作者，在“相关课件”中添加的课件不支持公开'
-                }}
-              </NTooltip>
-            ) : (
-              <NSwitch
-                v-model:value={forms.openFlag}
-                disabled={!forms.openFlagEnable}
-              />
-            )}
-          </div>
-        </div>
-      </>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NCascader,
+  NInput,
+  NSelect,
+  NSwitch,
+  NTooltip
+} from 'naive-ui';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { eventGlobal } from '/src/utils';
+import { useCatchStore } from '/src/store/modules/catchData';
+
+export default defineComponent({
+  name: 'courseware-head',
+  setup(props, { emit, expose }) {
+    const prepareStore = usePrepareStore();
+    // 第一个课件标题，第二个课件声部
+    const checkForms = ref<any[]>(['', '']);
+    const subjectList = ref([] as any);
+    const forms = reactive({
+      subjects: [] as any,
+      openFlagEnable: true, // 是否支持修改公开状态
+      autoPlay: true,
+      name: '',
+      openFlag: false
+    });
+
+    // 全选
+    const chioseAll = (list: any) => {
+      // 全选
+      const ids = [] as any;
+      list.map((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((c: any) => {
+            ids.push(c.value);
+          });
+        }
+      }) as any;
+      // item.instrumentIds = ids;
+      forms.subjects = ids;
+    };
+
+    const getForms = () => {
+      return forms;
+    };
+
+    const updateDefaultInfo = (item: any) => {
+      forms.subjects = item.subjects;
+      forms.openFlagEnable = item.openFlagEnable;
+      forms.autoPlay = item.autoPlay;
+      forms.name = item.name;
+      forms.openFlag = item.openFlag;
+      updateSubjectList(item.subjects || []);
+    };
+
+    const checkCoursewareForm = () => {
+      //
+      checkForms.value[0] = forms.name ? '' : 'error';
+      checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
+    };
+
+    const updateSubjectList = (ids?: any[]) => {
+      // 获取课件乐器编号 ，修改的乐器编号，集合
+      ids = ids || [];
+      const courseIds: any = [];
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            courseIds.push(child.id);
+          });
+        }
+      });
+      const allIds = [...new Set([...courseIds, ...ids])];
+
+      const tempList: any = [];
+      useCatchStore().getSubjectList.forEach((item: any) => {
+        const temp = { ...item };
+        temp.enableFlag = false;
+        if (Array.isArray(temp.instruments)) {
+          temp.instruments.forEach((child: any) => {
+            child.enableFlag = false;
+            if (allIds.includes(child.id)) {
+              child.enableFlag = true;
+              temp.enableFlag = true;
+            }
+          });
+        }
+        tempList.push(temp);
+      });
+      const tempSubjects: any[] = [];
+      tempList.forEach((subject: any) => {
+        if (subject.enableFlag) {
+          const { instruments, ...r } = subject;
+
+          if (instruments && instruments.length > 0) {
+            const tempChild: any[] = [];
+            instruments?.forEach((instrument: any) => {
+              if (instrument.enableFlag) {
+                tempChild.push(instrument);
+              }
+            });
+
+            if (tempChild.length > 0)
+              tempSubjects.push({ ...r, instruments: tempChild });
+          }
+        }
+      });
+      subjectList.value = tempSubjects;
+    };
+
+    onMounted(async () => {
+      await useCatchStore().getSubjects();
+      updateSubjectList();
+      eventGlobal.on('updateCoursewareHeadInfo', updateDefaultInfo);
+
+      eventGlobal.on('checkCoursewareForm', checkCoursewareForm);
+    });
+
+    expose({
+      getForms
+    });
+
+    return () => (
+      <>
+        <div class={styles.headerTitle}>
+          <i class={styles.iconBook}></i>
+          <span>{prepareStore.getSelectName}</span>
+        </div>
+
+        <div class={styles.formContainer}>
+          <div class={[styles.btnItem, styles.block]}>
+            <span class={[styles.btnTitle]}>
+              <span>*</span>课件标题
+            </span>
+            <NInput
+              placeholder="请输入课件标题"
+              v-model:value={forms.name}
+              maxlength={20}
+              clearable
+              status={checkForms.value[0]}
+              onUpdate:value={() => {
+                checkForms.value[0] = forms.name ? '' : 'error';
+              }}
+            />
+          </div>
+          <div class={[styles.btnItem, styles.block]}>
+            <span class={[styles.btnTitle]}>
+              <span>*</span>课件乐器
+            </span>
+            {/* <NSelect
+              status={checkForms.value[1]}
+              placeholder="请选择声部（可多选）"
+              class={styles.btnSubjectList}
+              options={prepareStore.getSubjectList}
+              labelField="name"
+              valueField="id"
+              multiple
+              maxTagCount={2}
+              size="small"
+              v-model:value={forms.subjects}
+              clearable
+              v-slots={{
+                action: () => (
+                  <>
+                    <NButton
+                      text
+                      style=" --n-width: 100% "
+                      size="small"
+                      onClick={() => chioseAll(prepareStore.getSubjectList)}>
+                      全选
+                    </NButton>
+                  </>
+                )
+              }}
+              onUpdate:value={() => {
+                checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
+              }}
+            /> */}
+            <NCascader
+              status={checkForms.value[1]}
+              placeholder="请选择乐器（可多选）"
+              class={styles.btnSubjectList}
+              options={subjectList.value}
+              checkStrategy="child"
+              showPath={false}
+              childrenField="instruments"
+              expandTrigger="hover"
+              labelField="name"
+              valueField="id"
+              clearable
+              filterable
+              multiple
+              maxTagCount={1}
+              v-model:value={forms.subjects}
+              onUpdate:value={() => {
+                checkForms.value[1] = forms.subjects?.length > 0 ? '' : 'error';
+              }}
+              v-slots={{
+                action: () => (
+                  <>
+                    <NButton
+                      text
+                      style=" --n-width: 100% "
+                      size="small"
+                      onClick={() => chioseAll(subjectList.value)}>
+                      全选
+                    </NButton>
+                  </>
+                )
+              }}
+            />
+          </div>
+          <div class={styles.btnItem}>
+            <span class={styles.btnTitle}>
+              自动播放
+              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
+                {{
+                  trigger: () => <i class={styles.iconQuestion}></i>,
+                  default: () =>
+                    '开启自动播放后，课件内视频、音频资源将自动播放'
+                }}
+              </NTooltip>
+            </span>
+
+            <NSwitch v-model:value={forms.autoPlay} />
+          </div>
+          <div class={styles.btnItem}>
+            <span class={styles.btnTitle}>
+              公开课件
+              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
+                {{
+                  trigger: () => <i class={styles.iconQuestion}></i>,
+                  default: () => '公开课件后，其它老师可以使用该课件上课'
+                }}
+              </NTooltip>
+            </span>
+            {!forms.openFlagEnable ? (
+              <NTooltip style={{ maxWidth: '200px' }} showArrow={false}>
+                {{
+                  trigger: () => (
+                    <NSwitch
+                      v-model:value={forms.openFlag}
+                      disabled={!forms.openFlagEnable}
+                    />
+                  ),
+                  default: () =>
+                    '为尊重课件原作者，在“相关课件”中添加的课件不支持公开'
+                }}
+              </NTooltip>
+            ) : (
+              <NSwitch
+                v-model:value={forms.openFlag}
+                disabled={!forms.openFlagEnable}
+              />
+            )}
+          </div>
+        </div>
+      </>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/courseware-presets/index.module.less

@@ -1,376 +1,432 @@
-.coursewarePresetsContainer {
-  // padding-bottom: 20px;
-  height: 100%;
-  display: flex;
-  // position: relative;
-  // overflow: hidden;
-
-  &.rightLineShow {
-    .presetsRight {
-      transition: all .1s ease;
-      opacity: 1;
-      position: relative;
-      transform: none;
-    }
-
-    // .list {
-    //   .itemWrap {
-    //     // width: calc(100% / 3);
-    //     width: 336px;
-    //   }
-    // }
-  }
-
-  :global {
-    .n-base-selection {
-      --n-height: max(36px, 32Px) !important;
-      width: 220px;
-      font-size: max(13px, 12Px);
-      border-radius: 7px !important;
-    }
-
-    .n-base-selection-input__content {
-      font-size: max(15px, 13Px);
-    }
-
-    .n-tabs-tab-pad {
-      width: 33px !important;
-    }
-
-    .n-tabs-nav {
-      padding-top: 20px;
-      padding-bottom: 10px;
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-  }
-
-  .presetsLeft {
-    flex: 1;
-    transition: all .1s ease;
-  }
-
-  .presetsRight {
-    position: relative;
-    background: #FFFFFF;
-    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
-    border-radius: 0px 17px 17px 0px;
-    flex: 0 0 340px;
-
-    transition: all .1s ease;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    transform: translateX(100%);
-
-
-    .presetsArrar {
-      position: absolute;
-      left: -23px;
-      top: 50%;
-      margin-top: -30px;
-      width: 23px;
-      height: 50px;
-      line-height: 50px;
-      cursor: pointer;
-      background-color: #F5F6FA;
-      border-radius: 10px 0 0 10px;
-      color: #ABAEB0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      svg {
-        transform: rotate(180deg);
-      }
-
-      &:hover {
-        color: #198CFE;
-      }
-
-      &.presetsArrarActive {
-        svg {
-          transform: rotate(0deg);
-        }
-      }
-    }
-  }
-}
-
-.openLoading {
-  min-height: 200px;
-}
-
-.coursewarePresets {
-  max-height: calc(var(--window-page-lesson-height) - 100px);
-  min-height: calc(var(--window-page-lesson-height) - 100px);
-  // padding: 0 20px 0px;
-}
-
-.btnSubjectList {
-  :global {
-    .n-base-selection-input {
-      padding-left: 8px;
-    }
-  }
-}
-
-.addBtnIcon {
-  width: 18px !important;
-  height: 18px !important;
-  margin-right: 8px;
-}
-
-.addBtn {
-  // height: max(36px, 32Px) !important;
-  background: linear-gradient(312deg, #1B7AF8 0%, #3CBBFF 100%) !important;
-  border-radius: 7Px !important;
-  padding: 0 16Px !important;
-  border-radius: 8px;
-  height: max(38px, 32Px);
-  font-size: max(18px, 13Px) !important;
-  font-weight: 600 !important;
-  position: relative;
-  z-index: 9;
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 10%;
-    bottom: -1px;
-    display: inline-block;
-    width: 80%;
-    height: 8px;
-    background: linear-gradient(136deg, #31ABFF 0%, #1A7BF8 100%);
-    opacity: 0.6;
-    filter: blur(7px);
-  }
-
-  &:hover {
-    // &::after {
-    background: linear-gradient(135deg, #62C7FF 0%, #4995FA 100%) !important;
-    // }
-  }
-}
-
-
-.title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 600;
-  font-size: max(17px, 14Px);
-  color: #000000;
-  line-height: 23px;
-  height: 23px;
-  text-align: left;
-  padding-bottom: 20px;
-  box-sizing: content-box;
-
-  .titleLeft {
-    display: flex;
-    align-items: center;
-  }
-
-  .icon {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin-right: 3px;
-  }
-
-  .iconWork {
-    background: url('../../../images/icon-knowlage.png') no-repeat center center;
-    background-size: contain;
-  }
-
-  .iconCourseware {
-    background: url('../../../images/icon-courseware.png') no-repeat center center;
-    background-size: contain;
-  }
-
-  &.line {
-    margin-top: 25px;
-    border-top: 1px solid #F2F2F2;
-    padding-top: 35px;
-
-    .more {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      padding-left: 10px;
-      font-weight: 400;
-      font-size: max(13px, 12Px);
-      color: #999999;
-
-      &:hover {
-        color: #1677FF;
-
-        .iconP {
-          background: url('../../../images/icon-arrow-p-active.png') no-repeat center;
-          background-size: contain;
-        }
-      }
-    }
-
-    .iconP {
-      width: 8px;
-      height: 11px;
-      display: inline-block;
-      background: url('../../../images/icon-arrow-p.png') no-repeat center;
-      background-size: contain;
-      margin-left: 4px;
-    }
-
-    .swipeControll {
-      height: 25px;
-
-      .leftIcon {
-        transform: rotate(180deg);
-      }
-
-      img {
-        cursor: pointer;
-        width: 25px;
-        height: 25px;
-      }
-
-      .disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-.listLoading {}
-
-.list {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  padding: 10px 20px 12px;
-  // padding: 0 20px 0px;
-  gap: 10px 0;
-  margin: 0 -10px 0;
-  // height: 313px;
-
-
-  &.listEmpty {
-    min-height: calc(var(--window-page-lesson-height) - 100px);
-    align-items: center;
-  }
-
-  &.listSame {
-    margin-top: 0;
-    padding-top: 0;
-  }
-
-  .empty1 {
-    // padding: 10px 0;
-  }
-
-  .itemWrap {
-    // width: calc(100% / 4);
-    width: 336px;
-    // padding-bottom: calc(100% / 3 * 0.73333);
-    // position: relative;
-
-    .itemWrapBox {
-      //   position: absolute;
-      //   left: 0;
-      //   top: 0;
-      //   width: 100%;
-      //   height: 100%;
-      padding: 0 10px;
-    }
-  }
-
-}
-
-.itemWrapBox {
-  padding: 0 10px;
-}
-
-.attendClassModal1 {
-  width: 1360px;
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.removeVisiable1 {
-  width: 432px;
-
-  :global {
-    .n-card-header {
-      font-size: max(22px, 16Px);
-    }
-  }
-
-  .studentRemove {
-    padding: 20px 40px 0;
-
-    p {
-      font-size: max(18px, 14Px);
-      color: #777777;
-      line-height: 30px;
-
-      span {
-        color: #EA4132;
-      }
-    }
-  }
-
-  .btnGroupModal {
-    padding: 32px 0;
-
-    :global {
-      .n-button {
-        height: 47px;
-        min-width: 156px;
-      }
-    }
-  }
-}
-
-.attendClassModal {
-  width: 800px;
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-.workVisiable {
-  width: 1258px;
-}
-
-.workContainer {
-  display: flex;
-  align-items: center;
-
-  .workTrain {
-    flex: 1;
-    height: 75vh;
-
-    &>div {
-      padding-top: 15px;
-    }
-  }
-
-  :global {
-    .train-container {
-      // max-height: calc(var(--window-page-lesson-height) - 135px) !important;
-      max-height: calc(var(--window-page-lesson-height) - 100px) !important;
-
-      .train-listSection {
-        min-height: calc(var(--window-page-lesson-height) - 100px) !important;
-      }
-    }
-  }
-
-  .resourceMain {
-    flex: 0 0 360px;
-    height: 75vh;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  }
+.coursewarePresetsContainer {
+  // padding-bottom: 20px;
+  height: 100%;
+  display: flex;
+  // position: relative;
+  // overflow: hidden;
+
+  &.rightLineShow {
+    .presetsRight {
+      transition: all .1s ease;
+      opacity: 1;
+      position: relative;
+      transform: none;
+    }
+
+    // .list {
+    //   .itemWrap {
+    //     // width: calc(100% / 3);
+    //     width: 336px;
+    //   }
+    // }
+  }
+
+  :global {
+    .n-base-selection {
+      --n-height: max(36px, 32Px) !important;
+      width: 220px;
+      font-size: max(13px, 12Px);
+      border-radius: 7px !important;
+    }
+
+    .n-base-selection-input__content {
+      font-size: max(15px, 13Px);
+    }
+
+    .n-tabs-tab-pad {
+      width: 33px !important;
+    }
+
+    .n-tabs-tab.n-tabs-tab--disabled {
+      color: #8B8D98 !important;
+    }
+
+    .n-tabs-nav {
+      padding-top: 20px;
+      padding-bottom: 10px;
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+
+  .presetsLeft {
+    flex: 1;
+    transition: all .1s ease;
+  }
+
+  .presetsRight {
+    position: relative;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 0px 17px 17px 0px;
+    flex: 0 0 340px;
+
+    transition: all .1s ease;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    transform: translateX(100%);
+
+
+    .presetsArrar {
+      position: absolute;
+      left: -23px;
+      top: 50%;
+      margin-top: -30px;
+      width: 23px;
+      height: 50px;
+      line-height: 50px;
+      cursor: pointer;
+      background-color: #F5F6FA;
+      border-radius: 10px 0 0 10px;
+      color: #ABAEB0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        transform: rotate(180deg);
+      }
+
+      &:hover {
+        color: #198CFE;
+      }
+
+      &.presetsArrarActive {
+        svg {
+          transform: rotate(0deg);
+        }
+      }
+    }
+  }
+}
+
+.openLoading {
+  min-height: 200px;
+}
+
+.coursewarePresets {
+  max-height: calc(var(--window-page-lesson-height) - 100px);
+  min-height: calc(var(--window-page-lesson-height) - 100px);
+  // padding: 0 20px 0px;
+}
+
+.btnSubjectList {
+  :global {
+    .n-base-selection-input {
+      padding-left: 8px;
+    }
+  }
+}
+
+.addBtnIcon {
+  width: 18px !important;
+  height: 18px !important;
+  margin-right: 8px;
+}
+
+.addBtn {
+  // height: max(36px, 32Px) !important;
+  background: linear-gradient(312deg, #1B7AF8 0%, #3CBBFF 100%) !important;
+  border-radius: 7Px !important;
+  padding: 0 16Px !important;
+  border-radius: 8px;
+  height: max(38px, 32Px);
+  font-size: max(18px, 13Px) !important;
+  font-weight: 600 !important;
+  position: relative;
+  z-index: 9;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 10%;
+    bottom: -1px;
+    display: inline-block;
+    width: 80%;
+    height: 8px;
+    background: linear-gradient(136deg, #31ABFF 0%, #1A7BF8 100%);
+    opacity: 0.6;
+    filter: blur(7px);
+  }
+
+  &:hover {
+    // &::after {
+    background: linear-gradient(135deg, #62C7FF 0%, #4995FA 100%) !important;
+    // }
+  }
+}
+
+
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  font-size: max(17px, 14Px);
+  color: #000000;
+  line-height: 23px;
+  height: 23px;
+  text-align: left;
+  padding-bottom: 20px;
+  box-sizing: content-box;
+
+  .titleLeft {
+    display: flex;
+    align-items: center;
+  }
+
+  .icon {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-right: 3px;
+  }
+
+  .iconWork {
+    background: url('../../../images/icon-knowlage.png') no-repeat center center;
+    background-size: contain;
+  }
+
+  .iconCourseware {
+    background: url('../../../images/icon-courseware.png') no-repeat center center;
+    background-size: contain;
+  }
+
+  &.line {
+    margin-top: 25px;
+    border-top: 1px solid #F2F2F2;
+    padding-top: 35px;
+
+    .more {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      padding-left: 10px;
+      font-weight: 400;
+      font-size: max(13px, 12Px);
+      color: #999999;
+
+      &:hover {
+        color: #1677FF;
+
+        .iconP {
+          background: url('../../../images/icon-arrow-p-active.png') no-repeat center;
+          background-size: contain;
+        }
+      }
+    }
+
+    .iconP {
+      width: 8px;
+      height: 11px;
+      display: inline-block;
+      background: url('../../../images/icon-arrow-p.png') no-repeat center;
+      background-size: contain;
+      margin-left: 4px;
+    }
+
+    .swipeControll {
+      height: 25px;
+
+      .leftIcon {
+        transform: rotate(180deg);
+      }
+
+      img {
+        cursor: pointer;
+        width: 25px;
+        height: 25px;
+      }
+
+      .disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.listLoading {}
+
+.list {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  padding: 10px 20px 12px;
+  // padding: 0 20px 0px;
+  gap: 10px 0;
+  margin: 0 -10px 0;
+  // height: 313px;
+
+
+  &.listEmpty {
+    min-height: calc(var(--window-page-lesson-height) - 100px);
+    align-items: center;
+  }
+
+  &.listSame {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  .empty1 {
+    // padding: 10px 0;
+  }
+
+  .itemWrap {
+    // width: calc(100% / 4);
+    width: 336px;
+    // padding-bottom: calc(100% / 3 * 0.73333);
+    // position: relative;
+
+    .itemWrapBox {
+      //   position: absolute;
+      //   left: 0;
+      //   top: 0;
+      //   width: 100%;
+      //   height: 100%;
+      padding: 0 10px;
+    }
+  }
+
+}
+
+.itemWrapBox {
+  padding: 0 10px;
+}
+
+.attendClassModal1 {
+  width: 1360px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.removeVisiable1 {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+.attendClassModal {
+  width: 800px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.workVisiable {
+  width: 1258px;
+}
+
+.workContainer {
+  display: flex;
+  align-items: center;
+
+  .workTrain {
+    flex: 1;
+    height: 75vh;
+
+    &>div {
+      padding-top: 15px;
+    }
+  }
+
+  :global {
+    .train-container {
+      // max-height: calc(var(--window-page-lesson-height) - 135px) !important;
+      max-height: calc(var(--window-page-lesson-height) - 100px) !important;
+
+      .train-listSection {
+        min-height: calc(var(--window-page-lesson-height) - 100px) !important;
+      }
+    }
+  }
+
+  .resourceMain {
+    flex: 0 0 360px;
+    height: 75vh;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+}
+
+.textBtn {
+  // background: #fff;
+  // border-radius: 8Px;
+  // padding: 4Px 0;
+  // font-size: max(16px, 13Px);
+  // color: rgba(0, 0, 0, 0.6);
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    width: 8px;
+    height: 5px;
+    background: url('@/views/prepare-lessons/images/icon-arrow-1.png') no-repeat center center / contain;
+    // transform: rotate(180deg);
+  }
+
+  &:hover,
+  &.textBtnActive {
+    // background: #D2ECFF;
+    font-weight: 600;
+    color: #131415;
+  }
+
+  &:hover {
+    color: #198CFE;
+
+    .iconArrow {
+      // transform: rotate(0deg);
+      background: url('@/views/prepare-lessons/images/icon-arrow-2.png') no-repeat center center / contain;
+    }
+  }
 }

src/views/prepare-lessons/components/lesson-main/courseware-presets/index.tsx

@@ -1,6 +1,6 @@
 import {
+  computed,
   defineComponent,
-  nextTick,
   onMounted,
   reactive,
   ref,
@@ -10,22 +10,19 @@ import styles from './index.module.less';
 import {
   NButton,
   NTooltip,
-  NCarousel,
   NIcon,
   NImage,
-  NInput,
   NModal,
   NScrollbar,
-  NSelect,
-  NSpace,
   NSpin,
   NTabPane,
   NTabs,
-  useMessage
+  useMessage,
+  NPopselect
 } from 'naive-ui';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import add from '@/views/studentList/images/add.png';
-import iconSlideRight from '../../../images/icon-slide-right.png';
+// import iconSlideRight from '../../../images/icon-slide-right.png';
 import CoursewareType from '../../../model/courseware-type';
 import TheEmpty from '/src/components/TheEmpty';
 import RelatedClass from '../../../model/related-class';
@@ -35,8 +32,6 @@ import AttendClass from '/src/views/prepare-lessons/model/attend-class';
 import {
   api_addByOpenCourseware,
   api_teacherChapterLessonCoursewareRemove,
-  api_queryOpenCoursewareByPage,
-  api_updateCoursewareInfo,
   teacherChapterLessonCoursewareList,
   courseScheduleStart
 } from '../../../api';
@@ -71,8 +66,8 @@ export default defineComponent({
       leftWidth: '100%',
       rightWidth: '0',
       messageLoading: false,
-      subjectId: route.query.subjectId
-        ? Number(route.query.subjectId)
+      instrumentId: route.query.instrumentId
+        ? Number(route.query.instrumentId)
         : localStorageSubjectId
         ? Number(localStorageSubjectId)
         : '',
@@ -100,10 +95,11 @@ export default defineComponent({
       previewParams: {
         type: '',
         courseId: '',
-        subjectId: '',
+        instrumentId: '',
         detailId: ''
       } as any,
-      workVisiable: false
+      workVisiable: false,
+      wikiCategoryIdChild: null
     });
 
     const getCoursewareList = async () => {
@@ -113,7 +109,7 @@ export default defineComponent({
         if (!prepareStore.getSelectKey) return (forms.loading = false);
 
         const { data } = await teacherChapterLessonCoursewareList({
-          subjectId: prepareStore.getSubjectId,
+          instrumentId: prepareStore.getInstrumentId,
           coursewareDetailKnowledgeId: prepareStore.getSelectKey
         });
         if (!Array.isArray(data)) {
@@ -128,7 +124,7 @@ export default defineComponent({
             lessonPreTrainingId: item.lessonPreTrainingId,
             openFlag: item.openFlag,
             openFlagEnable: item.openFlagEnable,
-            subjectNames: item.subjectNames,
+            instrumentNames: item.instrumentNames,
             fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
             name: item.name,
             coverImg: firstItem?.bizInfo.coverImg,
@@ -145,7 +141,7 @@ export default defineComponent({
 
     // 监听选择的key 左侧选择了其它的课
     watch(
-      () => [prepareStore.getSelectKey, prepareStore.getSubjectId],
+      () => [prepareStore.getSelectKey, prepareStore.getInstrumentId],
       async () => {
         eventGlobal.emit('openCoursewareChanged');
         await getCoursewareList();
@@ -156,22 +152,22 @@ export default defineComponent({
     );
 
     watch(
-      () => prepareStore.getSubjectList,
+      () => prepareStore.getInstrumentList,
       () => {
-        checkSubjectIds();
+        checkInstrumentIds();
       }
     );
 
-    const checkSubjectIds = () => {
-      const subjectList = prepareStore.getSubjectList;
+    const checkInstrumentIds = () => {
+      const instrumentsList = prepareStore.getSingleInstrumentList;
 
       // 并且没有声部时才会更新
-      if (subjectList.length > 0) {
+      if (instrumentsList.length > 0) {
         const prepareLessonCourseWareSubjectIsNull = sessionStorage.getItem(
           'prepareLessonCourseWareSubjectIsNull'
         );
         if (prepareLessonCourseWareSubjectIsNull === 'true') {
-          prepareStore.setSubjectId('');
+          prepareStore.setInstrumentId('');
           return;
         }
 
@@ -180,57 +176,72 @@ export default defineComponent({
           'prepareLessonSubjectId'
         );
         // // 先取 上次上课声部，在取班级声部 最后取缓存
-        let subjectId = null;
+        let instrumentId = null;
         let index = -1;
         if (forms.courseScheduleSubjectId) {
           // 判断浏览器上面是否有
-          index = subjectList.findIndex(
+          index = instrumentsList.findIndex(
             (subject: any) => subject.id == forms.courseScheduleSubjectId
           );
           if (index >= 0) {
-            subjectId = Number(forms.courseScheduleSubjectId);
+            instrumentId = Number(forms.courseScheduleSubjectId);
           }
         }
         // 判断班级上面声部 & 还没有声部
-        if (forms.subjectId && !subjectId) {
+        if (forms.instrumentId && !instrumentId) {
           // 判断浏览器上面是否有
-          index = subjectList.findIndex(
-            (subject: any) => subject.id == forms.subjectId
+          index = instrumentsList.findIndex(
+            (subject: any) => subject.id == forms.instrumentId
           );
           if (index >= 0) {
-            subjectId = Number(forms.subjectId);
+            instrumentId = Number(forms.instrumentId);
           }
         }
         // 缓存声部 & 还没有声部
-        if (localStorageSubjectId && !subjectId) {
+        if (localStorageSubjectId && !instrumentId) {
           // 判断浏览器上面是否有
-          index = subjectList.findIndex(
+          index = instrumentsList.findIndex(
             (subject: any) => subject.id == localStorageSubjectId
           );
           if (index >= 0) {
-            subjectId = Number(localStorageSubjectId);
+            instrumentId = Number(localStorageSubjectId);
           }
         }
         // 判断是否选择为空
-        if (subjectId && index >= 0) {
-          prepareStore.setSubjectId(subjectId);
-          // forms.subjectId = subjectId;
+        if (instrumentId && index >= 0) {
+          prepareStore.setSubjectId(instrumentId);
+          // forms.instrumentId = instrumentId;
         } else {
           // 判断是否有缓存
-          // prepareStore.setSubjectId(subjectList[0].id);
-          // forms.subjectId = subjectList[0].id;
+          // prepareStore.setSubjectId(instrumentsList[0].id);
+          // forms.instrumentId = instrumentsList[0].id;
         }
 
         // 保存
         localStorage.setItem(
           'prepareLessonSubjectId',
-          prepareStore.getSubjectId as any
+          prepareStore.getInstrumentId as any
         );
 
         subjectRef.value?.syncBarPosition();
       }
     };
 
+    const getInitInstrumentId = () => {
+      let instrumentId: any = '';
+      prepareStore.getInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            if (child.id === prepareStore.getInstrumentId) {
+              instrumentId = child.id;
+            }
+          });
+        }
+      });
+      if (instrumentId) {
+        forms.wikiCategoryIdChild = instrumentId;
+      }
+    };
     const subjectRef = ref();
     onMounted(async () => {
       useResizeObserver(
@@ -251,35 +262,20 @@ export default defineComponent({
       );
 
       prepareStore.setClassGroupId(route.query.classGroupId as any);
-      if (!prepareStore.getSubjectId) {
+      if (!prepareStore.getInstrumentId) {
         // 获取教材分类列表
-        checkSubjectIds();
+        checkInstrumentIds();
+      } else {
+        getInitInstrumentId();
       }
 
       await getCoursewareList();
 
-      // console.log(props.addParam, 'addCourseware');
       if (props.addParam.isAdd) {
         forms.addVisiable = true;
       }
     });
 
-    // 重命名
-    // const onEditTitleSubmit = async () => {
-    //   try {
-    //     await api_updateCoursewareInfo({
-    //       id: forms.selectItem.id,
-    //       name: forms.editTitle
-    //     });
-    //     message.success('修改成功');
-    //     getCoursewareList();
-    //     // getOpenCoursewareList()
-    //     forms.editTitleVisiable = false;
-    //   } catch {
-    //     //
-    //   }
-    // };
-
     // 删除
     const onRemove = async () => {
       forms.messageLoading = true;
@@ -330,7 +326,7 @@ export default defineComponent({
         forms.previewParams = {
           type: 'preview',
           courseId: id,
-          subjectId: prepareStore.getSubjectId,
+          instrumentId: prepareStore.getInstrumentId,
           detailId: prepareStore.getSelectKey,
           lessonCourseId: prepareStore.getBaseCourseware.id
         };
@@ -340,7 +336,7 @@ export default defineComponent({
           query: {
             type: 'preview',
             courseId: id,
-            subjectId: prepareStore.getSubjectId,
+            instrumentId: prepareStore.getInstrumentId,
             detailId: prepareStore.getSelectKey,
             lessonCourseId: prepareStore.getBaseCourseware.id
           }
@@ -352,7 +348,7 @@ export default defineComponent({
     const onStartClass = async (
       item: any,
       classGroupId: any,
-      subjectId?: any
+      instrumentId?: any
     ) => {
       if (classGroupId) {
         // 开始上课
@@ -360,7 +356,7 @@ export default defineComponent({
           lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
           classGroupId: classGroupId,
           useChapterLessonCoursewareId: item.id
-          // subjectId: prepareStore.getSubjectId
+          // instrumentId: prepareStore.getInstrumentId
         });
         if (window.matchMedia('(display-mode: standalone)').matches) {
           state.application = window.matchMedia(
@@ -372,7 +368,7 @@ export default defineComponent({
             type: 'class',
             classGroupId: classGroupId,
             courseId: item.id,
-            subjectId: subjectId || route.query.subjectId,
+            instrumentId: instrumentId || route.query.instrumentId,
             detailId: prepareStore.getSelectKey,
             classId: res.data,
             lessonCourseId: prepareStore.getBaseCourseware.id,
@@ -385,7 +381,8 @@ export default defineComponent({
               type: 'class',
               classGroupId: classGroupId,
               courseId: item.id,
-              subjectId: prepareStore.getSubjectId,
+              // instrumentId: prepareStore.getInstrumentId,
+              instrumentId: instrumentId || route.query.instrumentId,
               detailId: prepareStore.getSelectKey,
               classId: res.data,
               lessonCourseId: prepareStore.getBaseCourseware.id,
@@ -401,14 +398,32 @@ export default defineComponent({
       }
     };
 
-    // const carouselRef = ref();
-    // const onChangeSlide = (type: 'left' | 'right') => {
-    //   if (type === 'left') {
-    //     carouselRef.value?.prev();
-    //   } else if (type === 'right') {
-    //     carouselRef.value?.next();
-    //   }
-    // };
+    const selectChildObj = (item: any, index: number) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.wikiCategoryIdChild) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
+    const tabInstrumentValue = computed(() => {
+      let instrumentId: any = prepareStore.getInstrumentId
+        ? prepareStore.getInstrumentId
+        : '';
+      prepareStore.getFormatInstrumentList.forEach((item: any) => {
+        if (Array.isArray(item.instruments)) {
+          item.instruments.forEach((child: any) => {
+            if (child.id === prepareStore.getInstrumentId) {
+              instrumentId = item.id + '';
+            }
+          });
+        }
+      });
+      return instrumentId;
+    });
     return () => (
       <div
         class={[
@@ -425,17 +440,23 @@ export default defineComponent({
             paneClass={styles.paneTitle}
             justifyContent="start"
             paneWrapperClass={styles.paneWrapperContainer}
-            value={
-              prepareStore.getSubjectId
-                ? prepareStore.getSubjectId?.toString()
-                : ''
-            }
-            onUpdate:value={val => {
-              prepareStore.setSubjectId(val);
-              // 保存
-              forms.subjectId = val;
+            value={tabInstrumentValue.value}
+            onUpdate:value={(val: any) => {
+              console.log(val, 'item.id', prepareStore.getFormatInstrumentList);
+              prepareStore.getFormatInstrumentList.forEach((item: any) => {
+                if (item.value.toString() === val.toString()) {
+                  prepareStore.setInstrumentId(val);
+                  // 保存
+                  forms.instrumentId = val;
+                  forms.wikiCategoryIdChild = null;
+                }
+              });
 
               if (!val) {
+                prepareStore.setInstrumentId(val);
+                // 保存
+                forms.instrumentId = val;
+                forms.wikiCategoryIdChild = null;
                 sessionStorage.setItem(
                   'prepareLessonCourseWareSubjectIsNull',
                   val ? 'false' : 'true'
@@ -463,14 +484,54 @@ export default defineComponent({
                 </NButton>
               )
             }}>
-            {[{ name: '全部声部', id: '' }, ...prepareStore.getSubjectList].map(
-              (item: any) => (
-                <NTabPane
-                  name={`${item.id}`}
-                  tab={item.name}
-                  displayDirective="if"></NTabPane>
-              )
-            )}
+            {[
+              { name: '全部乐器', id: '', label: '全部乐器', value: '' },
+              ...prepareStore.getFormatInstrumentList
+            ].map((item: any, index: number) => (
+              <NTabPane
+                name={`${item.value}`}
+                tab={item.label}
+                disabled={item.instruments?.length > 0}
+                displayDirective="if">
+                {{
+                  tab: () =>
+                    item.instruments?.length > 0 ? (
+                      <NPopselect
+                        options={item.instruments}
+                        trigger="hover"
+                        v-model:value={forms.wikiCategoryIdChild}
+                        onUpdate:value={(val: any) => {
+                          // onSearch();
+                          prepareStore.setInstrumentId(val);
+                          // 保存
+                          forms.instrumentId = val;
+
+                          if (!val) {
+                            sessionStorage.setItem(
+                              'prepareLessonCourseWareSubjectIsNull',
+                              val ? 'false' : 'true'
+                            );
+                          }
+                        }}
+                        key={item.id}
+                        class={styles.popSelect}>
+                        <span
+                          class={[
+                            styles.textBtn,
+                            selectChildObj(item.instruments, index).selected &&
+                              styles.textBtnActive
+                          ]}>
+                          {selectChildObj(item.instruments, index).label ||
+                            item.label}
+                          <i class={styles.iconArrow}></i>
+                        </span>
+                      </NPopselect>
+                    ) : (
+                      item.label
+                    )
+                }}
+              </NTabPane>
+            ))}
           </NTabs>
           <NSpin show={forms.loading}>
             <NScrollbar class={styles.coursewarePresets}>
@@ -576,8 +637,8 @@ export default defineComponent({
           blockScroll={false}>
           <RelatedClass
             tableList={forms.tableList}
-            subjectList={prepareStore.getSubjectList}
-            subjectId={prepareStore.getSubjectId as any}
+            instrumentList={prepareStore.getInstrumentList}
+            instrumentId={prepareStore.getInstrumentId as any}
             coursewareDetailKnowledgeId={prepareStore.getSelectKey}
             onClose={() => (forms.showRelatedClass = false)}
             onAdd={(item: any) => onAddCourseware(item)}
@@ -697,7 +758,7 @@ export default defineComponent({
               onStartClass(
                 forms.attendClassItem,
                 item.classGroupId,
-                item.subjectId
+                item.instrumentId
               );
             }}
           />

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/index.tsx

@@ -1,161 +1,161 @@
-import {
-  PropType,
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  reactive,
-  watch
-} from 'vue';
-import ResourceSearchGroup from './resource-search-group';
-import { NModal, NScrollbar, NSpin } from 'naive-ui';
-import styles from './index.module.less';
-import TheEmpty from '/src/components/TheEmpty';
-import { useThrottleFn } from '@vueuse/core';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { api_queryOpenCoursewareByPage } from '/src/views/prepare-lessons/api';
-import Item from './item';
-import { eventGlobal } from '/src/utils';
-
-export default defineComponent({
-  name: 'share-resources',
-  emits: ['look', 'add'],
-  setup(props, { emit }) {
-    const prepareStore = usePrepareStore();
-    const state = reactive({
-      loading: false,
-      finshed: false, // 是否加载完
-      pagination: {
-        page: 1,
-        rows: 10
-      },
-      searchGroup: {
-        keyword: ''
-      },
-      tableList: [] as any,
-      editStatus: false,
-      editItem: {} as any,
-      show: false,
-      item: {} as any
-    });
-    const getList = async () => {
-      try {
-        if (!prepareStore.getSelectKey) return;
-
-        if (state.pagination.page === 1) {
-          state.loading = true;
-        }
-        // 查询公开课件列表
-        const { data } = await api_queryOpenCoursewareByPage({
-          subjectId: prepareStore.getSubjectId,
-          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-          ...state.searchGroup,
-          ...state.pagination
-        });
-        if (state.pagination.page === 1 && state.tableList.length > 0) {
-          state.tableList = [];
-        }
-        const result = data.rows || [];
-        const tempList: any = [];
-        result.forEach((item: any) => {
-          // const index = forms.tableList.findIndex(
-          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
-          // );
-          const firstItem: any =
-            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
-          tempList.push({
-            id: item.id,
-            openFlag: item.openFlag,
-            openFlagEnable: item.openFlagEnable,
-            subjectNames: item.subjectNames,
-            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
-            name: item.name,
-            coverImg: firstItem?.bizInfo.coverImg,
-            type: firstItem?.bizInfo.type,
-            isAdd: item.addFlag
-          });
-        });
-
-        state.loading = false;
-        state.tableList.push(...tempList);
-        // console.log(result, 'result', data);
-        state.finshed = data.pages <= data.current ? true : false;
-      } catch {
-        state.loading = false;
-      }
-    };
-
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-      state.tableList = [];
-      state.searchGroup = Object.assign(state.searchGroup, item);
-      getList();
-    };
-
-    // 声部变化时
-    // watch(
-    //   () => prepareStore.getSubjectId,
-    //   () => {
-    //     onSearch(state.searchGroup);
-    //   }
-    // );
-
-    const throttledFn = useThrottleFn(() => {
-      state.pagination.page = state.pagination.page + 1;
-      getList();
-    }, 500);
-
-    const eventChanged = () => {
-      onSearch(state.searchGroup);
-    };
-    onMounted(() => {
-      getList();
-      eventGlobal.on('openCoursewareChanged', eventChanged);
-    });
-    onUnmounted(() => {
-      eventGlobal.off('openCoursewareChanged', eventChanged);
-    });
-    return () => (
-      <div>
-        <ResourceSearchGroup onSearch={(item: any) => onSearch(item)} />
-        <NScrollbar
-          class={[styles.listContainer, styles.listNoMusic]}
-          onScroll={(e: any) => {
-            const clientHeight = e.target?.clientHeight;
-            const scrollTop = e.target?.scrollTop;
-            const scrollHeight = e.target?.scrollHeight;
-            // 是否到底，是否加载完
-            if (
-              clientHeight + scrollTop + 20 >= scrollHeight &&
-              !state.finshed &&
-              !state.loading
-            ) {
-              throttledFn();
-            }
-          }}>
-          <NSpin show={state.loading} size={'small'}>
-            <div
-              class={[
-                styles.listSection,
-                !state.loading && state.tableList.length <= 0
-                  ? styles.emptySection
-                  : ''
-              ]}>
-              {state.tableList.length > 0 && (
-                <div class={styles.list}>
-                  {state.tableList.map((item: any) => (
-                    <Item
-                      item={item}
-                      onAdd={() => emit('add', item)}
-                      onLook={() => emit('look', item)}
-                    />
-                  ))}
-                </div>
-              )}
-              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
-            </div>
-          </NSpin>
-        </NScrollbar>
-      </div>
-    );
-  }
-});
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  watch
+} from 'vue';
+import ResourceSearchGroup from './resource-search-group';
+import { NModal, NScrollbar, NSpin } from 'naive-ui';
+import styles from './index.module.less';
+import TheEmpty from '/src/components/TheEmpty';
+import { useThrottleFn } from '@vueuse/core';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { api_queryOpenCoursewareByPage } from '/src/views/prepare-lessons/api';
+import Item from './item';
+import { eventGlobal } from '/src/utils';
+
+export default defineComponent({
+  name: 'share-resources',
+  emits: ['look', 'add'],
+  setup(props, { emit }) {
+    const prepareStore = usePrepareStore();
+    const state = reactive({
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 10
+      },
+      searchGroup: {
+        keyword: ''
+      },
+      tableList: [] as any,
+      editStatus: false,
+      editItem: {} as any,
+      show: false,
+      item: {} as any
+    });
+    const getList = async () => {
+      try {
+        if (!prepareStore.getSelectKey) return;
+
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
+        // 查询公开课件列表
+        const { data } = await api_queryOpenCoursewareByPage({
+          instrumentId: prepareStore.getInstrumentId,
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        if (state.pagination.page === 1 && state.tableList.length > 0) {
+          state.tableList = [];
+        }
+        const result = data.rows || [];
+        const tempList: any = [];
+        result.forEach((item: any) => {
+          // const index = forms.tableList.findIndex(
+          //   (i: any) => i.fromChapterLessonCoursewareId === item.id
+          // );
+          const firstItem: any =
+            item.chapterKnowledgeList[0]?.chapterKnowledgeMaterialList[0];
+          tempList.push({
+            id: item.id,
+            openFlag: item.openFlag,
+            openFlagEnable: item.openFlagEnable,
+            instrumentNames: item.instrumentNames,
+            fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
+            name: item.name,
+            coverImg: firstItem?.bizInfo.coverImg,
+            type: firstItem?.bizInfo.type,
+            isAdd: item.addFlag
+          });
+        });
+
+        state.loading = false;
+        state.tableList.push(...tempList);
+        // console.log(result, 'result', data);
+        state.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      state.tableList = [];
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      getList();
+    };
+
+    // 声部变化时
+    // watch(
+    //   () => prepareStore.getSubjectId,
+    //   () => {
+    //     onSearch(state.searchGroup);
+    //   }
+    // );
+
+    const throttledFn = useThrottleFn(() => {
+      state.pagination.page = state.pagination.page + 1;
+      getList();
+    }, 500);
+
+    const eventChanged = () => {
+      onSearch(state.searchGroup);
+    };
+    onMounted(() => {
+      getList();
+      eventGlobal.on('openCoursewareChanged', eventChanged);
+    });
+    onUnmounted(() => {
+      eventGlobal.off('openCoursewareChanged', eventChanged);
+    });
+    return () => (
+      <div>
+        <ResourceSearchGroup onSearch={(item: any) => onSearch(item)} />
+        <NScrollbar
+          class={[styles.listContainer, styles.listNoMusic]}
+          onScroll={(e: any) => {
+            const clientHeight = e.target?.clientHeight;
+            const scrollTop = e.target?.scrollTop;
+            const scrollHeight = e.target?.scrollHeight;
+            // 是否到底，是否加载完
+            if (
+              clientHeight + scrollTop + 20 >= scrollHeight &&
+              !state.finshed &&
+              !state.loading
+            ) {
+              throttledFn();
+            }
+          }}>
+          <NSpin show={state.loading} size={'small'}>
+            <div
+              class={[
+                styles.listSection,
+                !state.loading && state.tableList.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}>
+              {state.tableList.length > 0 && (
+                <div class={styles.list}>
+                  {state.tableList.map((item: any) => (
+                    <Item
+                      item={item}
+                      onAdd={() => emit('add', item)}
+                      onLook={() => emit('look', item)}
+                    />
+                  ))}
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
+        </NScrollbar>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/courseware-presets/select-related/item.tsx

@@ -43,7 +43,7 @@ export default defineComponent({
             <TheNoticeBar text={props.item.name} />
           </p>
 
-          <div class={styles.itemSubject}>{props.item.subjectNames}</div>
+          <div class={styles.itemSubject}>{props.item.instrumentNames}</div>
         </div>
       </div>
     );

src/views/prepare-lessons/components/lesson-main/courseware/addCourseware.module.less

@@ -1,486 +1,484 @@
-// .btnGroup {
-//   display: flex;
-//   align-items: center;
-//   justify-content: space-between;
-//   margin-left: 22px !important;
-//   margin-right: 22px !important;
-//   // height: 40px;
-//   padding-bottom: 25px;
-//   border-bottom: 1px solid #F0F0F0;
-//   margin-bottom: 10px;
-
-
-//   .btnClassList {
-//     :global {
-//       .n-base-selection {
-//         width: 200px !important;
-//       }
-
-//       .n-base-selection-label {
-//         &::before {
-//           margin-left: 12px;
-//           content: ' ';
-//           width: max(20px, 14Px);
-//           height: max(20px, 14Px);
-//           flex-shrink: 0;
-//           background: url('../../../images/icon-class-name.png') no-repeat center;
-//           background-size: contain;
-//         }
-//       }
-
-//       .n-base-selection-input {
-//         padding-left: 8px;
-//       }
-
-//       .n-base-selection.n-base-selection--disabled {
-//         cursor: pointer;
-//       }
-
-//       .n-base-selection.n-base-selection--disabled .n-base-selection-label {
-//         background-color: #fff;
-//         cursor: pointer;
-//       }
-
-//       .n-base-selection.n-base-selection--disabled .n-base-selection-label .n-base-selection-input {
-//         color: var(--n-text-color);
-//         cursor: pointer;
-//       }
-
-//       .n-base-selection .n-base-selection-overlay {
-//         left: 24px;
-//       }
-//     }
-//   }
-
-
-//   .btnSubjectList {
-//     :global {
-//       .n-base-selection-tag-wrapper .n-tag {
-//         font-size: max(14px, 12Px);
-//       }
-//     }
-//   }
-
-//   :global {
-
-//     .n-input,
-//     .n-base-selection {
-//       --n-height: max(40px, 36Px) !important;
-//       width: 200px !important;
-//       font-size: 15px;
-//       border-radius: 8px !important;
-//     }
-
-//     .n-base-selection-input__content {
-//       font-size: max(15px, 13Px);
-//     }
-
-//     .n-button {
-//       border-radius: 8px;
-//       height: 38px;
-//       font-size: max(18px, 13Px);
-//       font-weight: 600 !important;
-//       padding: 0 27px;
-//     }
-
-//     .n-button--default-type {
-//       background: #E8F4FF;
-//       color: #0378EC;
-
-//       &:not(.n-button--disabled):hover {
-//         background: #E8F4FF;
-//       }
-
-//       .n-button__border {
-//         border: 1px solid #198CFE;
-//       }
-//     }
-
-//     .n-button--error-type {
-//       background: #FDEBED !important;
-//       color: #EC3A4E !important;
-
-//       &:not(.n-button--disabled):hover,
-//       &:not(.n-button--disabled):active {
-//         background: #FDEBED;
-//         color: #EC3A4E;
-//       }
-
-//       .n-button__border {
-//         border: 1px solid #EC3A4E;
-//       }
-//     }
-//   }
-
-//   .btnClassStart {
-//     background: #F44541 !important;
-//     color: #fff !important;
-
-//     :global {
-//       .n-button__border {
-//         border: 1px solid #F44541;
-//       }
-//     }
-//   }
-
-//   .btnItem {
-//     display: flex;
-//     align-items: center;
-//     height: max(40px, 36Px) !important;
-
-//     .btnTitle {
-//       flex-shrink: 0;
-//       font-size: max(18px, 13Px);
-//       font-weight: 600;
-
-//       span {
-//         color: #EA4132;
-//       }
-//     }
-
-//     // &:last-child {
-//     //   margin-left: 12px;
-//     // }
-//   }
-// }
-
-.tipsContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 1 auto;
-  margin-right: 30px;
-  height: 40px;
-  padding: 0 16px;
-  background: #EDF7FF;
-  border-radius: 9px;
-  max-width: 600px;
-
-  .tipsLeft {
-    display: flex;
-    align-items: center;
-    font-size: max(16px, 12Px);
-    color: rgba(0, 0, 0, 0.88);
-
-
-    .tips {
-      line-height: 38px;
-    }
-  }
-
-  .iconTips {
-    margin-right: 9px;
-    width: 18px;
-    height: 18px;
-  }
-
-  .btnNoTips {
-    font-size: max(16px, 12Px);
-    font-weight: 500;
-    color: #1677FF;
-    cursor: pointer;
-  }
-}
-
-.btnGroupClass {
-  padding-top: 10px;
-}
-
-.listContainer {
-  margin: 20px 0 20px;
-  // // 52 + 28 + 38 + 38 多余10像素空间
-  // max-height: calc(var(--window-page-lesson-height) - 196px);
-
-  // .listSection {
-  //   min-height: calc(var(--window-page-lesson-height) - 196px);
-  // }
-
-  // &.listContainerDrag {
-  //   max-height: calc(var(--window-page-lesson-height) - 148px);
-
-  //   .listSection {
-  //     min-height: calc(var(--window-page-lesson-height) - 148px);
-  //   }
-  // }
-  max-height: calc(var(--window-page-lesson-height) - 40px);
-
-  .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 40px);
-  }
-
-  .emptySection {
-    display: flex;
-    align-items: center;
-  }
-}
-
-
-.listItems {
-  position: relative;
-  background: #F8F9FC;
-  border-radius: 13px;
-  margin: 0 20px;
-
-  &+.listItems {
-    margin-top: 13px;
-  }
-}
-
-.knowledgePoint {
-  .btnItem {
-    padding: 13px 13px 0;
-    display: flex;
-    align-items: center;
-    // height: max(40px, 36Px) !important;
-
-    .btnTitle {
-      flex-shrink: 0;
-      font-size: max(18px, 13Px);
-      font-weight: 600;
-
-      span {
-        color: #EA4132;
-      }
-    }
-
-    :global {
-      .n-form-item-label {
-        padding-bottom: 0;
-        align-items: center;
-        font-size: max(18px, 13Px);
-        font-weight: 600;
-        padding-right: 10px;
-      }
-    }
-
-  }
-
-  :global {
-
-    .n-input,
-    .n-base-selection {
-      --n-height: max(40px, 36Px) !important;
-      width: 250px !important;
-      font-size: 15px;
-      border-radius: 8px !important;
-    }
-
-  }
-}
-
-.operationGroup {
-  position: absolute;
-  right: 13px;
-  top: 18px;
-
-  i {
-    display: inline-block;
-    width: max(27px, 24Px);
-    height: max(27px, 24Px);
-    cursor: pointer;
-  }
-
-  .iconCUp {
-    background: url('../../../images/icon-c-up.png') no-repeat center;
-    background-size: contain;
-
-    &:hover {
-      background: url('../../../images/icon-c-up-active.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-
-  .iconCDown {
-    background: url('../../../images/icon-c-down.png') no-repeat center;
-    background-size: contain;
-
-    &:hover {
-      background: url('../../../images/icon-c-down-active.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-
-  .iconCRemove {
-    background: url('../../../images/icon-c-delete.png') no-repeat center;
-    background-size: contain;
-
-    &:hover {
-      background: url('../../../images/icon-c-delete-active.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-}
-
-.addKnowledgePoint {
-  margin: 20px;
-  width: calc(100% - 40px) !important;
-  --n-border-radius: 7px !important;
-  --n-height: max(40px, 36Px) !important;
-  font-weight: 600 !important;
-  --n-font-size: max(14px, 12Px) !important;
-  color: #0378EC;
-  background-color: #E8F4FF !important;
-
-  .iconCAdd {
-    width: max(13px, 11Px);
-    height: max(14px, 12Px);
-    margin-right: 8px;
-    background: url('../../../images/icon-c-add.png') no-repeat center;
-    background-size: contain;
-  }
-}
-
-
-.list {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-
-  padding: 17px 7px 17px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  gap: 20px 0;
-
-
-  .itemWrap {
-    width: calc(100% / 4);
-    padding-bottom: calc(100% / 4 * 0.73333);
-    position: relative;
-
-    .itemWrapBox {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      padding: 0 6px;
-
-      &:hover {
-        .itemOperation {
-          transition: all .2s ease;
-          opacity: 1;
-          visibility: visible;
-        }
-      }
-    }
-
-    .itemOperation {
-      position: absolute;
-      top: 0;
-      right: 10px;
-      z-index: 98;
-      cursor: move;
-      opacity: 0;
-      visibility: hidden;
-      transition: all .2s ease;
-    }
-
-    .iconDelete {
-      width: 27px;
-      height: 27px;
-      margin-top: 8px;
-      margin-right: 8px;
-      cursor: pointer;
-    }
-  }
-
-  :global {
-    .card-section-container {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.attendClassModal {
-  width: 800px;
-  border-radius: 16px;
-  overflow: hidden;
-}
-
-
-.addCourseware {
-  width: 532px;
-
-  :global {
-    .n-card-header {
-      font-size: max(22px, 16Px);
-    }
-  }
-}
-
-.removeVisiable1 {
-  width: 462px;
-
-  :global {
-    .n-card-header {
-      font-size: max(22px, 16Px);
-    }
-  }
-
-  .studentRemove {
-    padding: 20px 40px 0;
-
-    p {
-      font-size: max(18px, 14Px);
-      color: #777777;
-      line-height: 30px;
-
-      span {
-        color: #EA4132;
-      }
-    }
-  }
-
-  .btnGroupModal {
-    padding: 32px 0;
-
-    :global {
-      .n-button {
-        height: 47px;
-        min-width: 156px;
-      }
-    }
-  }
-}
-
-.addMusicItem {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border-radius: 14px;
-  background: #F9FAFD;
-  display: inline-flex;
-  transition: all .3s ease-in-out;
-  border: 1Px solid rgba(209, 216, 235, 1) !important;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  background-color: #fff;
-
-  img {
-    width: 30Px;
-    height: 30Px;
-  }
-
-  .addMusicName {
-    padding-top: 16px;
-    font-size: max(16px, 13Px);
-    color: #131415;
-  }
-
-  // 鼠标经过时样式
-  &:hover {
-    transform: scale(1.01);
-    transition: all .2s ease-in-out;
-    border: 1px solid rgba(0, 122, 254, 1) !important;
-  }
-}
-
-.addOtherSource {
-  width: 726px;
+// .btnGroup {
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   margin-left: 22px !important;
+//   margin-right: 22px !important;
+//   // height: 40px;
+//   padding-bottom: 25px;
+//   border-bottom: 1px solid #F0F0F0;
+//   margin-bottom: 10px;
+
+
+//   .btnClassList {
+//     :global {
+//       .n-base-selection {
+//         width: 200px !important;
+//       }
+
+//       .n-base-selection-label {
+//         &::before {
+//           margin-left: 12px;
+//           content: ' ';
+//           width: max(20px, 14Px);
+//           height: max(20px, 14Px);
+//           flex-shrink: 0;
+//           background: url('../../../images/icon-class-name.png') no-repeat center;
+//           background-size: contain;
+//         }
+//       }
+
+//       .n-base-selection-input {
+//         padding-left: 8px;
+//       }
+
+//       .n-base-selection.n-base-selection--disabled {
+//         cursor: pointer;
+//       }
+
+//       .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+//         background-color: #fff;
+//         cursor: pointer;
+//       }
+
+//       .n-base-selection.n-base-selection--disabled .n-base-selection-label .n-base-selection-input {
+//         color: var(--n-text-color);
+//         cursor: pointer;
+//       }
+
+//       .n-base-selection .n-base-selection-overlay {
+//         left: 24px;
+//       }
+//     }
+//   }
+
+
+//   .btnSubjectList {
+//     :global {
+//       .n-base-selection-tag-wrapper .n-tag {
+//         font-size: max(14px, 12Px);
+//       }
+//     }
+//   }
+
+//   :global {
+
+//     .n-input,
+//     .n-base-selection {
+//       --n-height: max(40px, 36Px) !important;
+//       width: 200px !important;
+//       font-size: 15px;
+//       border-radius: 8px !important;
+//     }
+
+//     .n-base-selection-input__content {
+//       font-size: max(15px, 13Px);
+//     }
+
+//     .n-button {
+//       border-radius: 8px;
+//       height: 38px;
+//       font-size: max(18px, 13Px);
+//       font-weight: 600 !important;
+//       padding: 0 27px;
+//     }
+
+//     .n-button--default-type {
+//       background: #E8F4FF;
+//       color: #0378EC;
+
+//       &:not(.n-button--disabled):hover {
+//         background: #E8F4FF;
+//       }
+
+//       .n-button__border {
+//         border: 1px solid #198CFE;
+//       }
+//     }
+
+//     .n-button--error-type {
+//       background: #FDEBED !important;
+//       color: #EC3A4E !important;
+
+//       &:not(.n-button--disabled):hover,
+//       &:not(.n-button--disabled):active {
+//         background: #FDEBED;
+//         color: #EC3A4E;
+//       }
+
+//       .n-button__border {
+//         border: 1px solid #EC3A4E;
+//       }
+//     }
+//   }
+
+//   .btnClassStart {
+//     background: #F44541 !important;
+//     color: #fff !important;
+
+//     :global {
+//       .n-button__border {
+//         border: 1px solid #F44541;
+//       }
+//     }
+//   }
+
+//   .btnItem {
+//     display: flex;
+//     align-items: center;
+//     height: max(40px, 36Px) !important;
+
+//     .btnTitle {
+//       flex-shrink: 0;
+//       font-size: max(18px, 13Px);
+//       font-weight: 600;
+
+//       span {
+//         color: #EA4132;
+//       }
+//     }
+
+//     // &:last-child {
+//     //   margin-left: 12px;
+//     // }
+//   }
+// }
+
+.tipsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 auto;
+  margin-right: 30px;
+  height: 40px;
+  padding: 0 16px;
+  background: #EDF7FF;
+  border-radius: 9px;
+  max-width: 600px;
+
+  .tipsLeft {
+    display: flex;
+    align-items: center;
+    font-size: max(16px, 12Px);
+    color: rgba(0, 0, 0, 0.88);
+
+
+    .tips {
+      line-height: 38px;
+    }
+  }
+
+  .iconTips {
+    margin-right: 9px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .btnNoTips {
+    font-size: max(16px, 12Px);
+    font-weight: 500;
+    color: #1677FF;
+    cursor: pointer;
+  }
+}
+
+.btnGroupClass {
+  padding-top: 10px;
+}
+
+.listContainer {
+  margin: 20px 0 20px;
+  // // 52 + 28 + 38 + 38 多余10像素空间
+  // max-height: calc(var(--window-page-lesson-height) - 196px);
+
+  // .listSection {
+  //   min-height: calc(var(--window-page-lesson-height) - 196px);
+  // }
+
+  // &.listContainerDrag {
+  //   max-height: calc(var(--window-page-lesson-height) - 148px);
+
+  //   .listSection {
+  //     min-height: calc(var(--window-page-lesson-height) - 148px);
+  //   }
+  // }
+  max-height: calc(var(--window-page-lesson-height) - 40px);
+
+  .listSection {
+    min-height: calc(var(--window-page-lesson-height) - 40px);
+  }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+}
+
+
+.listItems {
+  position: relative;
+  background: #F8F9FC;
+  border-radius: 13px;
+  margin: 0 20px;
+
+  &+.listItems {
+    margin-top: 13px;
+  }
+}
+
+.knowledgePoint {
+  .btnItem {
+    padding: 13px 13px 0;
+    display: flex;
+    align-items: center;
+    // height: max(40px, 36Px) !important;
+
+    .btnTitle {
+      flex-shrink: 0;
+      font-size: max(18px, 13Px);
+      font-weight: 600;
+
+      span {
+        color: #EA4132;
+      }
+    }
+
+    :global {
+      .n-form-item-label {
+        padding-bottom: 0;
+        align-items: center;
+        font-size: max(18px, 13Px);
+        font-weight: 600;
+        padding-right: 10px;
+      }
+    }
+
+  }
+
+  :global {
+
+    .n-input,
+    .n-base-selection {
+      --n-height: max(40px, 36Px) !important;
+      width: 250px !important;
+      font-size: 15px;
+      border-radius: 8px !important;
+    }
+
+  }
+}
+
+.operationGroup {
+  position: absolute;
+  right: 13px;
+  top: 18px;
+
+  i {
+    display: inline-block;
+    width: max(27px, 24Px);
+    height: max(27px, 24Px);
+    cursor: pointer;
+  }
+
+  .iconCUp {
+    background: url('../../../images/icon-c-up.png') no-repeat center;
+    background-size: contain;
+
+    &:hover {
+      background: url('../../../images/icon-c-up-active.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .iconCDown {
+    background: url('../../../images/icon-c-down.png') no-repeat center;
+    background-size: contain;
+
+    &:hover {
+      background: url('../../../images/icon-c-down-active.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .iconCRemove {
+    background: url('../../../images/icon-c-delete.png') no-repeat center;
+    background-size: contain;
+
+    &:hover {
+      background: url('../../../images/icon-c-delete-active.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+}
+
+.addKnowledgePoint {
+  margin: 20px;
+  width: calc(100% - 40px) !important;
+  --n-border-radius: 7px !important;
+  --n-height: max(40px, 36Px) !important;
+  font-weight: 600 !important;
+  --n-font-size: max(14px, 12Px) !important;
+  color: #0378EC;
+  background-color: #E8F4FF !important;
+
+  .iconCAdd {
+    width: max(13px, 11Px);
+    height: max(14px, 12Px);
+    margin-right: 8px;
+    background: url('../../../images/icon-c-add.png') no-repeat center;
+    background-size: contain;
+  }
+}
+
+
+.list {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+
+  padding: 17px 7px 17px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 20px 0;
+
+
+  .itemWrap {
+    width: calc(100% / 4);
+    padding-bottom: calc(100% / 4 * 0.73333);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 6px;
+
+      &:hover {
+        .itemOperation {
+          transition: all .2s ease;
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+
+    .itemOperation {
+      position: absolute;
+      top: 8px;
+      right: 14px;
+      z-index: 98;
+      cursor: move;
+      opacity: 0;
+      visibility: hidden;
+      transition: all .2s ease;
+    }
+
+    .iconDelete {
+      width: 27px;
+      height: 27px;
+      cursor: pointer;
+    }
+  }
+
+  :global {
+    .card-section-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.attendClassModal {
+  width: 800px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+
+.addCourseware {
+  width: 532px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+}
+
+.removeVisiable1 {
+  width: 462px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+.addMusicItem {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 14px;
+  background: #F9FAFD;
+  display: inline-flex;
+  transition: all .3s ease-in-out;
+  border: 1Px solid rgba(209, 216, 235, 1) !important;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #fff;
+
+  img {
+    width: 30Px;
+    height: 30Px;
+  }
+
+  .addMusicName {
+    padding-top: 16px;
+    font-size: max(16px, 13Px);
+    color: #131415;
+  }
+
+  // 鼠标经过时样式
+  &:hover {
+    transform: scale(1.01);
+    transition: all .2s ease-in-out;
+    border: 1px solid rgba(0, 122, 254, 1) !important;
+  }
+}
+
+.addOtherSource {
+  width: 726px;
 }

src/views/prepare-lessons/components/lesson-main/courseware/addCourseware.tsx

@@ -33,7 +33,8 @@ import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import {
   api_teacherChapterLessonCoursewareAdd,
   api_teacherChapterLessonCoursewareUpdate,
-  api_teacherChapterLessonCoursewareDetail
+  api_teacherChapterLessonCoursewareDetail,
+  api_materialDetail
   // courseScheduleStart,
   // queryCourseware,
   // saveCourseware
@@ -145,9 +146,9 @@ export default defineComponent({
         );
         const tempRows = data.chapterKnowledgeList || [];
         forms.name = data.name;
-        forms.subjects = data.subjectIds
-          ? data.subjectIds.split(',').map((s: any) => {
-              return Number(s);
+        forms.subjects = data.instrumentIds
+          ? data.instrumentIds.split(',').map((s: any) => {
+              return s;
             })
           : [];
         forms.openFlag = data.openFlag;
@@ -323,7 +324,31 @@ export default defineComponent({
       forms.messageOperation.visiable = false;
     };
 
-    const addCoursewareItem = (item: any, point?: any) => {
+    const addCoursewareItem = async (item: any, point?: any) => {
+      const materialList: any[] = [];
+      try {
+        const { data } = await api_materialDetail(item.materialId);
+        if (Array.isArray(data.materialRefs)) {
+          data.materialRefs.forEach((item: any) => {
+            if (item.refType === 'STRONG') {
+              const relateMaterialInfo = item.relateMaterialInfo || {};
+              materialList.push({
+                content: relateMaterialInfo.content,
+                coverImg: relateMaterialInfo.coverImg,
+                // isCollect: relateMaterialInfo.,
+                isSelected:
+                  relateMaterialInfo.sourceFrom === 'PLATFORM' ? true : false,
+                materialId: relateMaterialInfo.id,
+                // removeFlag: relateMaterialInfo.,
+                title: relateMaterialInfo.name,
+                type: relateMaterialInfo.type
+              });
+            }
+          });
+        }
+      } catch {
+        //
+      }
       nextTick(() => {
         if (point) {
           const rowGroupDom = document.querySelectorAll('.row-group');
@@ -339,7 +364,13 @@ export default defineComponent({
               const left = isPointOnLeft(child, point.x);
               if (!left) {
                 array.splice(index + 1, 0, item);
+                materialList.forEach((m: any) => {
+                  array.splice(index + 1, 0, m);
+                });
               } else {
+                materialList.forEach((m: any) => {
+                  array.splice(index, 0, m);
+                });
                 array.splice(index, 0, item);
               }
               isAdd = true;
@@ -348,9 +379,15 @@ export default defineComponent({
           });
           if (!isAdd) {
             forms.coursewareList[item.index || 0].list.push(item);
+            materialList.forEach((m: any) => {
+              forms.coursewareList[item.index || 0].list.push(m);
+            });
           }
         } else {
           forms.coursewareList[item.index || 0].list.push(item);
+          materialList.forEach((m: any) => {
+            forms.coursewareList[item.index || 0].list.push(m);
+          });
           message.success('添加成功');
         }
       });
@@ -415,7 +452,7 @@ export default defineComponent({
       try {
         const params = {
           name: forms.name,
-          subjectIds: forms.subjects.join(','),
+          instrumentIds: forms.subjects.join(','),
           openFlag: forms.openFlag,
           autoPlay: forms.autoPlay,
           coursewareDetailKnowledgeId: prepareStore.getSelectKey,
@@ -612,7 +649,9 @@ export default defineComponent({
     watch(
       () => forms.coursewareList,
       () => {
-        prepareStore.setCoursewareList = forms.coursewareList;
+        prepareStore.setCoursewareList(forms.coursewareList);
+        // 内容有更新 - 相关资源会刷新
+        eventGlobal.emit('onCoursewareUpdate');
       },
       {
         deep: true
@@ -654,6 +693,7 @@ export default defineComponent({
                           coverImg: dropItem.coverImg,
                           type: dropItem.type,
                           title: dropItem.title,
+                          refFlag: dropItem.refFlag,
                           isCollect: dropItem.isCollect,
                           isSelected: dropItem.isSelected,
                           content: dropItem.content,

src/views/prepare-lessons/components/lesson-main/courseware/index.tsx

@@ -1,959 +1,959 @@
-import { defineComponent, nextTick, onMounted, reactive, watch } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NModal,
-  NScrollbar,
-  NSelect,
-  NSpace,
-  NSpin,
-  useMessage,
-  useDialog
-} from 'naive-ui';
-import CardType from '/src/components/card-type';
-import AttendClass from '/src/views/prepare-lessons/model/attend-class';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { useCatchStore } from '/src/store/modules/catchData';
-import TheEmpty from '/src/components/TheEmpty';
-import {
-  courseScheduleStart,
-  queryCourseware,
-  saveCourseware,
-  teacherKnowledgeMaterialDelete
-} from '../../../api';
-import Draggable from 'vuedraggable';
-import iconDelete from '../../../images/icon-delete.png';
-import iconAddMusic from '../../../images/icon-add-music.png';
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
-import deepClone from '/src/helpers/deep-clone';
-import CardPreview from '/src/components/card-preview';
-import PreviewWindow from '/src/views/preview-window';
-import { state } from '/src/state';
-import SubjectSync from '../../../model/subject-sync';
-import { eventGlobal } from '/src/utils';
-import iconTips from '../../../images/icon-tips.png';
-import { useElementBounding } from '@vueuse/core';
-export default defineComponent({
-  name: 'courseware-modal',
-  setup() {
-    const catchStore = useCatchStore();
-    const prepareStore = usePrepareStore();
-    const route = useRoute();
-    const router = useRouter();
-    const dialog = useDialog();
-    const message = useMessage();
-
-    const localStorageSubjectId = localStorage.getItem(
-      'prepareLessonSubjectId'
-    );
-    const forms = reactive({
-      tipsStatus: localStorage.getItem('prepare-lesson-courseware-tip')
-        ? true
-        : false,
-      className: route.query.name as any,
-      classGroupId: route.query.classGroupId,
-      preStudentNum: route.query.preStudentNum,
-      courseScheduleSubjectId: route.query.courseScheduleSubjectId,
-      // 选取参数带的，后取缓存
-      subjectId: route.query.subjectId
-        ? Number(route.query.subjectId)
-        : localStorageSubjectId
-        ? Number(localStorageSubjectId)
-        : null,
-      coursewareList: [] as any,
-      loadingStatus: false,
-      showAttendClass: false,
-      attendClassType: 'change', //
-      removeIds: [] as any, // 临时删除的编号
-      drag: false,
-      isEdit: false, // 是否更新数据
-      editSubjectIds: '', // 声部编号
-      removeVisiable: false,
-      removeVisiable1: false,
-      subjectSyncVisiable: false, // 同步声部
-      show: false,
-      item: {} as any,
-      previewModal: false,
-      previewParams: {
-        type: '',
-        subjectId: '',
-        detailId: ''
-      } as any
-    });
-
-    // 获取列表
-    const getList = async () => {
-      forms.loadingStatus = true;
-      try {
-        // 判断是否有选择对应的课件 或声部
-        if (!prepareStore.getSelectKey || !prepareStore.getSubjectId)
-          return (forms.loadingStatus = false);
-        const { data } = await queryCourseware({
-          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-          subjectId: prepareStore.getSubjectId,
-          page: 1,
-          rows: 99
-        });
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            materialId: row.materialId,
-            coverImg: row.coverImg,
-            type: row.materialType,
-            title: row.materialName,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.source === 'PLATFORM' ? true : false,
-            content: row.content,
-            removeFlag: row.removeFlag
-          });
-        });
-
-        prepareStore.setCoursewareList(temp || []);
-
-        const tempCourse: any = [];
-        temp.forEach((item: any) => {
-          if (!forms.removeIds.includes(item.id)) {
-            tempCourse.push(item);
-          }
-        });
-        forms.coursewareList = tempCourse;
-      } catch {
-        //
-      }
-      forms.loadingStatus = false;
-    };
-
-    // 监听选择的key 左侧选择了其它的课
-    watch(
-      () => prepareStore.getSelectKey,
-      () => {
-        forms.drag = false;
-        prepareStore.setIsEditResource(false);
-        getList();
-      }
-    );
-    // 声部变化时
-    watch(
-      () => prepareStore.getSubjectId,
-      () => {
-        getList();
-      }
-    );
-    watch(
-      () => prepareStore.getIsAddResource,
-      (val: boolean) => {
-        if (val) {
-          getList();
-          prepareStore.setIsAddResource(false);
-        }
-      }
-    );
-    // 监听列表变化，如果变化了，则弹选择声部的
-    watch(
-      () => forms.coursewareList,
-      () => {
-        if (forms.drag) {
-          forms.isEdit = true;
-        }
-      },
-      {
-        deep: true
-      }
-    );
-
-    // 删除
-    const onDelete = (item: any) => {
-      //
-      forms.removeIds.push(item.id);
-      const index = forms.coursewareList.findIndex(
-        (c: any) => c.id === item.id
-      );
-      forms.coursewareList.splice(index, 1);
-      forms.isEdit = true;
-      // prepareStore.setCoursewareList(forms.coursewareList);
-      // console.log(prepareStore.getCoursewareList, 'getCourseware');
-    };
-
-    // 完成编辑
-    const onOverEdit = async () => {
-      try {
-        const temp: any = [];
-        forms.coursewareList.forEach((item: any) => {
-          temp.push({
-            materialName: item.title,
-            materialType: item.type,
-            materialId: item.materialId,
-            id: item.id
-          });
-        });
-        // 保存课件
-        // 判断是否编辑，如果编辑则取选择的声部
-        await saveCourseware({
-          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-          lessonCoursewareId: prepareStore.getLessonCoursewareId,
-          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
-          subjectId: forms.isEdit
-            ? forms.editSubjectIds
-            : prepareStore.getSubjectId,
-          materialList: [...temp]
-        });
-
-        forms.drag = false;
-        message.success('编辑成功');
-        forms.removeVisiable = false;
-        prepareStore.setIsEditResource(false);
-        // 重置临时删除编号
-        forms.removeIds = [];
-        await getList();
-      } catch {
-        //
-      }
-    };
-
-    // 预览上课
-    const onPreviewAttend = () => {
-      // 获取上架的数据
-      let count = 0;
-      forms.coursewareList.forEach((item: any) => {
-        if (!item.removeFlag) {
-          count++;
-        }
-      });
-      if (count <= 0) {
-        message.error('课件不能为空');
-        return;
-      }
-      // 判断是否在应用里面
-      if (window.matchMedia('(display-mode: standalone)').matches) {
-        state.application = window.matchMedia(
-          '(display-mode: standalone)'
-        ).matches;
-        forms.previewModal = true;
-        fscreen();
-        forms.previewParams = {
-          type: 'preview',
-          subjectId: prepareStore.getSubjectId,
-          detailId: prepareStore.getSelectKey,
-          lessonCourseId: prepareStore.getBaseCourseware.id
-        };
-      } else {
-        const { href } = router.resolve({
-          path: '/attend-class',
-          query: {
-            type: 'preview',
-            subjectId: prepareStore.getSubjectId,
-            detailId: prepareStore.getSelectKey,
-            lessonCourseId: prepareStore.getBaseCourseware.id
-          }
-        });
-        window.open(href, +new Date() + '');
-      }
-    };
-    const fscreen = () => {
-      const el: any = document.documentElement;
-      const documentDom: any = document;
-      const isFullscreen =
-        documentDom.fullScreen ||
-        documentDom.mozFullScreen ||
-        documentDom.webkitIsFullScreen;
-      if (!isFullscreen) {
-        //进入全屏
-        (el.requestFullscreen && el.requestFullscreen()) ||
-          (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
-          (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
-          (el.msRequestFullscreen && el.msRequestFullscreen());
-      }
-    };
-    // 单个删除
-    const onRemove = async (item: any) => {
-      try {
-        dialog.warning({
-          title: '提示',
-          content: '该资源已下架，是否删除？',
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: async () => {
-            forms.removeIds.push(item.id);
-            await teacherKnowledgeMaterialDelete({ ids: item.id });
-            message.success('删除成功');
-            getList();
-          }
-        });
-      } catch {
-        //
-      }
-    };
-
-    watch(
-      () => prepareStore.getSubjectList,
-      () => {
-        checkSubjectIds();
-      }
-    );
-
-    const checkSubjectIds = () => {
-      const subjectList = prepareStore.getSubjectList;
-
-      // 并且没有声部时才会更新
-      if (subjectList.length > 0) {
-        // 并且声部在列表中
-        const localStorageSubjectId = localStorage.getItem(
-          'prepareLessonSubjectId'
-        );
-        // // 先取 上次上课声部，在取班级声部 最后取缓存
-        let subjectId = null;
-        let index = -1;
-        if (forms.courseScheduleSubjectId) {
-          // 判断浏览器上面是否有
-          index = subjectList.findIndex(
-            (subject: any) => subject.id == forms.courseScheduleSubjectId
-          );
-          if (index >= 0) {
-            subjectId = Number(forms.courseScheduleSubjectId);
-          }
-        }
-        // 判断班级上面声部 & 还没有声部
-        if (forms.subjectId && !subjectId) {
-          // 判断浏览器上面是否有
-          index = subjectList.findIndex(
-            (subject: any) => subject.id == forms.subjectId
-          );
-          if (index >= 0) {
-            subjectId = Number(forms.subjectId);
-          }
-        }
-        // 缓存声部 & 还没有声部
-        if (localStorageSubjectId && !subjectId) {
-          // 判断浏览器上面是否有
-          index = subjectList.findIndex(
-            (subject: any) => subject.id == localStorageSubjectId
-          );
-          if (index >= 0) {
-            subjectId = Number(localStorageSubjectId);
-          }
-        }
-        if (subjectId && index >= 0) {
-          prepareStore.setSubjectId(subjectId);
-        } else {
-          // 判断是否有缓存
-          prepareStore.setSubjectId(subjectList[0].id);
-        }
-
-        // 保存
-        localStorage.setItem(
-          'prepareLessonSubjectId',
-          prepareStore.getSubjectId as any
-        );
-      }
-    };
-
-    watch(
-      () => route.query,
-      async () => {
-        forms.className = route.query.name as any;
-        forms.classGroupId = route.query.classGroupId as any;
-        forms.preStudentNum = route.query.preStudentNum as any;
-        forms.subjectId = route.query.subjectId
-          ? Number(route.query.subjectId)
-          : null;
-        prepareStore.setClassGroupId(forms.classGroupId as any);
-
-        checkSubjectIds();
-        await getList();
-      }
-    );
-
-    const isPointInsideElement = (element: any, x: number, y: number) => {
-      const rect = element.getBoundingClientRect();
-      return (
-        x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
-      );
-    };
-    const isPointOnLeft = (element: any, x: number) => {
-      const rect = element.getBoundingClientRect();
-      const elementCenterX = rect.left + rect.width / 2;
-      return x < elementCenterX;
-    };
-    onMounted(async () => {
-      prepareStore.setClassGroupId(route.query.classGroupId as any);
-      // 获取教材分类列表
-      checkSubjectIds();
-
-      await getList();
-
-      // 动态添加数据
-      eventGlobal.on('onPrepareAddItem', (item: any, point?: any) => {
-        forms.drag = true;
-        forms.isEdit = true;
-        nextTick(() => {
-          if (point) {
-            const dom = document.querySelectorAll('.row-nav');
-            let isAdd = false;
-            dom.forEach((child: any, index: number) => {
-              const status = isPointInsideElement(child, point.x, point.y);
-              if (status) {
-                const array: any = forms.coursewareList;
-                const left = isPointOnLeft(child, point.x);
-                if (!left) {
-                  array.splice(index + 1, 0, item);
-                } else {
-                  array.splice(index, 0, item);
-                }
-                isAdd = true;
-                forms.coursewareList = array;
-                prepareStore.setCoursewareList(forms.coursewareList);
-              }
-            });
-            if (!isAdd) {
-              forms.coursewareList.push(item);
-              prepareStore.setCoursewareList(forms.coursewareList);
-            }
-          } else {
-            forms.coursewareList.push(item);
-            prepareStore.setCoursewareList(forms.coursewareList);
-          }
-        });
-      });
-    });
-
-    return () => (
-      <div class={styles.coursewareModal}>
-        <div class={styles.btnGroup}>
-          {forms.drag ? (
-            !forms.tipsStatus ? (
-              <div class={styles.tipsContainer}>
-                <div class={styles.tipsLeft}>
-                  <img src={iconTips} class={styles.iconTips} />
-                  <span class={styles.tips}>可以拖动资源排序哦</span>
-                </div>
-                <span
-                  class={styles.btnNoTips}
-                  onClick={() => {
-                    localStorage.setItem('prepare-lesson-courseware-tip', '1');
-                    forms.tipsStatus = true;
-                  }}>
-                  不再提醒
-                </span>
-              </div>
-            ) : (
-              <span></span>
-            )
-          ) : (
-            <NSpace>
-              {forms.classGroupId && (
-                <div class={styles.btnItem}>
-                  <span class={styles.btnTitle}>上课班级：</span>
-                  <div
-                    onClick={() => {
-                      forms.showAttendClass = true;
-                      forms.attendClassType = 'change';
-                    }}>
-                    <NSelect
-                      placeholder="选择班级"
-                      labelField="name"
-                      valueField="id"
-                      class={styles.btnClassList}
-                      value={forms.className}
-                      disabled
-                    />
-                  </div>
-                </div>
-              )}
-
-              <div class={styles.btnItem}>
-                <span class={styles.btnTitle}>声部：</span>
-                <NSelect
-                  placeholder="选择声部"
-                  class={styles.btnSubjectList}
-                  options={prepareStore.getSubjectList}
-                  labelField="name"
-                  valueField="id"
-                  value={prepareStore.getSubjectId}
-                  onUpdate:value={(val: any) => {
-                    prepareStore.setSubjectId(val);
-                    // 保存
-                    localStorage.setItem('prepareLessonSubjectId', val);
-                    getList();
-                  }}
-                />
-              </div>
-            </NSpace>
-          )}
-
-          {/* 编辑 */}
-          {!forms.drag ? (
-            <NSpace>
-              <NButton
-                type="default"
-                onClick={() => {
-                  forms.drag = true;
-                  prepareStore.setIsEditResource(true);
-
-                  // forms.subjectSyncVisiable = true;
-                }}>
-                编辑
-              </NButton>
-            </NSpace>
-          ) : (
-            <NSpace>
-              <NButton
-                type="error"
-                onClick={() => {
-                  forms.removeVisiable1 = true;
-                }}>
-                清空资源
-              </NButton>
-              <NButton
-                type="error"
-                onClick={() => {
-                  forms.drag = false;
-                  forms.isEdit = false;
-                  prepareStore.setIsEditResource(false);
-                  forms.removeIds = [];
-                  getList();
-                }}>
-                取消编辑
-              </NButton>
-              <NButton
-                type="default"
-                onClick={() => {
-                  if (forms.isEdit) {
-                    forms.subjectSyncVisiable = true;
-                  } else {
-                    forms.removeVisiable = true;
-                  }
-                }}>
-                完成编辑
-              </NButton>
-            </NSpace>
-          )}
-        </div>
-
-        <NScrollbar
-          class={[
-            styles.listContainer,
-            forms.drag ? styles.listContainerDrag : ''
-          ]}
-          {...{ id: 'lessons-2' }}>
-          <NSpin show={forms.loadingStatus}>
-            <div
-              class={[
-                styles.listSection
-                // !forms.loadingStatus && forms.coursewareList.length <= 0
-                //   ? styles.emptySection
-                //   : ''
-              ]}
-              onDragenter={(e: any) => {
-                e.preventDefault();
-              }}
-              onDragover={(e: any) => {
-                e.preventDefault();
-              }}
-              onDrop={(e: any) => {
-                console.log(e, 'event');
-                let dropItem = e.dataTransfer.getData('text');
-                dropItem = dropItem ? JSON.parse(dropItem) : {};
-                // 判断是否有数据
-                if (dropItem.id) {
-                  // 获取拖拽的目标元素
-
-                  eventGlobal.emit(
-                    'onPrepareAddItem',
-                    {
-                      materialId: dropItem.id,
-                      coverImg: dropItem.coverImg,
-                      type: dropItem.type,
-                      title: dropItem.title,
-                      isCollect: dropItem.isCollect,
-                      isSelected: dropItem.isSelected,
-                      content: dropItem.content,
-                      removeFlag: false
-                    },
-                    {
-                      x: e.clientX,
-                      y: e.clientY
-                    }
-                  );
-                }
-              }}>
-              {forms.coursewareList.length > 0 && (
-                <>
-                  {forms.drag ? (
-                    <Draggable
-                      v-model:modelValue={forms.coursewareList}
-                      itemKey="id"
-                      componentData={{
-                        itemKey: 'id',
-                        tag: 'div',
-                        animation: 200,
-                        group: 'description',
-                        disabled: false
-                      }}
-                      class={styles.list}>
-                      {{
-                        item: (element: any) => {
-                          const item = element.element;
-                          return (
-                            <div
-                              data-id={item.id}
-                              class={[
-                                styles.itemWrap,
-                                styles.itemBlock,
-                                'row-nav'
-                              ]}>
-                              <div class={styles.itemWrapBox}>
-                                <CardType
-                                  class={[styles.itemContent]}
-                                  isShowCollect={false}
-                                  offShelf={item.removeFlag ? true : false}
-                                  onOffShelf={() => onRemove(item)}
-                                  item={item}
-                                />
-                                <div class={styles.itemOperation}>
-                                  <img
-                                    src={iconDelete}
-                                    class={styles.iconDelete}
-                                    onClick={(e: MouseEvent) => {
-                                      e.stopPropagation();
-                                      onDelete(item);
-                                    }}
-                                  />
-                                </div>
-                              </div>
-                            </div>
-                          );
-                        }
-                      }}
-                    </Draggable>
-                  ) : (
-                    <div class={styles.list}>
-                      {forms.coursewareList.map((item: any) => (
-                        <div class={styles.itemWrap}>
-                          <div class={styles.itemWrapBox}>
-                            <CardType
-                              class={[styles.itemContent, 'handle']}
-                              isShowCollect={false}
-                              item={item}
-                              offShelf={item.removeFlag ? true : false}
-                              onOffShelf={() => onRemove(item)}
-                              disabledMouseHover={false}
-                              onClick={() => {
-                                if (item.type === 'IMG') return;
-                                forms.show = true;
-                                forms.item = item;
-                              }}
-                            />
-                          </div>
-                        </div>
-                      ))}
-                      <div class={styles.itemWrap}>
-                        <div class={styles.itemWrapBox}>
-                          <div
-                            class={[
-                              styles.itemContent,
-                              styles.addMusicItem,
-                              'handle'
-                            ]}
-                            onClick={() => {
-                              // 直接跳转到制谱页面 (临时存储数据)
-                              sessionStorage.setItem(
-                                'notation-open-create',
-                                '1'
-                              );
-                              router.push('/notation');
-                            }}>
-                            <img src={iconAddMusic} />
-
-                            <p class={styles.addMusicName}>开始制谱</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </>
-              )}
-
-              {/* {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
-                <TheEmpty description="暂无课件" />
-              )} */}
-              {forms.coursewareList.length <= 0 && (
-                <div class={styles.list}>
-                  <div class={styles.itemWrap}>
-                    <div class={styles.itemWrapBox}>
-                      <div
-                        class={[
-                          styles.itemContent,
-                          styles.addMusicItem,
-                          'handle'
-                        ]}
-                        onClick={() => {
-                          // 直接跳转到制谱页面 (临时存储数据)
-                          sessionStorage.setItem('notation-open-create', '1');
-                          router.push('/notation');
-                        }}>
-                        <img src={iconAddMusic} />
-
-                        <p class={styles.addMusicName}>开始制谱</p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-          </NSpin>
-        </NScrollbar>
-
-        {!forms.drag ? (
-          <div
-            class={[styles.btnGroup, styles.btnGroupClass]}
-            style={{ justifyContent: 'flex-end' }}>
-            <NSpace justify="end">
-              <NButton type="primary" onClick={onPreviewAttend}>
-                预览课件
-              </NButton>
-              <NButton
-                {...{ id: 'lessons-3' }}
-                type="error"
-                class={styles.btnClassStart}
-                onClick={async () => {
-                  let count = 0;
-                  forms.coursewareList.forEach((item: any) => {
-                    if (!item.removeFlag) {
-                      count++;
-                    }
-                  });
-                  if (count <= 0) {
-                    message.error('课件不能为空');
-                    return;
-                  }
-
-                  if (forms.classGroupId) {
-                    // 开始上课
-                    const res = await courseScheduleStart({
-                      lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
-                      classGroupId: forms.classGroupId,
-                      subjectId: prepareStore.getSubjectId
-                    });
-                    if (
-                      window.matchMedia('(display-mode: standalone)').matches
-                    ) {
-                      state.application = window.matchMedia(
-                        '(display-mode: standalone)'
-                      ).matches;
-                      forms.previewModal = true;
-                      fscreen();
-                      forms.previewParams = {
-                        type: 'class',
-                        classGroupId: forms.classGroupId,
-                        subjectId: prepareStore.getSubjectId,
-                        detailId: prepareStore.getSelectKey,
-                        classId: res.data,
-                        lessonCourseId: prepareStore.getBaseCourseware.id,
-                        preStudentNum: forms.preStudentNum
-                      };
-                    } else {
-                      const { href } = router.resolve({
-                        path: '/attend-class',
-                        query: {
-                          type: 'class',
-                          classGroupId: forms.classGroupId,
-                          subjectId: prepareStore.getSubjectId,
-                          detailId: prepareStore.getSelectKey,
-                          classId: res.data,
-                          lessonCourseId: prepareStore.getBaseCourseware.id,
-                          preStudentNum: forms.preStudentNum
-                        }
-                      });
-                      window.open(href, +new Date() + '');
-                    }
-                  } else {
-                    forms.showAttendClass = true;
-                    forms.attendClassType = 'change';
-                  }
-                }}>
-                开始上课
-              </NButton>
-            </NSpace>
-          </div>
-        ) : (
-          ''
-        )}
-
-        <NModal
-          v-model:show={forms.showAttendClass}
-          preset="card"
-          showIcon={false}
-          class={['modalTitle background', styles.attendClassModal]}
-          title={'选择班级'}
-          blockScroll={false}>
-          <AttendClass
-            onClose={() => (forms.showAttendClass = false)}
-            type={forms.attendClassType}
-            onPreview={(item: any) => {
-              if (window.matchMedia('(display-mode: standalone)').matches) {
-                state.application = window.matchMedia(
-                  '(display-mode: standalone)'
-                ).matches;
-                forms.previewModal = true;
-                forms.previewParams = {
-                  ...item
-                };
-              } else {
-                const { href } = router.resolve({
-                  path: '/attend-class',
-                  query: {
-                    ...item
-                  }
-                });
-                window.open(href, +new Date() + '');
-              }
-            }}
-            onConfirm={async (item: any) => {
-              if (forms.classGroupId) {
-                forms.className = item.name;
-                forms.classGroupId = item.classGroupId;
-                forms.preStudentNum = item.preStudentNum;
-                forms.subjectId = item.subjectId;
-                forms.courseScheduleSubjectId = item.courseScheduleSubjectId;
-                forms.showAttendClass = false;
-
-                prepareStore.setClassGroupId(item.classGroupId);
-                console.log(forms, 'forms', item);
-                checkSubjectIds();
-                // 声部切换时
-                eventGlobal.emit('onChangeClass', {
-                  lastUseCoursewareId: item.lastUseCoursewareId,
-                  unit: item.unit
-                });
-              } else {
-                const res = await courseScheduleStart({
-                  lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
-                  classGroupId: item.classGroupId,
-                  subjectId: prepareStore.getSubjectId
-                });
-                forms.showAttendClass = false;
-                if (window.matchMedia('(display-mode: standalone)').matches) {
-                  state.application = window.matchMedia(
-                    '(display-mode: standalone)'
-                  ).matches;
-                  forms.previewModal = true;
-                  forms.previewParams = {
-                    type: 'class',
-                    classId: res.data, // 上课编号
-                    classGroupId: item.classGroupId,
-                    preStudentNum: item.preStudentNum,
-                    subjectId: prepareStore.getSubjectId,
-                    detailId: prepareStore.getSelectKey,
-                    lessonCourseId: prepareStore.getBaseCourseware.id
-                  };
-                  setTimeout(() => {
-                    fscreen();
-                  }, 200);
-                } else {
-                  const { href } = router.resolve({
-                    path: '/attend-class',
-                    query: {
-                      type: 'class',
-                      classId: res.data, // 上课编号
-                      classGroupId: item.classGroupId,
-                      preStudentNum: item.preStudentNum,
-                      subjectId: prepareStore.getSubjectId,
-                      detailId: prepareStore.getSelectKey,
-                      lessonCourseId: prepareStore.getBaseCourseware.id
-                    }
-                  });
-                  window.open(href, +new Date() + '');
-                }
-              }
-            }}
-          />
-        </NModal>
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={forms.show} item={forms.item} />
-
-        <NModal
-          v-model:show={forms.removeVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable]}
-          title={'提示'}>
-          <div class={styles.studentRemove}>
-            <p>是否完成编辑？</p>
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton round type="primary" onClick={onOverEdit}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (forms.removeVisiable = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-
-        <NModal
-          v-model:show={forms.removeVisiable1}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable1]}
-          title={'清空资源'}>
-          <div class={styles.studentRemove}>
-            <p>
-              请确认是否要清空资源？
-              <span>点击确认后所有的素材内容 将被清空掉。</span>
-            </p>
-
-            <NSpace class={styles.btnGroupModal} justify="center">
-              <NButton
-                round
-                type="primary"
-                onClick={() => {
-                  forms.coursewareList.forEach((item: any) => {
-                    forms.removeIds.push(item.id);
-                  });
-                  forms.coursewareList = [];
-                  forms.removeVisiable1 = false;
-                  forms.isEdit = true;
-                  // prepareStore.setCoursewareList([]);
-                }}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (forms.removeVisiable1 = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-
-        <PreviewWindow
-          v-model:show={forms.previewModal}
-          type="attend"
-          params={forms.previewParams}
-        />
-
-        {/* 完成编辑时，选择声部 */}
-        <NModal
-          v-model:show={forms.subjectSyncVisiable}
-          preset="card"
-          class={['modalTitle background', styles.subjectSyncModal]}
-          title={'同步声部'}>
-          <SubjectSync
-            subjectId={prepareStore.getSubjectId as any}
-            onClose={() => (forms.subjectSyncVisiable = false)}
-            onConfirm={async (subjectIds: any) => {
-              //
-              try {
-                forms.editSubjectIds = subjectIds.join(',');
-                await onOverEdit();
-                forms.subjectSyncVisiable = false;
-              } catch {
-                //
-              }
-            }}
-          />
-        </NModal>
-      </div>
-    );
-  }
-});
+import { defineComponent, nextTick, onMounted, reactive, watch } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NModal,
+  NScrollbar,
+  NSelect,
+  NSpace,
+  NSpin,
+  useMessage,
+  useDialog
+} from 'naive-ui';
+import CardType from '/src/components/card-type';
+import AttendClass from '/src/views/prepare-lessons/model/attend-class';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { useCatchStore } from '/src/store/modules/catchData';
+import TheEmpty from '/src/components/TheEmpty';
+import {
+  courseScheduleStart,
+  queryCourseware,
+  saveCourseware,
+  teacherKnowledgeMaterialDelete
+} from '../../../api';
+import Draggable from 'vuedraggable';
+import iconDelete from '../../../images/icon-delete.png';
+import iconAddMusic from '../../../images/icon-add-music.png';
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+import deepClone from '/src/helpers/deep-clone';
+import CardPreview from '/src/components/card-preview';
+import PreviewWindow from '/src/views/preview-window';
+import { state } from '/src/state';
+import SubjectSync from '../../../model/subject-sync';
+import { eventGlobal } from '/src/utils';
+import iconTips from '../../../images/icon-tips.png';
+import { useElementBounding } from '@vueuse/core';
+export default defineComponent({
+  name: 'courseware-modal',
+  setup() {
+    const catchStore = useCatchStore();
+    const prepareStore = usePrepareStore();
+    const route = useRoute();
+    const router = useRouter();
+    const dialog = useDialog();
+    const message = useMessage();
+
+    const localStorageSubjectId = localStorage.getItem(
+      'prepareLessonSubjectId'
+    );
+    const forms = reactive({
+      tipsStatus: localStorage.getItem('prepare-lesson-courseware-tip')
+        ? true
+        : false,
+      className: route.query.name as any,
+      classGroupId: route.query.classGroupId,
+      preStudentNum: route.query.preStudentNum,
+      courseScheduleSubjectId: route.query.courseScheduleSubjectId,
+      // 选取参数带的，后取缓存
+      subjectId: route.query.subjectId
+        ? Number(route.query.subjectId)
+        : localStorageSubjectId
+        ? Number(localStorageSubjectId)
+        : null,
+      coursewareList: [] as any,
+      loadingStatus: false,
+      showAttendClass: false,
+      attendClassType: 'change', //
+      removeIds: [] as any, // 临时删除的编号
+      drag: false,
+      isEdit: false, // 是否更新数据
+      editSubjectIds: '', // 声部编号
+      removeVisiable: false,
+      removeVisiable1: false,
+      subjectSyncVisiable: false, // 同步声部
+      show: false,
+      item: {} as any,
+      previewModal: false,
+      previewParams: {
+        type: '',
+        subjectId: '',
+        detailId: ''
+      } as any
+    });
+
+    // 获取列表
+    const getList = async () => {
+      forms.loadingStatus = true;
+      try {
+        // 判断是否有选择对应的课件 或声部
+        if (!prepareStore.getSelectKey || !prepareStore.getSubjectId)
+          return (forms.loadingStatus = false);
+        const { data } = await queryCourseware({
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+          subjectId: prepareStore.getSubjectId,
+          page: 1,
+          rows: 99
+        });
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            materialId: row.materialId,
+            coverImg: row.coverImg,
+            type: row.materialType,
+            title: row.materialName,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.source === 'PLATFORM' ? true : false,
+            content: row.content,
+            removeFlag: row.removeFlag
+          });
+        });
+
+        prepareStore.setCoursewareList(temp || []);
+
+        const tempCourse: any = [];
+        temp.forEach((item: any) => {
+          if (!forms.removeIds.includes(item.id)) {
+            tempCourse.push(item);
+          }
+        });
+        forms.coursewareList = tempCourse;
+      } catch {
+        //
+      }
+      forms.loadingStatus = false;
+    };
+
+    // 监听选择的key 左侧选择了其它的课
+    watch(
+      () => prepareStore.getSelectKey,
+      () => {
+        forms.drag = false;
+        prepareStore.setIsEditResource(false);
+        getList();
+      }
+    );
+    // 声部变化时
+    watch(
+      () => prepareStore.getSubjectId,
+      () => {
+        getList();
+      }
+    );
+    watch(
+      () => prepareStore.getIsAddResource,
+      (val: boolean) => {
+        if (val) {
+          getList();
+          prepareStore.setIsAddResource(false);
+        }
+      }
+    );
+    // 监听列表变化，如果变化了，则弹选择声部的
+    watch(
+      () => forms.coursewareList,
+      () => {
+        if (forms.drag) {
+          forms.isEdit = true;
+        }
+      },
+      {
+        deep: true
+      }
+    );
+
+    // 删除
+    const onDelete = (item: any) => {
+      //
+      forms.removeIds.push(item.id);
+      const index = forms.coursewareList.findIndex(
+        (c: any) => c.id === item.id
+      );
+      forms.coursewareList.splice(index, 1);
+      forms.isEdit = true;
+      // prepareStore.setCoursewareList(forms.coursewareList);
+      // console.log(prepareStore.getCoursewareList, 'getCourseware');
+    };
+
+    // 完成编辑
+    const onOverEdit = async () => {
+      try {
+        const temp: any = [];
+        forms.coursewareList.forEach((item: any) => {
+          temp.push({
+            materialName: item.title,
+            materialType: item.type,
+            materialId: item.materialId,
+            id: item.id
+          });
+        });
+        // 保存课件
+        // 判断是否编辑，如果编辑则取选择的声部
+        await saveCourseware({
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+          lessonCoursewareId: prepareStore.getLessonCoursewareId,
+          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
+          subjectId: forms.isEdit
+            ? forms.editSubjectIds
+            : prepareStore.getSubjectId,
+          materialList: [...temp]
+        });
+
+        forms.drag = false;
+        message.success('编辑成功');
+        forms.removeVisiable = false;
+        prepareStore.setIsEditResource(false);
+        // 重置临时删除编号
+        forms.removeIds = [];
+        await getList();
+      } catch {
+        //
+      }
+    };
+
+    // 预览上课
+    const onPreviewAttend = () => {
+      // 获取上架的数据
+      let count = 0;
+      forms.coursewareList.forEach((item: any) => {
+        if (!item.removeFlag) {
+          count++;
+        }
+      });
+      if (count <= 0) {
+        message.error('课件不能为空');
+        return;
+      }
+      // 判断是否在应用里面
+      if (window.matchMedia('(display-mode: standalone)').matches) {
+        state.application = window.matchMedia(
+          '(display-mode: standalone)'
+        ).matches;
+        forms.previewModal = true;
+        fscreen();
+        forms.previewParams = {
+          type: 'preview',
+          instrumentId: prepareStore.getInstrumentId,
+          detailId: prepareStore.getSelectKey,
+          lessonCourseId: prepareStore.getBaseCourseware.id
+        };
+      } else {
+        const { href } = router.resolve({
+          path: '/attend-class',
+          query: {
+            type: 'preview',
+            instrumentId: prepareStore.getInstrumentId,
+            detailId: prepareStore.getSelectKey,
+            lessonCourseId: prepareStore.getBaseCourseware.id
+          }
+        });
+        window.open(href, +new Date() + '');
+      }
+    };
+    const fscreen = () => {
+      const el: any = document.documentElement;
+      const documentDom: any = document;
+      const isFullscreen =
+        documentDom.fullScreen ||
+        documentDom.mozFullScreen ||
+        documentDom.webkitIsFullScreen;
+      if (!isFullscreen) {
+        //进入全屏
+        (el.requestFullscreen && el.requestFullscreen()) ||
+          (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
+          (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
+          (el.msRequestFullscreen && el.msRequestFullscreen());
+      }
+    };
+    // 单个删除
+    const onRemove = async (item: any) => {
+      try {
+        dialog.warning({
+          title: '提示',
+          content: '该资源已下架，是否删除？',
+          positiveText: '确定',
+          negativeText: '取消',
+          onPositiveClick: async () => {
+            forms.removeIds.push(item.id);
+            await teacherKnowledgeMaterialDelete({ ids: item.id });
+            message.success('删除成功');
+            getList();
+          }
+        });
+      } catch {
+        //
+      }
+    };
+
+    watch(
+      () => prepareStore.getSubjectList,
+      () => {
+        checkSubjectIds();
+      }
+    );
+
+    const checkSubjectIds = () => {
+      const subjectList = prepareStore.getSubjectList;
+
+      // 并且没有声部时才会更新
+      if (subjectList.length > 0) {
+        // 并且声部在列表中
+        const localStorageSubjectId = localStorage.getItem(
+          'prepareLessonSubjectId'
+        );
+        // // 先取 上次上课声部，在取班级声部 最后取缓存
+        let subjectId = null;
+        let index = -1;
+        if (forms.courseScheduleSubjectId) {
+          // 判断浏览器上面是否有
+          index = subjectList.findIndex(
+            (subject: any) => subject.id == forms.courseScheduleSubjectId
+          );
+          if (index >= 0) {
+            subjectId = Number(forms.courseScheduleSubjectId);
+          }
+        }
+        // 判断班级上面声部 & 还没有声部
+        if (forms.subjectId && !subjectId) {
+          // 判断浏览器上面是否有
+          index = subjectList.findIndex(
+            (subject: any) => subject.id == forms.subjectId
+          );
+          if (index >= 0) {
+            subjectId = Number(forms.subjectId);
+          }
+        }
+        // 缓存声部 & 还没有声部
+        if (localStorageSubjectId && !subjectId) {
+          // 判断浏览器上面是否有
+          index = subjectList.findIndex(
+            (subject: any) => subject.id == localStorageSubjectId
+          );
+          if (index >= 0) {
+            subjectId = Number(localStorageSubjectId);
+          }
+        }
+        if (subjectId && index >= 0) {
+          prepareStore.setSubjectId(subjectId);
+        } else {
+          // 判断是否有缓存
+          prepareStore.setSubjectId(subjectList[0].id);
+        }
+
+        // 保存
+        localStorage.setItem(
+          'prepareLessonSubjectId',
+          prepareStore.getSubjectId as any
+        );
+      }
+    };
+
+    watch(
+      () => route.query,
+      async () => {
+        forms.className = route.query.name as any;
+        forms.classGroupId = route.query.classGroupId as any;
+        forms.preStudentNum = route.query.preStudentNum as any;
+        forms.subjectId = route.query.subjectId
+          ? Number(route.query.subjectId)
+          : null;
+        prepareStore.setClassGroupId(forms.classGroupId as any);
+
+        checkSubjectIds();
+        await getList();
+      }
+    );
+
+    const isPointInsideElement = (element: any, x: number, y: number) => {
+      const rect = element.getBoundingClientRect();
+      return (
+        x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+      );
+    };
+    const isPointOnLeft = (element: any, x: number) => {
+      const rect = element.getBoundingClientRect();
+      const elementCenterX = rect.left + rect.width / 2;
+      return x < elementCenterX;
+    };
+    onMounted(async () => {
+      prepareStore.setClassGroupId(route.query.classGroupId as any);
+      // 获取教材分类列表
+      checkSubjectIds();
+
+      await getList();
+
+      // 动态添加数据
+      eventGlobal.on('onPrepareAddItem', (item: any, point?: any) => {
+        forms.drag = true;
+        forms.isEdit = true;
+        nextTick(() => {
+          if (point) {
+            const dom = document.querySelectorAll('.row-nav');
+            let isAdd = false;
+            dom.forEach((child: any, index: number) => {
+              const status = isPointInsideElement(child, point.x, point.y);
+              if (status) {
+                const array: any = forms.coursewareList;
+                const left = isPointOnLeft(child, point.x);
+                if (!left) {
+                  array.splice(index + 1, 0, item);
+                } else {
+                  array.splice(index, 0, item);
+                }
+                isAdd = true;
+                forms.coursewareList = array;
+                prepareStore.setCoursewareList(forms.coursewareList);
+              }
+            });
+            if (!isAdd) {
+              forms.coursewareList.push(item);
+              prepareStore.setCoursewareList(forms.coursewareList);
+            }
+          } else {
+            forms.coursewareList.push(item);
+            prepareStore.setCoursewareList(forms.coursewareList);
+          }
+        });
+      });
+    });
+
+    return () => (
+      <div class={styles.coursewareModal}>
+        <div class={styles.btnGroup}>
+          {forms.drag ? (
+            !forms.tipsStatus ? (
+              <div class={styles.tipsContainer}>
+                <div class={styles.tipsLeft}>
+                  <img src={iconTips} class={styles.iconTips} />
+                  <span class={styles.tips}>可以拖动资源排序哦</span>
+                </div>
+                <span
+                  class={styles.btnNoTips}
+                  onClick={() => {
+                    localStorage.setItem('prepare-lesson-courseware-tip', '1');
+                    forms.tipsStatus = true;
+                  }}>
+                  不再提醒
+                </span>
+              </div>
+            ) : (
+              <span></span>
+            )
+          ) : (
+            <NSpace>
+              {forms.classGroupId && (
+                <div class={styles.btnItem}>
+                  <span class={styles.btnTitle}>上课班级：</span>
+                  <div
+                    onClick={() => {
+                      forms.showAttendClass = true;
+                      forms.attendClassType = 'change';
+                    }}>
+                    <NSelect
+                      placeholder="选择班级"
+                      labelField="name"
+                      valueField="id"
+                      class={styles.btnClassList}
+                      value={forms.className}
+                      disabled
+                    />
+                  </div>
+                </div>
+              )}
+
+              <div class={styles.btnItem}>
+                <span class={styles.btnTitle}>声部：</span>
+                <NSelect
+                  placeholder="选择声部"
+                  class={styles.btnSubjectList}
+                  options={prepareStore.getSubjectList}
+                  labelField="name"
+                  valueField="id"
+                  value={prepareStore.getSubjectId}
+                  onUpdate:value={(val: any) => {
+                    prepareStore.setSubjectId(val);
+                    // 保存
+                    localStorage.setItem('prepareLessonSubjectId', val);
+                    getList();
+                  }}
+                />
+              </div>
+            </NSpace>
+          )}
+
+          {/* 编辑 */}
+          {!forms.drag ? (
+            <NSpace>
+              <NButton
+                type="default"
+                onClick={() => {
+                  forms.drag = true;
+                  prepareStore.setIsEditResource(true);
+
+                  // forms.subjectSyncVisiable = true;
+                }}>
+                编辑
+              </NButton>
+            </NSpace>
+          ) : (
+            <NSpace>
+              <NButton
+                type="error"
+                onClick={() => {
+                  forms.removeVisiable1 = true;
+                }}>
+                清空资源
+              </NButton>
+              <NButton
+                type="error"
+                onClick={() => {
+                  forms.drag = false;
+                  forms.isEdit = false;
+                  prepareStore.setIsEditResource(false);
+                  forms.removeIds = [];
+                  getList();
+                }}>
+                取消编辑
+              </NButton>
+              <NButton
+                type="default"
+                onClick={() => {
+                  if (forms.isEdit) {
+                    forms.subjectSyncVisiable = true;
+                  } else {
+                    forms.removeVisiable = true;
+                  }
+                }}>
+                完成编辑
+              </NButton>
+            </NSpace>
+          )}
+        </div>
+
+        <NScrollbar
+          class={[
+            styles.listContainer,
+            forms.drag ? styles.listContainerDrag : ''
+          ]}
+          {...{ id: 'lessons-2' }}>
+          <NSpin show={forms.loadingStatus}>
+            <div
+              class={[
+                styles.listSection
+                // !forms.loadingStatus && forms.coursewareList.length <= 0
+                //   ? styles.emptySection
+                //   : ''
+              ]}
+              onDragenter={(e: any) => {
+                e.preventDefault();
+              }}
+              onDragover={(e: any) => {
+                e.preventDefault();
+              }}
+              onDrop={(e: any) => {
+                console.log(e, 'event');
+                let dropItem = e.dataTransfer.getData('text');
+                dropItem = dropItem ? JSON.parse(dropItem) : {};
+                // 判断是否有数据
+                if (dropItem.id) {
+                  // 获取拖拽的目标元素
+
+                  eventGlobal.emit(
+                    'onPrepareAddItem',
+                    {
+                      materialId: dropItem.id,
+                      coverImg: dropItem.coverImg,
+                      type: dropItem.type,
+                      title: dropItem.title,
+                      isCollect: dropItem.isCollect,
+                      isSelected: dropItem.isSelected,
+                      content: dropItem.content,
+                      removeFlag: false
+                    },
+                    {
+                      x: e.clientX,
+                      y: e.clientY
+                    }
+                  );
+                }
+              }}>
+              {forms.coursewareList.length > 0 && (
+                <>
+                  {forms.drag ? (
+                    <Draggable
+                      v-model:modelValue={forms.coursewareList}
+                      itemKey="id"
+                      componentData={{
+                        itemKey: 'id',
+                        tag: 'div',
+                        animation: 200,
+                        group: 'description',
+                        disabled: false
+                      }}
+                      class={styles.list}>
+                      {{
+                        item: (element: any) => {
+                          const item = element.element;
+                          return (
+                            <div
+                              data-id={item.id}
+                              class={[
+                                styles.itemWrap,
+                                styles.itemBlock,
+                                'row-nav'
+                              ]}>
+                              <div class={styles.itemWrapBox}>
+                                <CardType
+                                  class={[styles.itemContent]}
+                                  isShowCollect={false}
+                                  offShelf={item.removeFlag ? true : false}
+                                  onOffShelf={() => onRemove(item)}
+                                  item={item}
+                                />
+                                <div class={styles.itemOperation}>
+                                  <img
+                                    src={iconDelete}
+                                    class={styles.iconDelete}
+                                    onClick={(e: MouseEvent) => {
+                                      e.stopPropagation();
+                                      onDelete(item);
+                                    }}
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        }
+                      }}
+                    </Draggable>
+                  ) : (
+                    <div class={styles.list}>
+                      {forms.coursewareList.map((item: any) => (
+                        <div class={styles.itemWrap}>
+                          <div class={styles.itemWrapBox}>
+                            <CardType
+                              class={[styles.itemContent, 'handle']}
+                              isShowCollect={false}
+                              item={item}
+                              offShelf={item.removeFlag ? true : false}
+                              onOffShelf={() => onRemove(item)}
+                              disabledMouseHover={false}
+                              onClick={() => {
+                                if (item.type === 'IMG') return;
+                                forms.show = true;
+                                forms.item = item;
+                              }}
+                            />
+                          </div>
+                        </div>
+                      ))}
+                      <div class={styles.itemWrap}>
+                        <div class={styles.itemWrapBox}>
+                          <div
+                            class={[
+                              styles.itemContent,
+                              styles.addMusicItem,
+                              'handle'
+                            ]}
+                            onClick={() => {
+                              // 直接跳转到制谱页面 (临时存储数据)
+                              sessionStorage.setItem(
+                                'notation-open-create',
+                                '1'
+                              );
+                              router.push('/notation');
+                            }}>
+                            <img src={iconAddMusic} />
+
+                            <p class={styles.addMusicName}>开始制谱</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {/* {!forms.loadingStatus && forms.coursewareList.length <= 0 && (
+                <TheEmpty description="暂无课件" />
+              )} */}
+              {forms.coursewareList.length <= 0 && (
+                <div class={styles.list}>
+                  <div class={styles.itemWrap}>
+                    <div class={styles.itemWrapBox}>
+                      <div
+                        class={[
+                          styles.itemContent,
+                          styles.addMusicItem,
+                          'handle'
+                        ]}
+                        onClick={() => {
+                          // 直接跳转到制谱页面 (临时存储数据)
+                          sessionStorage.setItem('notation-open-create', '1');
+                          router.push('/notation');
+                        }}>
+                        <img src={iconAddMusic} />
+
+                        <p class={styles.addMusicName}>开始制谱</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </NSpin>
+        </NScrollbar>
+
+        {!forms.drag ? (
+          <div
+            class={[styles.btnGroup, styles.btnGroupClass]}
+            style={{ justifyContent: 'flex-end' }}>
+            <NSpace justify="end">
+              <NButton type="primary" onClick={onPreviewAttend}>
+                预览课件
+              </NButton>
+              <NButton
+                {...{ id: 'lessons-3' }}
+                type="error"
+                class={styles.btnClassStart}
+                onClick={async () => {
+                  let count = 0;
+                  forms.coursewareList.forEach((item: any) => {
+                    if (!item.removeFlag) {
+                      count++;
+                    }
+                  });
+                  if (count <= 0) {
+                    message.error('课件不能为空');
+                    return;
+                  }
+
+                  if (forms.classGroupId) {
+                    // 开始上课
+                    const res = await courseScheduleStart({
+                      lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
+                      classGroupId: forms.classGroupId,
+                      subjectId: prepareStore.getSubjectId
+                    });
+                    if (
+                      window.matchMedia('(display-mode: standalone)').matches
+                    ) {
+                      state.application = window.matchMedia(
+                        '(display-mode: standalone)'
+                      ).matches;
+                      forms.previewModal = true;
+                      fscreen();
+                      forms.previewParams = {
+                        type: 'class',
+                        classGroupId: forms.classGroupId,
+                        instrumentId: prepareStore.getInstrumentId,
+                        detailId: prepareStore.getSelectKey,
+                        classId: res.data,
+                        lessonCourseId: prepareStore.getBaseCourseware.id,
+                        preStudentNum: forms.preStudentNum
+                      };
+                    } else {
+                      const { href } = router.resolve({
+                        path: '/attend-class',
+                        query: {
+                          type: 'class',
+                          classGroupId: forms.classGroupId,
+                          instrumentId: prepareStore.getInstrumentId,
+                          detailId: prepareStore.getSelectKey,
+                          classId: res.data,
+                          lessonCourseId: prepareStore.getBaseCourseware.id,
+                          preStudentNum: forms.preStudentNum
+                        }
+                      });
+                      window.open(href, +new Date() + '');
+                    }
+                  } else {
+                    forms.showAttendClass = true;
+                    forms.attendClassType = 'change';
+                  }
+                }}>
+                开始上课
+              </NButton>
+            </NSpace>
+          </div>
+        ) : (
+          ''
+        )}
+
+        <NModal
+          v-model:show={forms.showAttendClass}
+          preset="card"
+          showIcon={false}
+          class={['modalTitle background', styles.attendClassModal]}
+          title={'选择班级'}
+          blockScroll={false}>
+          <AttendClass
+            onClose={() => (forms.showAttendClass = false)}
+            type={forms.attendClassType}
+            onPreview={(item: any) => {
+              if (window.matchMedia('(display-mode: standalone)').matches) {
+                state.application = window.matchMedia(
+                  '(display-mode: standalone)'
+                ).matches;
+                forms.previewModal = true;
+                forms.previewParams = {
+                  ...item
+                };
+              } else {
+                const { href } = router.resolve({
+                  path: '/attend-class',
+                  query: {
+                    ...item
+                  }
+                });
+                window.open(href, +new Date() + '');
+              }
+            }}
+            onConfirm={async (item: any) => {
+              if (forms.classGroupId) {
+                forms.className = item.name;
+                forms.classGroupId = item.classGroupId;
+                forms.preStudentNum = item.preStudentNum;
+                forms.subjectId = item.subjectId;
+                forms.courseScheduleSubjectId = item.courseScheduleSubjectId;
+                forms.showAttendClass = false;
+
+                prepareStore.setClassGroupId(item.classGroupId);
+                console.log(forms, 'forms', item);
+                checkSubjectIds();
+                // 声部切换时
+                eventGlobal.emit('onChangeClass', {
+                  lastUseCoursewareId: item.lastUseCoursewareId,
+                  unit: item.unit
+                });
+              } else {
+                const res = await courseScheduleStart({
+                  lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
+                  classGroupId: item.classGroupId,
+                  subjectId: prepareStore.getSubjectId
+                });
+                forms.showAttendClass = false;
+                if (window.matchMedia('(display-mode: standalone)').matches) {
+                  state.application = window.matchMedia(
+                    '(display-mode: standalone)'
+                  ).matches;
+                  forms.previewModal = true;
+                  forms.previewParams = {
+                    type: 'class',
+                    classId: res.data, // 上课编号
+                    classGroupId: item.classGroupId,
+                    preStudentNum: item.preStudentNum,
+                    subjectId: prepareStore.getSubjectId,
+                    detailId: prepareStore.getSelectKey,
+                    lessonCourseId: prepareStore.getBaseCourseware.id
+                  };
+                  setTimeout(() => {
+                    fscreen();
+                  }, 200);
+                } else {
+                  const { href } = router.resolve({
+                    path: '/attend-class',
+                    query: {
+                      type: 'class',
+                      classId: res.data, // 上课编号
+                      classGroupId: item.classGroupId,
+                      preStudentNum: item.preStudentNum,
+                      subjectId: prepareStore.getSubjectId,
+                      detailId: prepareStore.getSelectKey,
+                      lessonCourseId: prepareStore.getBaseCourseware.id
+                    }
+                  });
+                  window.open(href, +new Date() + '');
+                }
+              }
+            }}
+          />
+        </NModal>
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={forms.show} item={forms.item} />
+
+        <NModal
+          v-model:show={forms.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'提示'}>
+          <div class={styles.studentRemove}>
+            <p>是否完成编辑？</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton round type="primary" onClick={onOverEdit}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (forms.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+
+        <NModal
+          v-model:show={forms.removeVisiable1}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'清空资源'}>
+          <div class={styles.studentRemove}>
+            <p>
+              请确认是否要清空资源？
+              <span>点击确认后所有的素材内容 将被清空掉。</span>
+            </p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  forms.coursewareList.forEach((item: any) => {
+                    forms.removeIds.push(item.id);
+                  });
+                  forms.coursewareList = [];
+                  forms.removeVisiable1 = false;
+                  forms.isEdit = true;
+                  // prepareStore.setCoursewareList([]);
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (forms.removeVisiable1 = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+
+        <PreviewWindow
+          v-model:show={forms.previewModal}
+          type="attend"
+          params={forms.previewParams}
+        />
+
+        {/* 完成编辑时，选择声部 */}
+        <NModal
+          v-model:show={forms.subjectSyncVisiable}
+          preset="card"
+          class={['modalTitle background', styles.subjectSyncModal]}
+          title={'同步声部'}>
+          <SubjectSync
+            subjectId={prepareStore.getSubjectId as any}
+            onClose={() => (forms.subjectSyncVisiable = false)}
+            onConfirm={async (subjectIds: any) => {
+              //
+              try {
+                forms.editSubjectIds = subjectIds.join(',');
+                await onOverEdit();
+                forms.subjectSyncVisiable = false;
+              } catch {
+                //
+              }
+            }}
+          />
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/index.module.less

@@ -28,19 +28,19 @@
 
 :global {
   .listContainerResource {
-    max-height: calc(var(--window-page-lesson-height) - 244px - 40px) !important;
+    max-height: calc(var(--window-page-lesson-height) - 244px - 100px) !important;
     // overflow-x: auto;
 
     &.listNoMusicResource {
-      max-height: calc(var(--window-page-lesson-height) - 184px - 40px) !important;
+      max-height: calc(var(--window-page-lesson-height) - 184px - 100px) !important;
 
       .listSectionResource {
-        min-height: calc(var(--window-page-lesson-height) - 184px - 40px) !important;
+        min-height: calc(var(--window-page-lesson-height) - 184px - 100px) !important;
       }
     }
 
     .listSectionResource {
-      min-height: calc(var(--window-page-lesson-height) - 204px - 40px) !important;
+      min-height: calc(var(--window-page-lesson-height) - 204px - 100px) !important;
     }
   }
 }
@@ -81,6 +81,7 @@
       background: linear-gradient(90deg, #77BBFF 0%, rgba(163, 231, 255, 0.22) 100%);
       z-index: 0;
       bottom: 8px;
+      transition-duration: 0.03;
     }
 
     .n-tab-pane {

src/views/prepare-lessons/components/lesson-main/train/assign-homework.tsx

@@ -21,6 +21,7 @@ import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import AssignStudent from './assign-student';
 import { state } from '/src/state';
 import { nextTick } from 'process';
+import { api_getCurrentGradeYear } from '/src/views/studentList/api';
 
 export default defineComponent({
   name: 'assign-homework',
@@ -57,6 +58,7 @@ export default defineComponent({
     const message = useMessage();
     const prepareStore = usePrepareStore();
     const forms = reactive({
+      gradeYear: '' as any,
       currentTime: dayjs(dayjs().format('YYYY-MM-DD')).valueOf(),
       homeworkObj: 'CLASS' as 'PERSON' | 'CLASS',
       homeworkType: props.homeworkType,
@@ -82,7 +84,8 @@ export default defineComponent({
         const defaultSelectClassGroupId =
           props.classGroupId || prepareStore.getClassGroupId;
         const { data } = await classGroupList({
-          upgradeFlag: true
+          upgradeFlag: true,
+          gradeYear: forms.gradeYear
         });
         const cList = data || [];
         const gradeList: any = [];
@@ -137,7 +140,7 @@ export default defineComponent({
         }
         forms.uploading = true;
         try {
-          const trainList = props.item.lessonPreTrainingDetails || [];
+          const trainList: any = props.item.lessonPreTrainingDetails || [];
           const details: any[] = [];
           trainList.forEach((item: any) => {
             details.push({
@@ -177,8 +180,18 @@ export default defineComponent({
         forms.uploading = false;
       });
     };
+    const getCurrentGradeYear = async () => {
+      try {
+        const { data } = await api_getCurrentGradeYear({});
+        console.log(data);
+        forms.gradeYear = data;
+      } catch {
+        //
+      }
+    };
 
     onMounted(async () => {
+      await getCurrentGradeYear();
       await getClassGroupList();
     });
     return () => (

src/views/prepare-lessons/components/lesson-main/train/assign-student/index.module.less

@@ -19,7 +19,7 @@
     margin-bottom: 13px;
 
     :global {
-      .n-select+.n-select {
+      .n-select+.n-cascader {
         margin-left: 13px;
       }
     }

src/views/prepare-lessons/components/lesson-main/train/assign-student/index.tsx

@@ -1,377 +1,398 @@
-import { computed, defineComponent, onMounted, reactive } from 'vue';
-import styles from './index.module.less';
-import {
-  NAvatar,
-  NButton,
-  NCheckbox,
-  NCheckboxGroup,
-  NInput,
-  NScrollbar,
-  NSelect,
-  NSpace,
-  NSpin
-} from 'naive-ui';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import SearchInput from '/src/components/searchInput';
-import { useCatchStore } from '/src/store/modules/catchData';
-import { getStudentList } from '/src/views/classList/api';
-import { useThrottleFn } from '@vueuse/core';
-import TheEmpty from '/src/components/TheEmpty';
-import { getGradeYearList } from '/src/views/home/api';
-
-export default defineComponent({
-  name: 'assign-student',
-  props: {
-    /** 班级列表 */
-    classList: {
-      type: Array,
-      default: () => []
-    },
-    /** 所选学生列表 */
-    studentList: {
-      type: Array,
-      default: () => []
-    },
-    /** 学年 */
-    currentGradeNum: {
-      type: [String || Number],
-      default: ''
-    },
-    selectIds: {
-      type: Array,
-      default: () => []
-    },
-    classGroupId: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['close', 'confirm'],
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const state = reactive({
-      studentName: '',
-      loading: false,
-      finshed: false, // 是否加载完
-      checkAllStatus: false,
-      indeterminate: false,
-      searchFrom: {
-        upgradeFlag: true,
-        currentGradeNum: props.currentGradeNum || '',
-        gradeYear: null,
-        classGroupId: props.classGroupId || '',
-        subjectId: '',
-        keyword: ''
-      },
-      pagination: {
-        page: 1,
-        rows: 20,
-        pageTotal: 0
-      },
-      tableList: [] as any,
-      checkboxIds: [] as any,
-      selectStudents: [] as any,
-      selectKeyword: '',
-      popSelectYearList: [] as any
-    });
-
-    // 获取学年
-    const getYearList = async () => {
-      try {
-        const { data } = await getGradeYearList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '学年';
-        });
-        state.popSelectYearList = temp || [];
-        if (temp.length > 0 && !state.searchFrom.gradeYear) {
-          state.searchFrom.gradeYear = temp[0].id;
-        }
-      } catch {
-        //
-      }
-    };
-
-    const getStudentLists = async () => {
-      try {
-        if (state.pagination.page === 1) {
-          state.loading = true;
-          state.tableList = [];
-        }
-        const { data } = await getStudentList({
-          ...state.searchFrom,
-          ...state.pagination
-        });
-        state.loading = false;
-        const rows = data.rows || [];
-        state.tableList.push(...rows);
-        state.finshed = data.pages <= data.current ? true : false;
-
-        onCheckStudents();
-      } catch {
-        //
-        state.loading = false;
-      }
-    };
-
-    const onSearch = () => {
-      state.pagination.page = 1;
-      getStudentLists();
-    };
-
-    const selectStudentEmpty = computed(() => {
-      let status = true;
-      state.selectStudents.forEach((item: any) => {
-        if (!item.hide) {
-          status = false;
-        }
-      });
-      return status;
-    });
-
-    const throttledFn = useThrottleFn(() => {
-      state.pagination.page = state.pagination.page + 1;
-      getStudentLists();
-    }, 500);
-
-    // 切换学生状态
-    const onCheckStudents = () => {
-      // state.selectStudents = [];
-      if (state.checkboxIds.length <= 0 || state.tableList.length <= 0) {
-        state.indeterminate = false;
-        state.checkAllStatus = false;
-        return;
-      }
-      let count = 0;
-      // 右边数据
-      state.tableList.forEach((item: any) => {
-        if (state.checkboxIds.includes(item.id)) {
-          count++;
-          const index = state.selectStudents.findIndex(
-            (select: any) => select.id === item.id
-          );
-          if (index === -1) state.selectStudents.push(item);
-        }
-      });
-
-      if (count >= state.tableList.length) {
-        state.checkAllStatus = true;
-        state.indeterminate = false;
-      } else {
-        state.checkAllStatus = false;
-        state.indeterminate = true;
-      }
-    };
-
-    // 删除用户
-    const onRemove = (item: any) => {
-      const index = state.checkboxIds.findIndex((id: any) => id === item.id);
-      if (index !== -1) {
-        state.checkboxIds.splice(index, 1);
-        const sIndex = state.selectStudents.findIndex(
-          (select: any) => select.id === item.id
-        );
-        if (sIndex !== -1) {
-          state.selectStudents.splice(sIndex, 1);
-        }
-        onCheckStudents();
-      }
-    };
-
-    const onSave = () => {
-      const studentInfo: any[] = [];
-      state.selectStudents.forEach((item: any) => {
-        studentInfo.push({
-          id: item.id,
-          name: item.nickname,
-          avatar: item.avatar
-        });
-      });
-
-      emit('confirm', studentInfo);
-    };
-
-    onMounted(async () => {
-      state.checkboxIds = props.selectIds || [];
-      state.loading = true;
-      await catchStore.getSubjects();
-      await getYearList();
-      await getStudentLists();
-      // onCheckStudents();
-      // 重置选择的学生
-      state.selectStudents = props.studentList?.map((item: any) => {
-        return {
-          ...item,
-          nickname: item.name
-        };
-      });
-    });
-    return () => (
-      <div class={styles.assignStudent}>
-        <div class={styles.studentListGroup}>
-          <div class={styles.searchSection}>
-            <div class={styles.searchSpace}>
-              <NSelect
-                placeholder="全部班级"
-                disabled={props.classGroupId ? true : false}
-                v-model:value={state.searchFrom.classGroupId}
-                onUpdate:value={() => onSearch()}
-                options={
-                  [{ label: '全部班级', value: '' }, ...props.classList] as any
-                }
-              />
-              <NSelect
-                options={[
-                  { label: '全部声部', value: '' },
-                  ...catchStore.getSubjectList
-                ]}
-                placeholder="全部声部"
-                v-model:value={state.searchFrom.subjectId}
-                onUpdate:value={() => onSearch()}
-              />
-            </div>
-            <SearchInput
-              {...{ placeholder: '请输入学生姓名/手机号' }}
-              class={styles.searchInput}
-              searchWord={state.searchFrom.keyword}
-              onChangeValue={(val: string) => {
-                state.searchFrom.keyword = val;
-              }}
-              onClear={() => {
-                state.searchFrom.keyword = '';
-                onSearch();
-              }}
-              onKeyup={(e: KeyboardEvent) => {
-                if (e.code === 'Enter') {
-                  onSearch();
-                }
-              }}></SearchInput>
-          </div>
-
-          <div class={styles.studentSection}>
-            <div class={styles.checkboxAll}>
-              <NCheckbox
-                v-model:checked={state.checkAllStatus}
-                indeterminate={state.indeterminate}
-                onUpdate:checked={(val: any) => {
-                  if (val) {
-                    const ids: any = [];
-                    state.tableList.forEach((item: any) => {
-                      ids.push(item.id);
-                    });
-                    state.checkboxIds = ids;
-                  } else {
-                    state.checkboxIds = [];
-                    state.selectStudents = [];
-                    state.indeterminate = false;
-                  }
-                  onCheckStudents();
-                }}></NCheckbox>
-              <p>
-                全选 <span class={styles.nums}>({state.tableList.length})</span>{' '}
-                ：
-              </p>
-            </div>
-          </div>
-          <NScrollbar
-            class={styles.student}
-            onScroll={(e: any) => {
-              const clientHeight = e.target?.clientHeight;
-              const scrollTop = e.target?.scrollTop;
-              const scrollHeight = e.target?.scrollHeight;
-              // 是否到底，是否加载完
-              if (
-                clientHeight + scrollTop + 20 >= scrollHeight &&
-                !state.finshed &&
-                !state.loading
-              ) {
-                throttledFn();
-              }
-            }}>
-            <NSpin show={state.loading} class={styles.loadingSection}>
-              <NCheckboxGroup
-                v-model:value={state.checkboxIds}
-                onUpdate:value={() => {
-                  state.selectStudents = [];
-                  onCheckStudents();
-                }}>
-                {state.tableList.map((item: any) => (
-                  <NCheckbox value={item.id} class={[styles.studentItem]}>
-                    <div class={styles.studentInfo}>
-                      <NAvatar
-                        src={item.avatar || defultHeade}
-                        class={styles.studentImg}
-                      />
-                      <div class={styles.studentValue}>
-                        <div class={styles.userInfo}>
-                          <span class={styles.name}>{item.nickname}</span>
-                          {item.membership && <i class={styles.iconMember}></i>}
-                          {item.classGroupName && (
-                            <span class={styles.className}>
-                              {item.classGroupName}
-                            </span>
-                          )}
-                        </div>
-                        <div class={styles.phone}>{item.phone}</div>
-                      </div>
-                    </div>
-                  </NCheckbox>
-                ))}
-              </NCheckboxGroup>
-              {state.tableList.length <= 0 && !state.loading && <TheEmpty />}
-            </NSpin>
-          </NScrollbar>
-        </div>
-
-        <div class={styles.selectStudentGroup}>
-          <div class={styles.selectCount}>
-            当前选中 <span>({state.selectStudents.length}) </span>：
-          </div>
-          <div class={styles.searchSection}>
-            <SearchInput
-              {...{ placeholder: '请输入学生姓名' }}
-              class={styles.searchInput}
-              searchWord={state.selectKeyword}
-              onChangeValue={(val: string) => {
-                state.selectKeyword = val;
-
-                state.selectStudents.forEach((item: any) => {
-                  if (item.nickname?.indexOf(val) === -1) {
-                    item.hide = true;
-                  } else {
-                    item.hide = false;
-                  }
-                });
-              }}></SearchInput>
-          </div>
-          <NScrollbar class={styles.student}>
-            {state.selectStudents.map((student: any) => (
-              <div class={[styles.studentItem, student.hide && styles.hide]}>
-                <div class={styles.studentInfo}>
-                  <NAvatar
-                    src={student.avatar || defultHeade}
-                    class={styles.studentImg}
-                  />
-                  <span class={styles.name}>{student.nickname}</span>
-                </div>
-                <i
-                  class={styles.iconClose}
-                  onClick={() => onRemove(student)}></i>
-              </div>
-            ))}
-            {selectStudentEmpty.value && <TheEmpty />}
-          </NScrollbar>
-
-          <NSpace justify="end" class={styles.btnGroup}>
-            <NButton type="default" onClick={() => emit('close')}>
-              取消
-            </NButton>
-            <NButton type="primary" onClick={onSave}>
-              保存
-            </NButton>
-          </NSpace>
-        </div>
-      </div>
-    );
-  }
-});
+import { computed, defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import {
+  NAvatar,
+  NButton,
+  NCascader,
+  NCheckbox,
+  NCheckboxGroup,
+  NInput,
+  NScrollbar,
+  NSelect,
+  NSpace,
+  NSpin
+} from 'naive-ui';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import SearchInput from '/src/components/searchInput';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { getStudentList } from '/src/views/classList/api';
+import { useThrottleFn } from '@vueuse/core';
+import TheEmpty from '/src/components/TheEmpty';
+import { getGradeYearList } from '/src/views/home/api';
+import { api_getCurrentGradeYear } from '/src/views/studentList/api';
+
+export default defineComponent({
+  name: 'assign-student',
+  props: {
+    /** 班级列表 */
+    classList: {
+      type: Array,
+      default: () => []
+    },
+    /** 所选学生列表 */
+    studentList: {
+      type: Array,
+      default: () => []
+    },
+    /** 学年 */
+    currentGradeNum: {
+      type: [String || Number],
+      default: ''
+    },
+    selectIds: {
+      type: Array,
+      default: () => []
+    },
+    classGroupId: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const state = reactive({
+      studentName: '',
+      loading: false,
+      finshed: false, // 是否加载完
+      checkAllStatus: false,
+      indeterminate: false,
+      searchFrom: {
+        upgradeFlag: true,
+        currentGradeNum: props.currentGradeNum || '',
+        gradeYear: null,
+        classGroupId: props.classGroupId || '',
+        classInstrumentId: '',
+        keyword: ''
+      },
+      pagination: {
+        page: 1,
+        rows: 20,
+        pageTotal: 0
+      },
+      tableList: [] as any,
+      checkboxIds: [] as any,
+      selectStudents: [] as any,
+      selectKeyword: '',
+      popSelectYearList: [] as any
+    });
+
+    // 获取学年
+    const getYearList = async () => {
+      try {
+        const { data } = await api_getCurrentGradeYear({});
+        state.searchFrom.gradeYear = data;
+        // const { data } = await getGradeYearList();
+        // const temp = data || [];
+        // temp.forEach((i: any) => {
+        //   i.name = i.name + '学年';
+        // });
+        // state.popSelectYearList = temp || [];
+        // if (temp.length > 0 && !state.searchFrom.gradeYear) {
+        //   state.searchFrom.gradeYear = temp[0].id;
+        // }
+      } catch {
+        //
+      }
+    };
+
+    const getStudentLists = async () => {
+      try {
+        if (state.pagination.page === 1) {
+          state.loading = true;
+          state.tableList = [];
+        }
+        const { data } = await getStudentList({
+          ...state.searchFrom,
+          ...state.pagination
+        });
+        state.loading = false;
+        const rows = data.rows || [];
+        state.tableList.push(...rows);
+        state.finshed = data.pages <= data.current ? true : false;
+
+        onCheckStudents();
+      } catch {
+        //
+        state.loading = false;
+      }
+    };
+
+    const onSearch = () => {
+      state.pagination.page = 1;
+      getStudentLists();
+    };
+
+    const selectStudentEmpty = computed(() => {
+      let status = true;
+      state.selectStudents.forEach((item: any) => {
+        if (!item.hide) {
+          status = false;
+        }
+      });
+      return status;
+    });
+
+    const throttledFn = useThrottleFn(() => {
+      state.pagination.page = state.pagination.page + 1;
+      getStudentLists();
+    }, 500);
+
+    // 切换学生状态
+    const onCheckStudents = () => {
+      // state.selectStudents = [];
+      if (state.checkboxIds.length <= 0 || state.tableList.length <= 0) {
+        state.indeterminate = false;
+        state.checkAllStatus = false;
+        return;
+      }
+      let count = 0;
+      // 右边数据
+      state.tableList.forEach((item: any) => {
+        if (state.checkboxIds.includes(item.id)) {
+          count++;
+          const index = state.selectStudents.findIndex(
+            (select: any) => select.id === item.id
+          );
+          if (index === -1) state.selectStudents.push(item);
+        }
+      });
+
+      if (count >= state.tableList.length) {
+        state.checkAllStatus = true;
+        state.indeterminate = false;
+      } else {
+        state.checkAllStatus = false;
+        state.indeterminate = true;
+      }
+    };
+
+    // 删除用户
+    const onRemove = (item: any) => {
+      const index = state.checkboxIds.findIndex((id: any) => id === item.id);
+      if (index !== -1) {
+        state.checkboxIds.splice(index, 1);
+        const sIndex = state.selectStudents.findIndex(
+          (select: any) => select.id === item.id
+        );
+        if (sIndex !== -1) {
+          state.selectStudents.splice(sIndex, 1);
+        }
+        onCheckStudents();
+      }
+    };
+
+    const onSave = () => {
+      const studentInfo: any[] = [];
+      state.selectStudents.forEach((item: any) => {
+        studentInfo.push({
+          id: item.id,
+          name: item.nickname,
+          avatar: item.avatar
+        });
+      });
+
+      emit('confirm', studentInfo);
+    };
+
+    onMounted(async () => {
+      state.checkboxIds = props.selectIds || [];
+      state.loading = true;
+      await catchStore.getSubjects();
+      await getYearList();
+      await getStudentLists();
+      // onCheckStudents();
+      // 重置选择的学生
+      state.selectStudents = props.studentList?.map((item: any) => {
+        return {
+          ...item,
+          nickname: item.name
+        };
+      });
+    });
+    return () => (
+      <div class={styles.assignStudent}>
+        <div class={styles.studentListGroup}>
+          <div class={styles.searchSection}>
+            <div class={styles.searchSpace}>
+              <NSelect
+                placeholder="全部班级"
+                disabled={props.classGroupId ? true : false}
+                v-model:value={state.searchFrom.classGroupId}
+                onUpdate:value={() => onSearch()}
+                options={
+                  [{ label: '全部班级', value: '' }, ...props.classList] as any
+                }
+              />
+              {/* <NSelect
+                options={[
+                  { label: '全部乐器', value: '' },
+                  ...catchStore.getEnableSubjects
+                ]}
+                placeholder="全部乐器"
+                v-model:value={state.searchFrom.classInstrumentId}
+                onUpdate:value={() => onSearch()}
+              /> */}
+              <NCascader
+                options={[
+                  { name: '全部乐器', id: '' },
+                  ...catchStore.getSubjectList
+                ]}
+                placeholder="全部乐器"
+                v-model:value={state.searchFrom.classInstrumentId}
+                onUpdate:value={() => onSearch()}
+                checkStrategy="child"
+                showPath
+                childrenField="instruments"
+                expandTrigger="hover"
+                labelField="name"
+                valueField="id"
+                clearable
+                filterable
+              />
+            </div>
+            <SearchInput
+              {...{ placeholder: '请输入学生姓名/手机号' }}
+              class={styles.searchInput}
+              searchWord={state.searchFrom.keyword}
+              onChangeValue={(val: string) => {
+                state.searchFrom.keyword = val;
+              }}
+              onClear={() => {
+                state.searchFrom.keyword = '';
+                onSearch();
+              }}
+              onKeyup={(e: KeyboardEvent) => {
+                if (e.code === 'Enter') {
+                  onSearch();
+                }
+              }}></SearchInput>
+          </div>
+
+          <div class={styles.studentSection}>
+            <div class={styles.checkboxAll}>
+              <NCheckbox
+                v-model:checked={state.checkAllStatus}
+                indeterminate={state.indeterminate}
+                onUpdate:checked={(val: any) => {
+                  if (val) {
+                    const ids: any = [];
+                    state.tableList.forEach((item: any) => {
+                      ids.push(item.id);
+                    });
+                    state.checkboxIds = ids;
+                  } else {
+                    state.checkboxIds = [];
+                    state.selectStudents = [];
+                    state.indeterminate = false;
+                  }
+                  onCheckStudents();
+                }}></NCheckbox>
+              <p>
+                全选 <span class={styles.nums}>({state.tableList.length})</span>{' '}
+                ：
+              </p>
+            </div>
+          </div>
+          <NScrollbar
+            class={styles.student}
+            onScroll={(e: any) => {
+              const clientHeight = e.target?.clientHeight;
+              const scrollTop = e.target?.scrollTop;
+              const scrollHeight = e.target?.scrollHeight;
+              // 是否到底，是否加载完
+              if (
+                clientHeight + scrollTop + 20 >= scrollHeight &&
+                !state.finshed &&
+                !state.loading
+              ) {
+                throttledFn();
+              }
+            }}>
+            <NSpin show={state.loading} class={styles.loadingSection}>
+              <NCheckboxGroup
+                v-model:value={state.checkboxIds}
+                onUpdate:value={() => {
+                  state.selectStudents = [];
+                  onCheckStudents();
+                }}>
+                {state.tableList.map((item: any) => (
+                  <NCheckbox value={item.id} class={[styles.studentItem]}>
+                    <div class={styles.studentInfo}>
+                      <NAvatar
+                        src={item.avatar || defultHeade}
+                        class={styles.studentImg}
+                      />
+                      <div class={styles.studentValue}>
+                        <div class={styles.userInfo}>
+                          <span class={styles.name}>{item.nickname}</span>
+                          {item.membership && <i class={styles.iconMember}></i>}
+                          {item.classGroupName && (
+                            <span class={styles.className}>
+                              {item.classGroupName}
+                            </span>
+                          )}
+                        </div>
+                        <div class={styles.phone}>{item.phone}</div>
+                      </div>
+                    </div>
+                  </NCheckbox>
+                ))}
+              </NCheckboxGroup>
+              {state.tableList.length <= 0 && !state.loading && <TheEmpty />}
+            </NSpin>
+          </NScrollbar>
+        </div>
+
+        <div class={styles.selectStudentGroup}>
+          <div class={styles.selectCount}>
+            当前选中 <span>({state.selectStudents.length}) </span>：
+          </div>
+          <div class={styles.searchSection}>
+            <SearchInput
+              {...{ placeholder: '请输入学生姓名' }}
+              class={styles.searchInput}
+              searchWord={state.selectKeyword}
+              onChangeValue={(val: string) => {
+                state.selectKeyword = val;
+
+                state.selectStudents.forEach((item: any) => {
+                  if (item.nickname?.indexOf(val) === -1) {
+                    item.hide = true;
+                  } else {
+                    item.hide = false;
+                  }
+                });
+              }}></SearchInput>
+          </div>
+          <NScrollbar class={styles.student}>
+            {state.selectStudents.map((student: any) => (
+              <div class={[styles.studentItem, student.hide && styles.hide]}>
+                <div class={styles.studentInfo}>
+                  <NAvatar
+                    src={student.avatar || defultHeade}
+                    class={styles.studentImg}
+                  />
+                  <span class={styles.name}>{student.nickname}</span>
+                </div>
+                <i
+                  class={styles.iconClose}
+                  onClick={() => onRemove(student)}></i>
+              </div>
+            ))}
+            {selectStudentEmpty.value && <TheEmpty />}
+          </NScrollbar>
+
+          <NSpace justify="end" class={styles.btnGroup}>
+            <NButton type="default" onClick={() => emit('close')}>
+              取消
+            </NButton>
+            <NButton type="primary" onClick={onSave}>
+              保存
+            </NButton>
+          </NSpace>
+        </div>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/train/index.tsx

@@ -192,19 +192,24 @@ export default defineComponent({
             musicName: item.musicName
           });
         });
-        await lessonPreTrainingV2Save({
+        const { data } = await lessonPreTrainingV2Save({
           title: forms.title,
           id: props.lessonPreTraining?.id,
           coursewareKnowledgeDetailId:
             props.coursewareKnowledgeDetailId || prepareStore.getSelectKey,
           lessonPreTrainingDetails,
+          courseScheduleId: props.courseScheduleId,
           chapterLessonCoursewareId: props.lessonPreTraining?.chapterId
         });
         message.success('保存成功');
         prepareStore.setIsEditTrain(false);
         forms.removeIds = [];
         // getList();
-        emit('change', { status: false });
+        emit('change', {
+          status: false,
+          saveWork: true,
+          lessonPreTrainingId: data.id
+        });
       } catch {
         //
       }

src/views/prepare-lessons/components/resource-main/components/resource-item/index.tsx

@@ -1,4 +1,11 @@
-import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  watch
+} from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin, useDialog, useMessage } from 'naive-ui';
 import styles from './index.module.less';
@@ -47,6 +54,7 @@ export default defineComponent({
         type: 'MUSIC', //
         name: '',
         bookVersionId: null,
+        musicalInstrumentId: null,
         subjectId: null,
         sourceType: formatType(props.type),
         enableFlag: true
@@ -67,7 +75,8 @@ export default defineComponent({
           lessonCoursewareKnowledgeId:
             props.type === 'relateResources' || props.type === 'shareResources'
               ? prepareStore.getSelectKey
-              : null
+              : null,
+          relateLessonCoursewareKnowledgeMaterialIds: getIds()
           // subjectId: prepareStore.getSubjectId
         });
         state.loading = false;
@@ -83,6 +92,7 @@ export default defineComponent({
             type: row.type,
             title: row.name,
             isCollect: !!row.favoriteFlag,
+            refFlag: row.refFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
             content: row.content
             // exist: index !== -1 ? true : false // 是否存在
@@ -117,26 +127,11 @@ export default defineComponent({
 
     // 声部变化时
     watch(
-      () => prepareStore.getSubjectId,
+      () => prepareStore.getInstrumentId,
       () => {
         onSearch(state.searchGroup);
       }
     );
-    // watch(
-    //   () => prepareStore.coursewareList,
-    //   () => {
-    //     state.tableList.forEach((item: any) => {
-    //       const index = prepareStore.getCoursewareList.findIndex(
-    //         (course: any) => course.materialId === item.id
-    //       );
-    //       item.exist = index !== -1 ? true : false; // 是否存在
-    //     });
-    //   },
-    //   {
-    //     deep: true,
-    //     immediate: true
-    //   }
-    // );
 
     const throttledFn = useThrottleFn(() => {
       state.pagination.page = state.pagination.page + 1;
@@ -149,6 +144,7 @@ export default defineComponent({
         eventGlobal.emit('onPrepareAddItem', {
           materialId: item.id,
           coverImg: item.coverImg,
+          refFlag: item.refFlag,
           type: item.type,
           title: item.title,
           isCollect: item.isCollect,
@@ -174,9 +170,34 @@ export default defineComponent({
         //
       }
     };
+    const getIds = () => {
+      let noRepeatIds: any = [];
+      if (props.type === 'relateResources') {
+        const materialIds: any = [];
+        prepareStore.getCoursewareList.forEach((course: any) => {
+          course.list?.forEach((item: any) => {
+            materialIds.push(item.materialId);
+          });
+        });
+        noRepeatIds = Array(...new Set(materialIds));
+      }
+      return noRepeatIds.join(',');
+    };
 
-    onMounted(() => {
+    const onUpdate = () => {
+      state.pagination.page = 1;
+      state.tableList = [];
       getList();
+    };
+
+    onMounted(() => {
+      // 加载的时候判断是否有资源数据
+      onUpdate();
+
+      eventGlobal.on('onCoursewareUpdate', onUpdate);
+    });
+    onUnmounted(() => {
+      eventGlobal.off('onCoursewareUpdate', onUpdate);
     });
     return () => (
       <div>

src/views/prepare-lessons/components/resource-main/components/resource-item/resource-search-group/index.tsx

@@ -1,118 +1,140 @@
-import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
-import { resourceTypeArray } from '/src/utils/searchArray';
-import { useCatchStore } from '/src/store/modules/catchData';
-import { useThrottleFn } from '@vueuse/core';
-
-export default defineComponent({
-  name: 'resource-search-group',
-  emits: ['search'],
-  props: {
-    type: {
-      type: String as PropType<
-        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
-      >,
-      default: 'relateResources'
-    }
-  },
-  setup(props, { emit }) {
-    const catchStore = useCatchStore();
-    const forms = reactive({
-      type: 'MUSIC', //
-      name: '',
-      bookVersionId: null
-    });
-    const resourceType = ref([] as any);
-
-    const onSearch = () => {
-      emit('search', forms);
-    };
-
-    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
-
-    onMounted(async () => {
-      // 获取教材分类列表
-      await catchStore.getMusicSheetCategory();
-      // if (props.type === 'myCollect') {
-      //   resourceType.value.push({
-      //     label: '全部',
-      //     value: ''
-      //   });
-      //   forms.type = ''; // 默认全部
-      // }
-      resourceTypeArray.forEach((item: any) => {
-        // if (props.type === 'myResources') {
-        //   item.value !== 'MUSIC' && resourceType.value.push(item);
-        // } else {
-        resourceType.value.push(item);
-        // }
-      });
-    });
-    return () => (
-      <>
-        <div class={styles.searchGroup}>
-          <NSpace size="small" class={styles.btnType}>
-            {resourceType.value.map((item: any) => (
-              <NButton
-                type={forms.type === item.value ? 'primary' : 'default'}
-                secondary={forms.type === item.value ? false : true}
-                round
-                size="small"
-                focusable={false}
-                onClick={() => {
-                  forms.type = item.value;
-                  debouncedRequest();
-                }}>
-                {item.label}
-              </NButton>
-            ))}
-          </NSpace>
-
-          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
-            <div class={styles.searchSelect}>
-              <NSelect
-                placeholder="全部教材"
-                options={[
-                  { name: '全部教材', id: null },
-                  ...catchStore.getMusicCategories
-                ]}
-                clearable
-                labelField="name"
-                valueField="id"
-                v-model:value={forms.bookVersionId}
-                onUpdate:value={() => {
-                  onSearch();
-                }}
-              />
-            </div>
-          )}
-
-          <NInput
-            type="text"
-            placeholder="请输入搜索关键词"
-            clearable
-            v-model:value={forms.name}
-            class={styles.inputSearch}
-            onKeyup={(e: KeyboardEvent) => {
-              if (e.code === 'Enter') {
-                debouncedRequest();
-              }
-            }}
-            onClear={() => {
-              forms.name = '';
-              debouncedRequest();
-            }}>
-            {{
-              prefix: () => (
-                <span
-                  class={'icon-search-input'}
-                  onClick={() => debouncedRequest()}></span>
-              )
-            }}
-          </NInput>
-        </div>
-      </>
-    );
-  }
-});
+import { PropType, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
+import { resourceTypeArray } from '/src/utils/searchArray';
+import { useCatchStore } from '/src/store/modules/catchData';
+import { useThrottleFn } from '@vueuse/core';
+
+export default defineComponent({
+  name: 'resource-search-group',
+  emits: ['search'],
+  props: {
+    type: {
+      type: String as PropType<
+        'shareResources' | 'myResources' | 'myCollect' | 'relateResources'
+      >,
+      default: 'relateResources'
+    }
+  },
+  setup(props, { emit }) {
+    const catchStore = useCatchStore();
+    const forms = reactive({
+      type: 'MUSIC', //
+      name: '',
+      bookVersionId: null,
+      musicalInstrumentId: ''
+    });
+    const resourceType = ref([] as any);
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    const debouncedRequest = useThrottleFn(() => onSearch(), 500);
+
+    onMounted(async () => {
+      // 获取教材分类列表
+      await catchStore.getSubjects();
+      // if (props.type === 'myCollect') {
+      //   resourceType.value.push({
+      //     label: '全部',
+      //     value: ''
+      //   });
+      //   forms.type = ''; // 默认全部
+      // }
+      resourceTypeArray.forEach((item: any) => {
+        // if (props.type === 'myResources') {
+        //   item.value !== 'MUSIC' && resourceType.value.push(item);
+        // } else {
+        resourceType.value.push(item);
+        // }
+      });
+    });
+    return () => (
+      <>
+        <div class={styles.searchGroup}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceType.value.map((item: any) => (
+              <NButton
+                type={forms.type === item.value ? 'primary' : 'default'}
+                secondary={forms.type === item.value ? false : true}
+                round
+                size="small"
+                focusable={false}
+                onClick={() => {
+                  forms.type = item.value;
+                  debouncedRequest();
+                }}>
+                {item.label}
+              </NButton>
+            ))}
+          </NSpace>
+
+          <div class={styles.searchSelect}>
+            <NCascader
+              placeholder="全部乐器"
+              options={[
+                { name: '全部乐器', id: '' },
+                ...catchStore.getSubjectList
+              ]}
+              clearable
+              labelField="name"
+              valueField="id"
+              v-model:value={forms.musicalInstrumentId}
+              onUpdate:value={() => {
+                onSearch();
+              }}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              filterable
+            />
+          </div>
+          {forms.type === 'MUSIC' && props.type === 'shareResources' && (
+            <div class={styles.searchSelect}>
+              <NSelect
+                placeholder="全部教材"
+                options={[
+                  { name: '全部教材', id: null },
+                  ...catchStore.getMusicCategories
+                ]}
+                clearable
+                labelField="name"
+                valueField="id"
+                v-model:value={forms.bookVersionId}
+                onUpdate:value={() => {
+                  onSearch();
+                }}
+              />
+            </div>
+          )}
+
+          <NInput
+            type="text"
+            placeholder="请输入搜索关键词"
+            clearable
+            v-model:value={forms.name}
+            class={styles.inputSearch}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                debouncedRequest();
+              }
+            }}
+            onClear={() => {
+              forms.name = '';
+              debouncedRequest();
+            }}>
+            {{
+              prefix: () => (
+                <span
+                  class={'icon-search-input'}
+                  onClick={() => debouncedRequest()}></span>
+              )
+            }}
+          </NInput>
+        </div>
+      </>
+    );
+  }
+});

src/views/prepare-lessons/components/resource-main/components/select-music/index.module.less

@@ -1,18 +1,18 @@
 .listContainer {
   margin: 10px 0;
-  max-height: calc(var(--window-page-lesson-height) - 204px);
-  // overflow-x: auto;
+  max-height: calc(var(--window-page-lesson-height) - 264px);
+  // overflow-x: auto; 60 204 150
 
   &.listNoMusic {
-    max-height: calc(var(--window-page-lesson-height) - 150px);
+    max-height: calc(var(--window-page-lesson-height) - 210px);
 
     .listSection {
-      min-height: calc(var(--window-page-lesson-height) - 150px);
+      min-height: calc(var(--window-page-lesson-height) - 210px);
     }
   }
 
   .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 204px);
+    min-height: calc(var(--window-page-lesson-height) - 264px);
   }
 
 

src/views/prepare-lessons/components/resource-main/components/select-music/index.tsx

@@ -72,6 +72,7 @@ export default defineComponent({
         name: '',
         type: 'MUSIC', //
         musicSheetCategoriesId: '',
+        musicalInstrumentId: '',
         sourceType: formatType(props.type),
         status: 1,
         versionFlag: false,
@@ -117,6 +118,7 @@ export default defineComponent({
             type: 'MUSIC',
             title: row.name,
             isCollect: !!row.favoriteFlag,
+            refFlag: row.refFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
             content: row.id,
             xmlFileUrl: row.xmlFileUrl

src/views/prepare-lessons/components/resource-main/components/select-music/resource-search-group/index.tsx

@@ -1,6 +1,6 @@
 import { PropType, defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
-import { NButton, NInput, NSelect, NSpace } from 'naive-ui';
+import { NButton, NCascader, NInput, NSelect, NSpace } from 'naive-ui';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
 
@@ -17,7 +17,8 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       name: '',
-      musicSheetCategoriesId: null
+      musicSheetCategoriesId: null,
+      musicalInstrumentId: null
     });
 
     const onSearch = () => {
@@ -54,6 +55,22 @@ export default defineComponent({
             </div>
           )}
 
+          <div class={styles.searchSelect}>
+            <NCascader
+              placeholder="全部乐器"
+              v-model:value={forms.musicalInstrumentId}
+              options={[...catchStore.getSubjectList]}
+              checkStrategy="child"
+              showPath
+              childrenField="instruments"
+              expandTrigger="hover"
+              clearable
+              filterable
+              onUpdate:value={() => {
+                onSearch();
+              }}
+            />
+          </div>
           <NInput
             type="text"
             placeholder="请输入搜索关键词"

src/views/prepare-lessons/model/attend-class/index.tsx

@@ -1,245 +1,261 @@
-import { defineComponent, onMounted, reactive, ref, toRef } from 'vue';
-import styles from './index.module.less';
-import { NInput, NModal, NScrollbar, NSelect, NSpin, NThing } from 'naive-ui';
-import { useRouter } from 'vue-router';
-import { BOOK_DATA } from '/src/views/natural-resources/model/add-teaching';
-import { classGroupPage, courseScheduleStart } from '../../api';
-import { useThrottleFn } from '@vueuse/core';
-import TheEmpty from '/src/components/TheEmpty';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { state } from '/src/state';
-import { nextTick } from 'process';
-import UpdateSubject from '/src/views/classList/modals/updateSubject';
-const classList: any = [];
-for (let i = 1; i <= 40; i++) {
-  classList.push({ label: i + '班', value: i });
-}
-
-export default defineComponent({
-  name: 'attend-class',
-  props: {
-    // change 切换班级 select 直接进入上课
-    type: {
-      type: String,
-      default: 'change'
-    }
-  },
-  emits: ['close', 'preview', 'confirm'],
-  setup(props, { emit }) {
-    // const { type } = toRef(props);
-    const prepareStore = usePrepareStore();
-    const forms = reactive({
-      showSubjectClass: false,
-      activeRow: {} as any,
-      keyword: null,
-      currentGradeNum: null,
-      currentClass: null
-    });
-
-    const list = ref([] as any);
-    const loading = ref(false);
-    // 开始上课
-    const onAttendClass = async (item: any) => {
-      // console.log(item, 'onAttendClass');
-      try {
-        // 判断是否是切换班级
-        if (props.type == 'change') {
-          if (item.subjectId) {
-            emit('confirm', {
-              lastUseCoursewareId: item.lessonCoursewareId,
-              unit: item.lessonCoursewareKnowledgeDetailId,
-              subjectId: item.subjectId,
-              courseScheduleSubjectId: item.courseScheduleSubjectId,
-              name: item.name, // 班级名称
-              classGroupId: item.id, // 班级编号
-              preStudentNum: item.preStudentNum
-            });
-          } else {
-            forms.showSubjectClass = true;
-            forms.activeRow = item;
-          }
-          return;
-        }
-
-        const res = await courseScheduleStart({
-          lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
-          classGroupId: item.id,
-          subjectId: prepareStore.getSubjectId
-        });
-
-        emit('close');
-        emit('preview', {
-          type: 'class',
-          classId: res.data, // 上课编号
-          classGroupId: item.id,
-          subjectId: prepareStore.getSubjectId,
-          detailId: prepareStore.getSelectKey,
-          lessonCourseId: prepareStore.getBaseCourseware.id,
-          preStudentNum: item.preStudentNum
-        });
-        if (window.matchMedia('(display-mode: standalone)').matches) {
-          state.application = window.matchMedia(
-            '(display-mode: standalone)'
-          ).matches;
-          setTimeout(() => {
-            fscreen();
-          }, 200);
-        }
-      } catch {
-        //
-      }
-    };
-    const fscreen = () => {
-      const el: any = document.documentElement;
-      const documentDom: any = document;
-      const isFullscreen =
-        documentDom.fullScreen ||
-        documentDom.mozFullScreen ||
-        documentDom.webkitIsFullScreen;
-      if (!isFullscreen) {
-        //进入全屏
-        (el.requestFullscreen && el.requestFullscreen()) ||
-          (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
-          (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
-          (el.msRequestFullscreen && el.msRequestFullscreen());
-      } else {
-        //退出全屏
-        documentDom.exitFullscreen
-          ? documentDom.exitFullscreen()
-          : documentDom.mozCancelFullScreen
-          ? documentDom.mozCancelFullScreen()
-          : documentDom.webkitExitFullscreen
-          ? documentDom.webkitExitFullscreen()
-          : '';
-      }
-    };
-    const getList = async () => {
-      loading.value = true;
-      try {
-        const { data } = await classGroupPage({
-          page: 1,
-          rows: 99,
-          upgradeFlag: true,
-          ...forms
-        });
-        const result = data.rows || [];
-        const temp: any = [];
-        result.forEach((item: any) => {
-          // 判断班级里面有学生的
-          // if (item.preStudentNum > 0) {
-          temp.push(item);
-          // }
-        });
-        list.value = temp;
-      } catch {
-        //
-      }
-      loading.value = false;
-    };
-
-    const throttleFn = useThrottleFn(() => getList(), 500);
-
-    onMounted(() => {
-      getList();
-    });
-
-    return () => (
-      <div class={styles.attendClass}>
-        <div class={styles.attendClassSearch}>
-          <NInput
-            placeholder="请输入班级名称"
-            clearable
-            v-model:value={forms.keyword}
-            onKeyup={(e: KeyboardEvent) => {
-              if (e.code === 'Enter') {
-                throttleFn();
-              }
-            }}
-            onClear={() => throttleFn()}>
-            {{
-              prefix: () => (
-                <span
-                  class="icon-search-input"
-                  onClick={() => throttleFn()}></span>
-              )
-            }}
-          </NInput>
-          <NSelect
-            placeholder="全部年级"
-            clearable
-            options={
-              [{ label: '全部年级', value: null }, ...BOOK_DATA.grades] as any
-            }
-            v-model:value={forms.currentGradeNum}
-            onUpdate:value={() => throttleFn()}
-          />
-          <NSelect
-            placeholder="全部班级"
-            clearable
-            options={[{ label: '全部班级', value: null }, ...classList]}
-            v-model:value={forms.currentClass}
-            onUpdate:value={() => throttleFn()}
-          />
-        </div>
-        <NScrollbar class={styles.classList}>
-          <NSpin show={loading.value}>
-            <div
-              class={[
-                styles.listSection,
-                !loading.value && list.value.length <= 0
-                  ? styles.emptySection
-                  : ''
-              ]}>
-              {list.value.map((item: any) => (
-                <div onClick={() => onAttendClass(item)}>
-                  <NThing class={[styles.thingItem, 'isFull']}>
-                    {{
-                      header: () => (
-                        <>
-                          <div class={styles.title}>
-                            {item.name} {item.preStudentNum}人
-                          </div>
-                          <div
-                            class={[
-                              styles.subjects,
-                              item.subjectName ? '' : styles.noSubjects
-                            ]}>
-                            {item.subjectName ? item.subjectName : '暂无声部'}
-                          </div>
-                        </>
-                      ),
-                      default: () =>
-                        item.lastStudy && (
-                          <div class={styles.content}>{item.lastStudy}</div>
-                        )
-                    }}
-                  </NThing>
-                </div>
-              ))}
-              {!loading.value && list.value.length <= 0 && <TheEmpty />}
-            </div>
-          </NSpin>
-        </NScrollbar>
-
-        <NModal
-          v-model:show={forms.showSubjectClass}
-          style={{ width: '500px' }}
-          preset="card"
-          class={['modalTitle background']}
-          title={'修改声部'}>
-          {forms.showSubjectClass ? (
-            <UpdateSubject
-              activeRow={forms.activeRow}
-              onGetList={() => getList()}
-              onConfirm={(item: any) => {
-                //
-                emit('confirm', item);
-              }}
-              onClose={() => (forms.showSubjectClass = false)}
-            />
-          ) : null}
-        </NModal>
-      </div>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref, toRef } from 'vue';
+import styles from './index.module.less';
+import { NInput, NModal, NScrollbar, NSelect, NSpin, NThing } from 'naive-ui';
+import { useRouter } from 'vue-router';
+import { BOOK_DATA } from '/src/views/natural-resources/model/add-teaching';
+import { classGroupPage, courseScheduleStart } from '../../api';
+import { useThrottleFn } from '@vueuse/core';
+import TheEmpty from '/src/components/TheEmpty';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { state } from '/src/state';
+import { nextTick } from 'process';
+import UpdateSubject from '/src/views/classList/modals/updateSubject';
+import { api_getCurrentGradeYear } from '/src/views/studentList/api';
+const classList: any = [];
+for (let i = 1; i <= 40; i++) {
+  classList.push({ label: i + '班', value: i });
+}
+
+export default defineComponent({
+  name: 'attend-class',
+  props: {
+    // change 切换班级 select 直接进入上课
+    type: {
+      type: String,
+      default: 'change'
+    }
+  },
+  emits: ['close', 'preview', 'confirm'],
+  setup(props, { emit }) {
+    // const { type } = toRef(props);
+    const prepareStore = usePrepareStore();
+    const forms = reactive({
+      showSubjectClass: false,
+      activeRow: {} as any,
+      keyword: null,
+      currentGradeNum: null,
+      currentClass: null
+    });
+    const gradeYear = ref(null as any);
+
+    const list = ref([] as any);
+    const loading = ref(false);
+    // 开始上课
+    const onAttendClass = async (item: any) => {
+      // console.log(item, 'onAttendClass');
+      try {
+        // 判断是否是切换班级
+        if (props.type == 'change') {
+          if (item.instrumentId) {
+            emit('confirm', {
+              lastUseCoursewareId: item.lessonCoursewareId,
+              unit: item.lessonCoursewareKnowledgeDetailId,
+              instrumentId: item.instrumentId,
+              courseScheduleSubjectId: item.courseScheduleSubjectId,
+              name: item.name, // 班级名称
+              classGroupId: item.id, // 班级编号
+              preStudentNum: item.preStudentNum
+            });
+          } else {
+            forms.showSubjectClass = true;
+            forms.activeRow = item;
+          }
+          return;
+        }
+
+        const res = await courseScheduleStart({
+          lessonCoursewareKnowledgeDetailId: prepareStore.selectKey,
+          classGroupId: item.id,
+          instrumentId: prepareStore.getInstrumentId
+        });
+
+        emit('close');
+        emit('preview', {
+          type: 'class',
+          classId: res.data, // 上课编号
+          classGroupId: item.id,
+          instrumentId: prepareStore.getInstrumentId,
+          detailId: prepareStore.getSelectKey,
+          lessonCourseId: prepareStore.getBaseCourseware.id,
+          preStudentNum: item.preStudentNum
+        });
+        if (window.matchMedia('(display-mode: standalone)').matches) {
+          state.application = window.matchMedia(
+            '(display-mode: standalone)'
+          ).matches;
+          setTimeout(() => {
+            fscreen();
+          }, 200);
+        }
+      } catch {
+        //
+      }
+    };
+    const fscreen = () => {
+      const el: any = document.documentElement;
+      const documentDom: any = document;
+      const isFullscreen =
+        documentDom.fullScreen ||
+        documentDom.mozFullScreen ||
+        documentDom.webkitIsFullScreen;
+      if (!isFullscreen) {
+        //进入全屏
+        (el.requestFullscreen && el.requestFullscreen()) ||
+          (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
+          (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
+          (el.msRequestFullscreen && el.msRequestFullscreen());
+      } else {
+        //退出全屏
+        documentDom.exitFullscreen
+          ? documentDom.exitFullscreen()
+          : documentDom.mozCancelFullScreen
+          ? documentDom.mozCancelFullScreen()
+          : documentDom.webkitExitFullscreen
+          ? documentDom.webkitExitFullscreen()
+          : '';
+      }
+    };
+    const getList = async () => {
+      loading.value = true;
+      try {
+        const { data } = await classGroupPage({
+          page: 1,
+          rows: 99,
+          gradeYear: gradeYear.value,
+          upgradeFlag: true,
+          ...forms
+        });
+        const result = data.rows || [];
+        const temp: any = [];
+        result.forEach((item: any) => {
+          // 判断班级里面有学生的
+          // if (item.preStudentNum > 0) {
+          temp.push(item);
+          // }
+        });
+        list.value = temp;
+      } catch {
+        //
+      }
+      loading.value = false;
+    };
+
+    const throttleFn = useThrottleFn(() => getList(), 500);
+
+    const getCurrentGradeYears = async () => {
+      try {
+        const { data } = await api_getCurrentGradeYear({});
+        gradeYear.value = data;
+      } catch {
+        //
+      }
+    };
+
+    onMounted(async () => {
+      loading.value = true;
+      await getCurrentGradeYears();
+      getList();
+    });
+
+    return () => (
+      <div class={styles.attendClass}>
+        <div class={styles.attendClassSearch}>
+          <NInput
+            placeholder="请输入班级名称"
+            clearable
+            v-model:value={forms.keyword}
+            onKeyup={(e: KeyboardEvent) => {
+              if (e.code === 'Enter') {
+                throttleFn();
+              }
+            }}
+            onClear={() => throttleFn()}>
+            {{
+              prefix: () => (
+                <span
+                  class="icon-search-input"
+                  onClick={() => throttleFn()}></span>
+              )
+            }}
+          </NInput>
+          <NSelect
+            placeholder="全部年级"
+            clearable
+            options={
+              [{ label: '全部年级', value: null }, ...BOOK_DATA.grades] as any
+            }
+            v-model:value={forms.currentGradeNum}
+            onUpdate:value={() => throttleFn()}
+          />
+          <NSelect
+            placeholder="全部班级"
+            clearable
+            options={[{ label: '全部班级', value: null }, ...classList]}
+            v-model:value={forms.currentClass}
+            onUpdate:value={() => throttleFn()}
+          />
+        </div>
+        <NScrollbar class={styles.classList}>
+          <NSpin show={loading.value}>
+            <div
+              class={[
+                styles.listSection,
+                !loading.value && list.value.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}>
+              {list.value.map((item: any) => (
+                <div onClick={() => onAttendClass(item)}>
+                  <NThing class={[styles.thingItem, 'isFull']}>
+                    {{
+                      header: () => (
+                        <>
+                          <div class={styles.title}>
+                            {item.name} {item.preStudentNum}人
+                          </div>
+                          <div
+                            class={[
+                              styles.subjects,
+                              item.instrumentName ? '' : styles.noSubjects
+                            ]}>
+                            {item.instrumentName
+                              ? item.instrumentName
+                              : '暂无乐器'}
+                          </div>
+                        </>
+                      ),
+                      default: () =>
+                        item.lastStudy && (
+                          <div class={styles.content}>{item.lastStudy}</div>
+                        )
+                    }}
+                  </NThing>
+                </div>
+              ))}
+              {!loading.value && list.value.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
+        </NScrollbar>
+
+        <NModal
+          v-model:show={forms.showSubjectClass}
+          style={{ width: '500px' }}
+          preset="card"
+          class={['modalTitle background']}
+          title={'修改乐器'}>
+          {forms.showSubjectClass ? (
+            <UpdateSubject
+              activeRow={forms.activeRow}
+              onGetList={() => getList()}
+              onConfirm={(item: any) => {
+                //
+                emit('confirm', item);
+              }}
+              onClose={() => (forms.showSubjectClass = false)}
+            />
+          ) : null}
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/courseware-type/index.tsx

@@ -116,7 +116,7 @@ export default defineComponent({
                 class={styles.iconEditName}
                 onClick={() => emit('editName')}></i> */}
             </div>
-            <div class={styles.subjectName}>{props.item.subjectNames}</div>
+            <div class={styles.subjectName}>{props.item.instrumentNames}</div>
           </div>
 
           {props.operate && (

src/views/prepare-lessons/model/related-class/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, onMounted, onUnmounted, reactive, watch } from 'vue';
 import styles from './index.module.less';
-import { NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
+import { NCascader, NInput, NScrollbar, NSelect, NSpin } from 'naive-ui';
 import { useThrottleFn } from '@vueuse/core';
 import CoursewareType from '../courseware-type';
 import TheEmpty from '/src/components/TheEmpty';
@@ -14,11 +14,11 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
-    subjectList: {
+    instrumentList: {
       type: Array,
       default: () => []
     },
-    subjectId: {
+    instrumentId: {
       type: [String, Number],
       default: ''
     },
@@ -38,7 +38,7 @@ export default defineComponent({
       },
       tableList: [] as any,
       searchGroup: {
-        subjectId: props.subjectId ? Number(props.subjectId) : '',
+        instrumentId: props.instrumentId ? props.instrumentId : '',
         keyword: null
       }
     });
@@ -65,7 +65,7 @@ export default defineComponent({
             id: item.id,
             openFlag: item.openFlag,
             openFlagEnable: item.openFlagEnable,
-            subjectNames: item.subjectNames,
+            instrumentNames: item.instrumentNames,
             fromChapterLessonCoursewareId: item.fromChapterLessonCoursewareId,
             name: item.name,
             coverImg: firstItem?.bizInfo.coverImg,
@@ -115,17 +115,23 @@ export default defineComponent({
     return () => (
       <div class={styles.relatedClass}>
         <div class={styles.attendClassSearch}>
-          <NSelect
-            placeholder="全部声部"
+          <NCascader
+            placeholder="全部乐器"
             clearable
             options={[
-              { name: '全部声部', id: '' },
-              ...(props.subjectList as any)
+              { name: '全部乐器', id: '' },
+              ...(props.instrumentList as any)
             ]}
+            v-model:value={forms.searchGroup.instrumentId}
+            onUpdate:value={() => throttleFn()}
+            checkStrategy="child"
+            showPath
+            childrenField="instruments"
+            expandTrigger="hover"
             labelField="name"
             valueField="id"
-            v-model:value={forms.searchGroup.subjectId}
-            onUpdate:value={() => throttleFn()}
+            filterable
+            style={{ width: '200px' }}
           />
           <NInput
             placeholder="请输入课件标题关键词"

src/views/prepare-lessons/model/select-music/select-item/index.module.less

@@ -88,10 +88,10 @@
 
     .n-form-item {
       .n-button {
-        --n-padding: 0 14px !important;
+        --n-padding: 4Px 20px !important;
         height: 32px;
-        font-size: 17px;
-        border-radius: 8px;
+        font-size: max(17px, 12Px);
+        border-radius: 8Px;
         color: rgba(0, 0, 0, 0.6);
       }
 
@@ -135,6 +135,70 @@
   }
 }
 
+.popSelect {
+  font-size: 16px;
+  width: 200px;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+
+}
+
+.spaceSection2 {
+  width: 69%;
+  transition: 1s all ease-in;
+
+  &>div {
+    height: 34Px !important;
+    display: flex;
+    align-items: center;
+  }
+
+
+  .textBtn {
+    background: #fff;
+    border-radius: 8Px;
+    padding: 4Px 20px;
+    font-size: max(17px, 12Px);
+    color: rgba(0, 0, 0, 0.6);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    line-height: 24px;
+
+    .iconArrow {
+      display: inline-block;
+      margin-left: 8px;
+      width: 8px;
+      height: 5px;
+      background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain;
+      transform: rotate(180deg);
+
+    }
+
+    &:hover,
+    &.textBtnActive {
+      background: #D2ECFF;
+      font-weight: 500;
+      color: #131415;
+    }
+
+    &:hover {
+      .iconArrow {
+
+        transform: rotate(0deg);
+      }
+    }
+  }
+}
+
 .spaceSection {
   width: 69%;
   gap: 8px 12px !important;
@@ -169,6 +233,7 @@
   &.collapsSectionEmpty {
     opacity: 0;
     visibility: hidden;
+    display: none;
   }
 }
 

src/views/prepare-lessons/model/select-music/select-item/index.tsx

@@ -1,224 +1,228 @@
-import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
-import { defineComponent, onMounted, reactive, watch } from 'vue';
-import styles from './index.module.less';
-import CardType from '@/components/card-type';
-import SearchGroup from './search-group';
-import TheEmpty from '/src/components/TheEmpty';
-import { useDebounceFn, useThrottleFn, useResizeObserver } from '@vueuse/core';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { musicSheetPage } from '../../../api';
-import CardPreview from '/src/components/card-preview';
-import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
-
-const formatType = (type: string) => {
-  if (type === 'shareResources') {
-    return 2;
-  } else if (type === 'myResources') {
-    return 3;
-  } else if (type === 'myCollect') {
-    return 4;
-  }
-};
-
-export default defineComponent({
-  name: 'select-music',
-  props: {
-    type: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['add'],
-  setup(props, { emit }) {
-    const prepareStore = usePrepareStore();
-    const state = reactive({
-      searchHeight: '0px',
-      loading: false,
-      finshed: false, // 是否加载完
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        name: '',
-        type: 'MUSIC', //
-        musicSheetCategoriesId: '',
-        sourceType: formatType(props.type),
-        status: 1,
-        versionFlag: false,
-        subjectId: null
-      },
-      tableList: [] as any,
-      show: false,
-      item: {} as any,
-      isShowAddDisabled: !prepareStore.getIsEditTrain
-    });
-    const className = 'musicSearchGroup' + +new Date();
-    const getList = async () => {
-      try {
-        if (state.pagination.page === 1) {
-          state.loading = true;
-        }
-        // material/queryPage
-        // const { data } = await musicSheetPage({
-        //   ...state.searchGroup,
-        //   ...state.pagination,
-        //   subjectId: prepareStore.getSubjectId
-        // });
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination
-          // subjectId: prepareStore.getSubjectId
-        });
-        state.loading = false;
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          const index = prepareStore.getTrainList.findIndex(
-            (course: any) => course.musicId === row.id
-          );
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg || row.musicSvg,
-            type: 'MUSIC',
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            content: row.id,
-            xmlFileUrl: row.xmlFileUrl,
-            exist: index !== -1 ? true : false // 是否存在
-          });
-        });
-        state.tableList.push(...temp);
-
-        state.finshed = data.pages <= data.current ? true : false;
-      } catch {
-        state.loading = false;
-      }
-    };
-
-    watch(
-      () => prepareStore.trainList,
-      () => {
-        state.tableList.forEach((item: any) => {
-          const index = prepareStore.getTrainList.findIndex(
-            (course: any) => course.musicId === item.id
-          );
-          item.exist = index !== -1 ? true : false; // 是否存在
-        });
-      },
-      {
-        deep: true,
-        immediate: true
-      }
-    );
-
-    const throttledFnSearch = useDebounceFn(item => {
-      state.pagination.page = 1;
-      state.tableList = [];
-      state.searchGroup = Object.assign(state.searchGroup, item);
-      getList();
-    }, 500);
-
-    const throttledFn = useThrottleFn(() => {
-      state.pagination.page = state.pagination.page + 1;
-      getList();
-    }, 500);
-
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-      } catch {
-        //
-      }
-    };
-
-    onMounted(() => {
-      useResizeObserver(
-        document.querySelector('.' + className) as HTMLElement,
-        (entries: any) => {
-          const entry = entries[0];
-          const { height } = entry.contentRect;
-          state.searchHeight = height + 'px';
-        }
-      );
-      if (props.type === 'homework') {
-        state.isShowAddDisabled = false;
-      }
-      getList();
-    });
-    return () => (
-      <div class={styles.selectMusic}>
-        <div class={className}>
-          <SearchGroup
-            type={props.type}
-            onSearch={(item: any) => throttledFnSearch(item)}
-          />
-        </div>
-
-        <NScrollbar
-          class={styles.listContainer}
-          style={{
-            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
-          }}
-          onScroll={(e: any) => {
-            const clientHeight = e.target?.clientHeight;
-            const scrollTop = e.target?.scrollTop;
-            const scrollHeight = e.target?.scrollHeight;
-            // 是否到底，是否加载完
-            if (
-              clientHeight + scrollTop + 20 >= scrollHeight &&
-              !state.finshed &&
-              !state.loading
-            ) {
-              throttledFn();
-            }
-          }}>
-          <NSpin show={state.loading} size={'small'}>
-            <div
-              style={{
-                'min-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px)`
-              }}
-              class={[
-                styles.listSection,
-                !state.loading && state.tableList.length <= 0
-                  ? styles.emptySection
-                  : ''
-              ]}>
-              {state.tableList.length > 0 && (
-                <div class={styles.list}>
-                  {state.tableList.map((item: any) => (
-                    <CardType
-                      isShowAdd
-                      isShowCollect
-                      item={item}
-                      // isShowAddDisabled={state.isShowAddDisabled}
-                      onAdd={() => emit('add', item)}
-                      disabledMouseHover={false}
-                      onClick={() => {
-                        if (item.type === 'IMG') return;
-                        state.show = true;
-                        state.item = item;
-                      }}
-                      onCollect={(item: any) => onCollect(item)}
-                    />
-                  ))}
-                </div>
-              )}
-              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
-            </div>
-          </NSpin>
-        </NScrollbar>
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-      </div>
-    );
-  }
-});
+import { NScrollbar, NSpin, NTabPane, NTabs } from 'naive-ui';
+import { defineComponent, onMounted, reactive, watch } from 'vue';
+import styles from './index.module.less';
+import CardType from '@/components/card-type';
+import SearchGroup from './search-group';
+import TheEmpty from '/src/components/TheEmpty';
+import { useDebounceFn, useThrottleFn, useResizeObserver } from '@vueuse/core';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { musicSheetPage } from '../../../api';
+import CardPreview from '/src/components/card-preview';
+import { favorite, materialQueryPage } from '/src/views/natural-resources/api';
+
+const formatType = (type: string) => {
+  if (type === 'shareResources') {
+    return 2;
+  } else if (type === 'myResources') {
+    return 3;
+  } else if (type === 'myCollect') {
+    return 4;
+  }
+};
+
+export default defineComponent({
+  name: 'select-music',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    from: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['add'],
+  setup(props, { emit }) {
+    const prepareStore = usePrepareStore();
+    const state = reactive({
+      searchHeight: '0px',
+      loading: false,
+      finshed: false, // 是否加载完
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        name: '',
+        type: 'MUSIC', //
+        musicSheetCategoriesId: '',
+        musicalInstrumentId: '',
+        sourceType: formatType(props.type),
+        status: 1,
+        versionFlag: false,
+        subjectId: null
+      },
+      tableList: [] as any,
+      show: false,
+      item: {} as any,
+      isShowAddDisabled: !prepareStore.getIsEditTrain
+    });
+    const className = 'musicSearchGroup' + +new Date();
+    const getList = async () => {
+      try {
+        if (state.pagination.page === 1) {
+          state.loading = true;
+        }
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        if (data.current === 1 && state.tableList.length > 0) return;
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          const index = prepareStore.getTrainList.findIndex(
+            (course: any) => course.musicId === row.id
+          );
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg || row.musicSvg,
+            type: 'MUSIC',
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
+            content: row.id,
+            xmlFileUrl: row.xmlFileUrl,
+            exist: index !== -1 ? true : false // 是否存在
+          });
+        });
+        state.tableList.push(...temp);
+
+        state.finshed = data.pages <= data.current ? true : false;
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    watch(
+      () => prepareStore.trainList,
+      () => {
+        state.tableList.forEach((item: any) => {
+          const index = prepareStore.getTrainList.findIndex(
+            (course: any) => course.musicId === item.id
+          );
+          item.exist = index !== -1 ? true : false; // 是否存在
+        });
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+
+    const throttledFnSearch = useDebounceFn(item => {
+      state.pagination.page = 1;
+      state.tableList = [];
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      getList();
+    }, 500);
+
+    const throttledFn = useThrottleFn(() => {
+      state.pagination.page = state.pagination.page + 1;
+      getList();
+    }, 500);
+
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      useResizeObserver(
+        document.querySelector('.' + className) as HTMLElement,
+        (entries: any) => {
+          const entry = entries[0];
+          const { height } = entry.contentRect;
+          state.searchHeight = height + 'px';
+        }
+      );
+      if (props.type === 'homework') {
+        state.isShowAddDisabled = false;
+      }
+      getList();
+    });
+    return () => (
+      <div class={styles.selectMusic}>
+        <div class={className}>
+          <SearchGroup
+            type={props.type}
+            onSearch={(item: any) => throttledFnSearch(item)}
+          />
+        </div>
+
+        <NScrollbar
+          class={styles.listContainer}
+          style={{
+            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
+          }}
+          onScroll={(e: any) => {
+            const clientHeight = e.target?.clientHeight;
+            const scrollTop = e.target?.scrollTop;
+            const scrollHeight = e.target?.scrollHeight;
+            // 是否到底，是否加载完
+            if (
+              clientHeight + scrollTop + 20 >= scrollHeight &&
+              !state.finshed &&
+              !state.loading
+            ) {
+              throttledFn();
+            }
+          }}>
+          <NSpin show={state.loading} size={'small'}>
+            <div
+              style={{
+                'min-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px)`
+              }}
+              class={[
+                styles.listSection,
+                !state.loading && state.tableList.length <= 0
+                  ? styles.emptySection
+                  : ''
+              ]}>
+              {state.tableList.length > 0 && (
+                <div class={styles.list}>
+                  {state.tableList.map((item: any) => (
+                    <CardType
+                      isShowAdd
+                      isShowCollect
+                      item={item}
+                      // isShowAddDisabled={state.isShowAddDisabled}
+                      onAdd={() => emit('add', item)}
+                      disabledMouseHover={false}
+                      onClick={() => {
+                        if (item.type === 'IMG') return;
+                        state.show = true;
+                        state.item = item;
+                      }}
+                      onCollect={(item: any) => onCollect(item)}
+                    />
+                  ))}
+                </div>
+              )}
+              {!state.loading && state.tableList.length <= 0 && <TheEmpty />}
+            </div>
+          </NSpin>
+        </NScrollbar>
+
+        {/* 弹窗查看 */}
+        <CardPreview
+          from={props.from}
+          v-model:show={state.show}
+          item={state.item}
+        />
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/model/select-music/select-item/search-group.tsx

@@ -1,6 +1,13 @@
 import { defineComponent, reactive, onMounted, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NForm, NFormItem, NImage, NSpace } from 'naive-ui';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NImage,
+  NPopselect,
+  NSpace
+} from 'naive-ui';
 import TheSearch from '/src/components/TheSearch';
 import { useCatchStore } from '/src/store/modules/catchData';
 import { useThrottleFn } from '@vueuse/core';
@@ -19,7 +26,12 @@ export default defineComponent({
     const catchStore = useCatchStore();
     const forms = reactive({
       name: '',
-      musicSheetCategoriesId: null
+      musicSheetCategoriesId: null,
+      musicalInstrumentId: null
+    });
+
+    const state = reactive({
+      tempSubjectId: null
     });
 
     const onSearch = () => {
@@ -77,6 +89,17 @@ export default defineComponent({
       }
     };
 
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.musicalInstrumentId) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
     onMounted(async () => {
       // 获取教材分类列表
       await catchStore.getMusicSheetCategory();
@@ -148,6 +171,52 @@ export default defineComponent({
               </div>
             </NFormItem>
           </div>
+
+          <NFormItem label="乐器：">
+            <NSpace class={styles.spaceSection2}>
+              {catchStore.getSubjectInstruments.map((subject: any) =>
+                subject.instruments && subject.instruments.length > 1 ? (
+                  <NPopselect
+                    options={subject.instruments}
+                    trigger="hover"
+                    scrollable
+                    v-model:value={state.tempSubjectId}
+                    onUpdate:value={() => {
+                      forms.musicalInstrumentId = state.tempSubjectId;
+                      onSearch();
+                    }}
+                    key={subject.value}
+                    class={[styles.popSelect]}>
+                    <span
+                      class={[
+                        styles.textBtn,
+                        selectChildObj(subject.instruments).selected &&
+                          styles.textBtnActive
+                      ]}>
+                      {selectChildObj(subject.instruments).name || subject.name}
+                      <i class={styles.iconArrow}></i>
+                    </span>
+                  </NPopselect>
+                ) : (
+                  <span
+                    class={[
+                      styles.textBtn,
+
+                      forms.musicalInstrumentId === subject.value &&
+                        styles.textBtnActive
+                    ]}
+                    onClick={() => {
+                      forms.musicalInstrumentId = subject.value;
+
+                      state.tempSubjectId = null;
+                      onSearch();
+                    }}>
+                    {subject.name}
+                  </span>
+                )
+              )}
+            </NSpace>
+          </NFormItem>
           {/* <NFormItem label="教材：">
             <NSpace class={styles.spaceSection}>
               {catchStore.getAllMusicCategories.map((music: any) => (

src/views/prepare-lessons/model/select-resources/select-item/class-search-group/index.tsx

@@ -243,13 +243,14 @@ export default defineComponent({
             </div>
           )} */}
 
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={[styles.spaceSection, styles.spaceSection2]}>
               {catchStore.getSubjectInstruments.map((subject: any) =>
                 subject.instruments && subject.instruments.length > 1 ? (
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={forms.subjectId}
                     onUpdate:value={() => {
                       onSearch();

src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -1,4 +1,12 @@
-import { PropType, defineComponent, onMounted, reactive, toRefs } from 'vue';
+import {
+  PropType,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  toRefs,
+  watch
+} from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NScrollbar, NSpin, useMessage } from 'naive-ui';
 import styles from './index.module.less';
@@ -79,7 +87,8 @@ export default defineComponent({
           lessonCoursewareKnowledgeId:
             props.type === 'relateResources' || props.type === 'shareResources'
               ? prepareStore.getSelectKey
-              : null
+              : null,
+          relateLessonCoursewareKnowledgeMaterialIds: getIds()
         });
         state.loading = false;
         const tempRows = data.rows || [];
@@ -92,6 +101,7 @@ export default defineComponent({
             title: row.name,
             isCollect: !!row.favoriteFlag,
             isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
             content: row.content
           });
         });
@@ -106,19 +116,12 @@ export default defineComponent({
     const throttledFnSearch = useDebounceFn(item => {
       state.pagination.page = 1;
       state.tableList = [];
-      if (item.type === 'MUSIC') {
-        const { subjectId, ...res } = item;
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...res,
-          musicalInstrumentId: subjectId,
-          subjectId: null
-        });
-      } else {
-        state.searchGroup = Object.assign(state.searchGroup, {
-          ...item,
-          musicalInstrumentId: null
-        });
-      }
+      const { subjectId, ...res } = item;
+      state.searchGroup = Object.assign(state.searchGroup, {
+        ...res,
+        musicalInstrumentId: subjectId,
+        subjectId: null
+      });
       getList();
     }, 500);
 
@@ -130,6 +133,7 @@ export default defineComponent({
           coverImg: item.coverImg,
           type: item.type,
           title: item.title,
+          refFlag: item.refFlag,
           isCollect: item.isCollect,
           isSelected: item.isSelected,
           content: item.content,
@@ -154,12 +158,31 @@ export default defineComponent({
       }
     };
 
+    const getIds = () => {
+      let noRepeatIds: any = [];
+      if (props.type === 'relateResources') {
+        const materialIds: any = [];
+        prepareStore.getCoursewareList.forEach((course: any) => {
+          course.list?.forEach((item: any) => {
+            materialIds.push(item.materialId);
+          });
+        });
+        noRepeatIds = Array(...new Set(materialIds));
+      }
+      return noRepeatIds.join(',');
+    };
+
+    const onUpdate = () => {
+      state.pagination.page = 1;
+      state.tableList = [];
+      getList();
+    };
+
     onMounted(async () => {
+      // 加载的时候判断是否有资源数据
       // 获取声部
       await catchStore.getSubjects();
 
-      getList();
-
       useResizeObserver(
         document.querySelector('.' + className) as HTMLElement,
         (entries: any) => {
@@ -168,7 +191,40 @@ export default defineComponent({
           state.searchHeight = height + 'px';
         }
       );
+      getList();
+
+      eventGlobal.on('onCoursewareUpdate', onUpdate);
+    });
+    onUnmounted(() => {
+      eventGlobal.off('onCoursewareUpdate', onUpdate);
     });
+
+    // onMounted(async () => {
+    //   // 获取声部
+    //   await catchStore.getSubjects();
+
+    //   // 加载的时候判断是否有资源数据
+    //   let noRepeatIds: any = [];
+    //   if (props.type === 'relateResources') {
+    //     const materialIds: any = [];
+    //     prepareStore.getCoursewareList.forEach((course: any) => {
+    //       course.list?.forEach((item: any) => {
+    //         materialIds.push(item.materialId);
+    //       });
+    //     });
+    //     noRepeatIds = Array(...new Set(materialIds));
+    //   }
+    //   getList(noRepeatIds.join(','));
+
+    //   useResizeObserver(
+    //     document.querySelector('.' + className) as HTMLElement,
+    //     (entries: any) => {
+    //       const entry = entries[0];
+    //       const { height } = entry.contentRect;
+    //       state.searchHeight = height + 'px';
+    //     }
+    //   );
+    // });
     return () => (
       <div>
         <div class={className}>
@@ -187,9 +243,9 @@ export default defineComponent({
           )}
         </div>
         <NScrollbar
-          class={styles.listContainer}
+          class={[styles.listContainer, 'list_container']}
           style={{
-            'max-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px) `
+            'max-height': `calc(var(--listContainerHeight) - var(--modal-lesson-tab-height) - ${state.searchHeight}) `
           }}
           onScroll={(e: any) => {
             const clientHeight = e.target?.clientHeight;
@@ -208,7 +264,7 @@ export default defineComponent({
           <NSpin show={state.loading} size={'small'}>
             <div
               style={{
-                'min-height': `calc(85vh - var(--modal-lesson-tab-height) - ${state.searchHeight} - 12px)`
+                'min-height': `calc(var(--listContainerHeight) - var(--modal-lesson-tab-height) - ${state.searchHeight})`
               }}
               class={[
                 styles.listSection,
@@ -219,7 +275,7 @@ export default defineComponent({
               {state.tableList.length > 0 && (
                 <div class={styles.list}>
                   {state.tableList.map((item: any) => (
-                    <div class={styles.itemWrap}>
+                    <div class={[styles.itemWrap, 'selresources_item_Wrap']}>
                       <div class={styles.itemWrapBox}>
                         <CardType
                           isShowAdd={props.from === 'class' ? false : true}
@@ -250,6 +306,7 @@ export default defineComponent({
         <CardPreview
           size={props.from === 'class' ? 'large' : 'default'}
           v-model:show={state.show}
+          from={props.from}
           item={state.item}
         />
       </div>

src/views/prepare-lessons/model/select-resources/select-item/resource-search-group/index.tsx

@@ -262,7 +262,7 @@ export default defineComponent({
             </div>
           )}
 
-          <NFormItem label="声部：">
+          <NFormItem label="乐器：">
             <NSpace class={styles.spaceSection2}>
               {/* {catchStore.getSubjectAllList.map((music: any) => (
                 <NButton
@@ -279,17 +279,14 @@ export default defineComponent({
                 </NButton>
               ))} */}
               {catchStore.getSubjectInstruments.map((subject: any) =>
-                subject.instruments &&
-                subject.instruments.length > 1 &&
-                forms.type === 'MUSIC' ? (
+                subject.instruments && subject.instruments.length > 1 ? (
                   <NPopselect
                     options={subject.instruments}
                     trigger="hover"
+                    scrollable
                     v-model:value={state.tempSubjectId}
                     onUpdate:value={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = state.tempSubjectId;
-                      }
+                      forms.subjectId = state.tempSubjectId;
                       onSearch();
                     }}
                     key={subject.value}
@@ -308,17 +305,11 @@ export default defineComponent({
                   <span
                     class={[
                       styles.textBtn,
-                      (forms.type === 'MUSIC'
-                        ? forms.subjectId === subject.value
-                        : forms.subjectId === subject.id) &&
-                        styles.textBtnActive
+
+                      forms.subjectId === subject.value && styles.textBtnActive
                     ]}
                     onClick={() => {
-                      if (forms.type === 'MUSIC') {
-                        forms.subjectId = subject.value;
-                      } else {
-                        forms.subjectId = subject.id;
-                      }
+                      forms.subjectId = subject.value;
                       state.tempSubjectId = null;
                       onSearch();
                     }}>

src/views/prepare-lessons/model/subject-sync/index.module.less

@@ -22,13 +22,53 @@
       color: #F20606;
     }
   }
+
+  padding-top: 6px;
+
+  :global {
+    .n-tabs-tab-pad {
+      width: 64px !important;
+    }
+
+    .n-tabs-nav {
+      padding: 12px 36px 20px;
+    }
+
+    .n-tabs-tab {
+      color: #8B8D98;
+      font-size: max(20px, 14Px);
+      padding-top: 12px;
+      padding-bottom: 8px;
+      line-height: 28px;
+
+      &.n-tabs-tab--active {
+        font-weight: 600 !important;
+        color: #131415 !important;
+      }
+    }
+
+    .n-tabs-tab__label {
+      z-index: 10;
+    }
+
+    .n-tabs-bar {
+      height: 10px;
+      background: linear-gradient(90deg, #77BBFF 0%, rgba(163, 231, 255, 0.22) 100%);
+      z-index: 0;
+      bottom: 8px;
+    }
+
+    .n-tab-pane {
+      padding-top: 4px !important;
+    }
+  }
 }
 
 .subjectList {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  padding: 40px 30px 0;
+  padding: 0 30px 0;
   gap: 20px 40px;
 }
 
@@ -40,6 +80,13 @@
     border-radius: 24px;
     line-height: 0;
     overflow: hidden;
+
+    &::before {
+      content: '';
+      background: url('@/images/subject-bg.png') no-repeat center;
+      position: absolute;
+      inset: 0;
+    }
   }
 
   img {
@@ -48,6 +95,7 @@
     width: 127px;
     height: 127px;
     object-fit: contain;
+    position: relative;
   }
 
   .iconSelect {

src/views/prepare-lessons/model/subject-sync/index.tsx

@@ -1,6 +1,13 @@
 import { defineComponent, onMounted, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NScrollbar, NSpace, useMessage } from 'naive-ui';
+import {
+  NButton,
+  NScrollbar,
+  NSpace,
+  NTabPane,
+  NTabs,
+  useMessage
+} from 'naive-ui';
 import { useCatchStore } from '/src/store/modules/catchData';
 import iconSelect from '../../images/icon-select.png';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
@@ -18,13 +25,16 @@ export default defineComponent({
   setup(props, { emit }) {
     const catchStore = useCatchStore();
     const prepareStore = usePrepareStore();
+    const tabId = ref('' as any);
     const message = useMessage();
     const selectSubjectIds = ref([] as any);
     const subjectList = ref([] as any);
 
     const subjectImgs = {
       Panpipes: 'https://oss.dayaedu.com/ktqy/17103860536976fd4a751.png',
-      Ocarina: 'https://oss.dayaedu.com/ktqy/171038605369851874b22.png',
+      // Ocarina: 'https://oss.dayaedu.com/ktqy/171038605369851874b22.png',
+      Ocarina: 'https://oss.dayaedu.com/ktqy/17143623857205dba41a5.png',
+      Whistling: 'https://oss.dayaedu.com/ktqy/1714362351692fcf8c0b8.png',
       Woodwind: 'https://oss.dayaedu.com/ktqy/17103860536966826c50d.png',
       'Tenor Recorder':
         'https://oss.dayaedu.com/ktqy/17103860536950592e357.png',
@@ -64,6 +74,7 @@ export default defineComponent({
         const item = subjectList.value.find(
           (subject: any) => subject.id === id
         );
+        console.log(item, 'item');
         if (item) {
           subjectCode.push({
             materialId: item.id,
@@ -78,10 +89,31 @@ export default defineComponent({
       });
       emit('confirm', { subjectIds: selectSubjectIds.value, subjectCode });
     };
+
+    const formatSubjectList = () => {
+      const subjects = catchStore.getEnableSubjects;
+      const temp: any = [];
+      subjects.forEach((subject: any) => {
+        if (tabId.value === '' && subject.instruments) {
+          temp.push(...subject.instruments);
+        } else if (
+          tabId.value &&
+          subject.instruments &&
+          Number(tabId.value) === subject.id
+        ) {
+          temp.push(...subject.instruments);
+        }
+      });
+
+      subjectList.value = temp;
+    };
     onMounted(async () => {
       // 获取教材分类列表
-      await catchStore.getMusicInstrument();
-      subjectList.value = catchStore.getMusicInstruments;
+      // await catchStore.getMusicInstrument();
+      // subjectList.value = catchStore.getMusicInstruments;
+      await catchStore.getSubjects();
+
+      formatSubjectList();
       // const teachingSubjectList = prepareStore.getSubjectList; // 教材自带声部；
       // const tempSubjectList: any = [];
       // baseAllSubjectList.forEach((subject: any) => {
@@ -105,7 +137,26 @@ export default defineComponent({
           <span>（勾选后则对应乐器下的课件内容将被当前课件内容全部替换）</span>
         </div> */}
 
-        <NScrollbar style={{ maxHeight: '60vh' }}>
+        <NTabs
+          defaultValue=""
+          paneClass={styles.paneTitle}
+          justifyContent="start"
+          paneWrapperClass={styles.paneWrapperContainer}
+          value={tabId.value}
+          onUpdate:value={(val: any) => {
+            tabId.value = val;
+            formatSubjectList();
+          }}>
+          {[{ name: '全部声部', id: '' }, ...catchStore.getEnableSubjects].map(
+            (item: any) => (
+              <NTabPane
+                name={`${item.id}`}
+                tab={item.name}
+                displayDirective="if"></NTabPane>
+            )
+          )}
+        </NTabs>
+        <NScrollbar style={{ maxHeight: '50vh', minHeight: '50vh' }}>
           <div class={styles.subjectList}>
             {subjectList.value.map((subject: any) => (
               <div

src/views/preview-window/index.tsx

@@ -79,7 +79,7 @@ export default defineComponent({
               type.value == 'attend' ? (
                 <AttendClass
                   type={params.value.type || ''}
-                  subjectId={params.value.subjectId || ''}
+                  instrumentId={params.value.instrumentId || ''}
                   courseId={params.value.courseId || ''}
                   detailId={params.value.detailId || ''}
                   classGroupId={params.value.classGroupId || ''}

src/views/studentList/components/baseInfo.tsx

@@ -12,18 +12,16 @@ import {
   NSpace,
   SelectOption,
   useMessage,
-  NModal,
-  NCalendar,
-  NCascader
+  NModal
 } from 'naive-ui';
-import headerD from '../images/headerD.png';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import maleIcon from '../images/maleIcon.png';
-import femaleIcon from '../images/femaleIcon.png';
-import { useUserStore } from '/src/store/modules/users';
-import { api_teacherUpdate } from '/src/api/user';
+// import headerD from '../images/headerD.png';
+// import defultHeade from '@/components/layout/images/teacherIcon.png';
+// import maleIcon from '../images/maleIcon.png';
+// import femaleIcon from '../images/femaleIcon.png';
+// import { useUserStore } from '/src/store/modules/users';
+// import { api_teacherUpdate } from '/src/api/user';
 import { api_getCurrentGradeYear, resetStudentInfo } from '../api';
-import UploadFile from '/src/components/upload-file';
+// import UploadFile from '/src/components/upload-file';
 import { getgradeNumList, classArray } from '@/views/classList/contants';
 import { useRoute } from 'vue-router';
 export default defineComponent({

src/views/studentList/studentDetail.tsx

@@ -35,6 +35,7 @@ export default defineComponent({
         nickname: '',
         gender: null,
         subjectNames: '',
+        classInstrumentName: '',
         classGroupName: ''
       }
     });
@@ -104,8 +105,8 @@ export default defineComponent({
               </h4>
               <p>
                 {state.studentInfo.classGroupName}{' '}
-                {state.studentInfo.subjectNames
-                  ? '| ' + state.studentInfo.subjectNames
+                {state.studentInfo.classInstrumentName
+                  ? '| ' + state.studentInfo.classInstrumentName
                   : ' '}
               </p>
             </div>

src/views/xiaoku-ai/index.module.less

@@ -1,201 +1,250 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  background: #FFFFFF;
-  border-radius: 20px;
-  min-height: 100%;
-}
-
-.tools {
-  padding: 32px 32px 20px 32px;
-  display: flex;
-  align-items: flex-start;
-  flex-shrink: 0;
-
-  :global {
-    .n-input {
-      margin-left: auto;
-      width: 360px;
-    }
-
-    .n-input__input-el {
-      height: 100%;
-      line-height: 100%;
-    }
-
-    .n-button.n-button--disabled {
-      cursor: initial;
-      padding: 0;
-    }
-  }
-
-  .tagWrap {
-    flex: 1;
-    margin-right: 20px;
-  }
-
-  .tags {
-
-    .firstButton {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      font-size: max(18px, 13Px);
-      color: #999999;
-      line-height: 25px;
-    }
-
-    padding: 12px 0;
-
-    :global {
-      .n-button {
-        min-width: 102px;
-        height: 37px;
-        padding: 0 24px;
-        font-size: max(18px, 13Px);
-      }
-    }
-  }
-}
-
-.content {
-  flex: 1;
-  // padding: 20px 36px 36px 36px;
-  padding: 0 6px 36px;
-
-  &.loadingContent {
-    min-height: 50vh;
-  }
-
-  gap: 50px 0;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  margin-left: -12px;
-  margin-right: -12px;
-
-  .itemWrap {
-    width: calc(100% / 6);
-    padding-bottom: calc(100% / 6 * 0.909923);
-    position: relative;
-
-    .itemWrapBox {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      padding: 0 12px;
-    }
-  }
-}
-
-// 214px
-// 223px  + 38
-
-.item {
-  margin: 0 auto;
-  position: relative;
-  width: 214px;
-  cursor: pointer;
-  transition: all .3s;
-
-  .cover {
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 107px;
-      left: 0;
-      width: 214px;
-      height: 214px;
-      background: #DDF2FF;
-      border-radius: 50%;
-    }
-  }
-
-  &:hover {
-    transform: scale(1.1);
-  }
-
-  .itemImg {
-    position: relative;
-    width: 158px;
-    height: 223px;
-    margin: auto;
-    background-color: #EDEFF2;
-    background-image: url('./icon_default.svg');
-    background-repeat: no-repeat;
-    background-position: center center;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 4px;
-      right: -4px;
-      width: 4px;
-      height: calc(100% - 8px);
-      background-color: #C5C5C5;
-      z-index: 1;
-
-
-    }
-
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 2px;
-      right: -2px;
-      width: 4px;
-      height: calc(100% - 4px);
-      background-color: #E7E7E7;
-      z-index: 2;
-    }
-
-    .itemBg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 4;
-      background-repeat: no-repeat;
-      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
-      background-size: 50% 100%, 50% 100%;
-      background-position: 0% top, 9% top;
-    }
-
-    :global {
-      .n-image {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        z-index: 3;
-      }
-    }
-
-    img {
-      transition: opacity .3s;
-      opacity: 0;
-    }
-
-    img[data-loaded="true"] {
-      opacity: 1;
-    }
-
-
-  }
-
-  .itemName {
-    margin-top: 16px;
-    font-size: max(16px, 12Px);
-    line-height: 22px;
-    font-weight: 500;
-    color: #333;
-    text-align: center;
-  }
+.container {
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  border-radius: 20px;
+  min-height: 100%;
+}
+
+.tools {
+  padding: 32px 32px 20px 32px;
+  display: flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+
+  :global {
+    .n-input {
+      margin-left: auto;
+      width: 360px;
+    }
+
+    .n-input__input-el {
+      height: 100%;
+      line-height: 100%;
+    }
+
+    .n-button.n-button--disabled {
+      cursor: initial;
+      padding: 0;
+    }
+  }
+
+  .tagWrap {
+    flex: 1;
+    margin-right: 20px;
+  }
+
+  .tags {
+
+    .firstButton {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-size: max(18px, 13Px);
+      color: #999999;
+      line-height: 25px;
+    }
+
+    padding: 12px 0;
+
+    :global {
+      .n-button {
+        min-width: 102px;
+        height: 37px;
+        padding: 0 24px;
+        font-size: max(18px, 13Px);
+      }
+
+      .n-button--primary-type {
+        font-weight: 500 !important;
+      }
+    }
+  }
+}
+
+.content {
+  flex: 1;
+  // padding: 20px 36px 36px 36px;
+  padding: 0 6px 36px;
+
+  &.loadingContent {
+    min-height: 50vh;
+  }
+
+  gap: 50px 0;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  .itemWrap {
+    width: calc(100% / 6);
+    padding-bottom: calc(100% / 6 * 0.909923);
+    position: relative;
+
+    .itemWrapBox {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0 12px;
+    }
+  }
+}
+
+// 214px
+// 223px  + 38
+
+.item {
+  margin: 0 auto;
+  position: relative;
+  width: 214px;
+  cursor: pointer;
+  transition: all .3s;
+
+  .cover {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 107px;
+      left: 0;
+      width: 214px;
+      height: 214px;
+      background: #DDF2FF;
+      border-radius: 50%;
+    }
+  }
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  .itemImg {
+    position: relative;
+    width: 158px;
+    height: 223px;
+    margin: auto;
+    background-color: #EDEFF2;
+    background-image: url('./icon_default.svg');
+    background-repeat: no-repeat;
+    background-position: center center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 4px;
+      right: -4px;
+      width: 4px;
+      height: calc(100% - 8px);
+      background-color: #C5C5C5;
+      z-index: 1;
+
+
+    }
+
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      right: -2px;
+      width: 4px;
+      height: calc(100% - 4px);
+      background-color: #E7E7E7;
+      z-index: 2;
+    }
+
+    .itemBg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 4;
+      background-repeat: no-repeat;
+      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
+      background-size: 50% 100%, 50% 100%;
+      background-position: 0% top, 9% top;
+    }
+
+    :global {
+      .n-image {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        z-index: 3;
+      }
+    }
+
+    img {
+      transition: opacity .3s;
+      opacity: 0;
+    }
+
+    img[data-loaded="true"] {
+      opacity: 1;
+    }
+
+
+  }
+
+  .itemName {
+    margin-top: 16px;
+    font-size: max(16px, 12Px);
+    line-height: 22px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+  }
+}
+
+.popSelect1 {
+  font-size: 16px;
+  width: 240px;
+  // max-height: 500px;
+  // overflow-y: scroll;
+  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+
+  :global {
+    .n-base-select-option__content {
+      width: 80% !important;
+    }
+  }
+}
+
+.textBtn {
+  .iconArrow {
+    display: inline-block;
+    margin-left: 8px;
+    margin-top: 2px;
+    width: 8px;
+    height: 5px;
+    background: url('../xiaoku-music/images/icon-arrow.svg') no-repeat center center / contain;
+    transform: rotate(180deg);
+    color: #131415;
+    fill: #131415;
+  }
+
+  &:hover,
+  &.textBtnActive {
+    background: #198CFE !important;
+    font-weight: 500 !important;
+    color: #fff !important;
+
+    .iconArrow {
+      transform: rotate(0deg);
+      background: url('../xiaoku-music/images/icon-arrow2.svg') no-repeat center center / contain;
+      color: #fff;
+      fill: #fff;
+      margin-top: 0;
+    }
+  }
 }

src/views/xiaoku-ai/index.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, onMounted, reactive } from 'vue';
 import styles from './index.module.less';
 import TheSearch from '@/components/TheSearch';
-import { NButton, NImage, NSpace, NSpin } from 'naive-ui';
+import { NButton, NImage, NPopselect, NSpace, NSpin } from 'naive-ui';
 import { useRouter } from 'vue-router';
 import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
 import TheEmpty from '/src/components/TheEmpty';
@@ -18,7 +18,7 @@ export default defineComponent({
     const forms = reactive({
       musicTagIds: xiaokuAi.musicTagIds ? xiaokuAi.musicTagIds : ([] as any[]),
       enable: true,
-      subjectId: xiaokuAi.subjectId || null,
+      instrumentId: xiaokuAi.instrumentId || null,
       keyword: '',
       page: 1,
       rows: 9999
@@ -28,6 +28,7 @@ export default defineComponent({
       tagChildren: [] as any[],
       tagActiveId: xiaokuAi.tagActiveId || '',
       tagActive: {} as any,
+      tagIndex: xiaokuAi.instrumentId || 0,
       list: [] as any,
       loading: false
     });
@@ -103,10 +104,31 @@ export default defineComponent({
           'xiaoku-ai-search',
           JSON.stringify({
             tagActiveId: data.tagActiveId,
-            subjectId: forms.subjectId,
+            instrumentId: forms.instrumentId,
             musicTagIds: forms.musicTagIds
           })
         );
+        console.log(forms.instrumentId, 'forms.instrumentId');
+        if (forms.instrumentId) {
+          let childInstruments: any[] = [];
+          catchStore.getSubjectInstruments.forEach((item: any) => {
+            if (Array.isArray(item.instruments)) {
+              item.instruments.forEach((child: any) => {
+                if (forms.instrumentId === child.value) {
+                  childInstruments = item.instruments || [];
+                }
+              });
+            }
+          });
+
+          console.log(childInstruments, 'childInstruments');
+          if (childInstruments.length > 0) {
+            selectChildObj(childInstruments);
+          }
+          //  else {
+          //   forms.instrumentId = '';
+          // }
+        }
       } catch {
         //
       }
@@ -122,7 +144,7 @@ export default defineComponent({
         'xiaoku-ai-search',
         JSON.stringify({
           tagActiveId: item.id,
-          subjectId: forms.subjectId,
+          instrumentId: forms.instrumentId,
           musicTagIds: forms.musicTagIds
         })
       );
@@ -159,12 +181,23 @@ export default defineComponent({
         'xiaoku-ai-search',
         JSON.stringify({
           tagActiveId: data.tagActiveId,
-          subjectId: forms.subjectId,
+          instrumentId: forms.instrumentId,
           musicTagIds: forms.musicTagIds
         })
       );
       getList();
     };
+    const selectChildObj = (item: any) => {
+      const obj: any = {};
+
+      item?.forEach((child: any) => {
+        if (child.id === data.tagIndex) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
     return () => (
       <div class={styles.container}>
         <div class={styles.tools}>
@@ -224,35 +257,115 @@ export default defineComponent({
             })}
             <div class={styles.tags}>
               <NSpace size={[20, 12]}>
-                <span class={styles.firstButton}>声部</span>
+                <span class={styles.firstButton}>乐器</span>
 
-                {catchStore.getSubjectAllList.map((item: any) => {
-                  return (
-                    <>
+                {catchStore.getSubjectInstruments.map((item: any) =>
+                  item.instruments && item.instruments.length > 1 ? (
+                    <NPopselect
+                      options={item.instruments}
+                      trigger="hover"
+                      v-model:value={data.tagIndex}
+                      scrollable
+                      onUpdate:value={() => {
+                        forms.instrumentId = data.tagIndex;
+                        localStorage.setItem(
+                          'xiaoku-ai-search',
+                          JSON.stringify({
+                            tagActiveId: data.tagActiveId,
+                            instrumentId: data.tagIndex,
+                            musicTagIds: forms.musicTagIds
+                          })
+                        );
+                        getList();
+                      }}
+                      key={item.value}
+                      class={[styles.popSelect1]}>
                       <NButton
                         round
-                        secondary={item.id === forms.subjectId ? false : true}
+                        textColor={
+                          selectChildObj(item.instruments).selected
+                            ? '#fff'
+                            : '#000'
+                        }
+                        color={
+                          selectChildObj(item.instruments).selected
+                            ? '#198CFE'
+                            : 'rgba(46, 51, 56, .05)'
+                        }
                         type={
-                          item.id === forms.subjectId ? 'primary' : 'default'
+                          selectChildObj(item.instruments).selected
+                            ? 'primary'
+                            : 'default'
                         }
-                        onClick={() => {
-                          forms.subjectId = item.id;
-
-                          localStorage.setItem(
-                            'xiaoku-ai-search',
-                            JSON.stringify({
-                              tagActiveId: data.tagActiveId,
-                              subjectId: item.id,
-                              musicTagIds: forms.musicTagIds
-                            })
-                          );
-                          getList();
-                        }}>
-                        {item.name}
+                        class={[
+                          styles.textBtn,
+                          selectChildObj(item.instruments).selected &&
+                            styles.textBtnActive
+                        ]}>
+                        {selectChildObj(item.instruments).name || item.name}
+                        <i class={styles.iconArrow}></i>
                       </NButton>
-                    </>
-                  );
-                })}
+                    </NPopselect>
+                  ) : (
+                    <NButton
+                      round
+                      textColor={
+                        data.tagIndex === (item.value || 0) ? '#fff' : '#000'
+                      }
+                      color={
+                        data.tagIndex === (item.value || 0)
+                          ? '#198CFE'
+                          : 'rgba(46, 51, 56, .05)'
+                      }
+                      type={
+                        data.tagIndex === (item.value || 0)
+                          ? 'primary'
+                          : 'default'
+                      }
+                      onClick={() => {
+                        data.tagIndex = item.value || 0;
+                        forms.instrumentId = item.value;
+                        localStorage.setItem(
+                          'xiaoku-ai-search',
+                          JSON.stringify({
+                            tagActiveId: data.tagActiveId,
+                            instrumentId: item.value,
+                            musicTagIds: forms.musicTagIds
+                          })
+                        );
+                        getList();
+                      }}>
+                      {item.name}
+                    </NButton>
+                  )
+                )}
+                {/* // {
+                //   return (
+                //     <>
+                //       <NButton
+                //         round
+                //         secondary={item.id === forms.instrumentId ? false : true}
+                //         type={
+                //           item.id === forms.instrumentId ? 'primary' : 'default'
+                //         }
+                //         onClick={() => {
+                //           forms.instrumentId = item.id;
+
+                //           localStorage.setItem(
+                //             'xiaoku-ai-search',
+                //             JSON.stringify({
+                //               tagActiveId: data.tagActiveId,
+                //               instrumentId: item.id,
+                //               musicTagIds: forms.musicTagIds
+                //             })
+                //           );
+                //           getList();
+                //         }}>
+                //         {item.name}
+                //       </NButton>
+                //     </>
+                //   );
+                // })} */}
               </NSpace>
             </div>
           </div>

src/views/xiaoku-music/index.tsx

@@ -571,6 +571,7 @@ export default defineComponent({
                           options={item.instruments}
                           trigger="hover"
                           v-model:value={data.tagIndex}
+                          scrollable
                           onUpdate:value={() => {
                             // onSearch();
                             data.reshing = true;